使用vue-meeting-selector模板，但无法显示日历

Question

我正在尝试创建一个带有约会槽的日历，以便用户可以单击并选择一个时间进行预订。我正在使用来自包vue-meeting-selector的模板。问题是日历本身没有显示在页面上。

这是模板 的代码

<template>
<div id="app">
<vue-meeting-selector
class="simple-example__meeting-selector"
v-model="meeting"
:date="date"
:loading="loading"
:class-names="classNames"
:meetings-days="meetingsDays"
@next-date="nextDate"
@previous-date="previousDate"
/>
<p>meeting Selected: {{ meeting ? meeting : "No Meeting selected" }}</p>
</div>
</template>
<script>
import VueMeetingSelector from "vue-meeting-selector";
import data from "./data.json";
export default {
name: "App",
components: {
VueMeetingSelector,
},
data() {
return {
date: new Date(),
meetingsDays: [],
meeting: { date: "2021-01-15T08:00:00.000Z" },
loading: true,
nbDaysToDisplay: 5,
};
},
methods: {
// @click on button-right
async nextDate() {
console.log("nextDate");
},
// @click on button-left
async previousDate() {
console.log("previousDate");
},
},
async created() {
this.meetingsDays = data;
this.loading = false;
},
};
</script>
<style>
</style>

我确实在组件上导入了包import VueMeetingSelector from "vue-meeting-selector";

我还安装了npm install——save vue-meeting-selector包

我没有得到错误时，试图运行前端。它只是不显示日历。你知道我错过了什么吗

我得到这个模板的来源:https://codesandbox.io/s/vue-meeting-selector-ex-forked-lyw515?file=/src/App.vue:0-1084https://www.npmjs.com/package/vue-meeting-selector?activeTab=readme

Answer 1

你需要使用slotsGeneratorAsync和导入样式import 'vue-meeting-selector/dist/style.css';。

查看这个例子