FullCalendar vue v5的使用

最新推荐文章于 2025-03-24 21:49:01 发布

原创

最新推荐文章于 2025-03-24 21:49:01 发布 · 2.8k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #javascript

这篇博客跳过了FullCalendar在Vue v5中的安装和引入步骤，直接探讨使用过程中遇到的问题。首先介绍了如何在FullCalendar中使用自定义模板和内容，通过插槽和eventContent属性来定制日程。接着，文章提到了对v5中部分属性和事件的总结，记录了实际使用中遇到的部分。其次，讲解了如何结合ACheckbox组件，利用onChange事件控制日程的显示和隐藏，实现动态交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面的安装和引入非常简单所以直接跳过

以下是本人在写FullCalendar的时候的一些问题：
1、使用FullCalendar自定义的模板及内容
在FullCalendar标签内部使用插槽

<template v-slot:eventContent="arg"></template>

eventContent是内容区域，在template里面就可以定制自己的日程了

arg可以获取到initialEvents这个属性的所有内容

		<template v-slot:eventContent="arg">
            <div class="appointment-app-main-calendar-content" @click="showModal(arg)">
              <div
                class="appointment-app-main-calendar-content-tips"
                :style="{ 'background-color': rooms[arg.event.id].backgroundColor }"
              />
              <span>{
   
   {
   
    arg.event.title }}</span>
              <br>
              <span>{
   
   {
   
    arg.timeText }}</span>
              <br>
              <span>会议主题</span>
            </div>