javascript - Vue 尝试设置 boostrap 主题似乎不起作用

Question

我正在尝试在 vue 中为 fullcalendar 设置引导主题，但它给了我一个奇怪的主题（最后提供了图片）

我遵循了文档说明，甚至使用了 vue 示例来隔离更新，（最后提供了代码框）

文档说要添加 themeSystem='bootstrap' arg。导入并添加插件。导入样式表。

我做错了什么或错过了什么？

我的代码与示例略有不同：在此处提供

  <Container class="wpc-userscheduledetailviewcontent">
    <v-flex>
      <div id="calendar">
        <FullCalendar ref="fullCalendar"
                      defaultView="dayGridMonth"
                      themeSystem="bootstrap"
                      :plugins="calendarPlugins"
                      :header="calendarHeader"
                      :selectable="true"
                      @select="onSelectDay"></FullCalendar>
      </div>
    </v-flex>
  </Container>
</template>

<script>
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import bootstrapPlugin from '@fullcalendar/bootstrap';

export default {
  components: {
    FullCalendar,
  },
  data() {
    return {
      calendarPlugins: [dayGridPlugin, interactionPlugin, bootstrapPlugin],
      calendarHeader: {
        left: 'prev today next',
        center: 'title',
        right: 'dayGridDay, dayGridWeek, dayGridMonth',
      },
    };
  },
  computed: {},
  methods: {
    onSelectDay(event) {
      console.log(event);
    },
  },
};
</script>

<style lang="stylus">
@import '~@fullcalendar/core/main.css'
@import '~@fullcalendar/daygrid/main.css'
@import '~@fullcalendar/bootstrap/main.css'
</style>

https://codesandbox.io/s/fullcalendar-v4-vue-ekyh3?file=/src/DemoApp.vue

我的日历是什么样子的：

预期图像

编辑：添加到预期结果表单文档的链接

标签： javascripttwitter-bootstrapvue.jsfullcalendarfullcalendar-4