FullCalendar的日历设置

最新推荐文章于 2024-08-09 08:23:26 发布

丶凡人

最新推荐文章于 2024-08-09 08:23:26 发布

阅读量261

点赞数

文章标签： html5 vue.js

本文链接：https://blog.csdn.net/Devil678/article/details/134849670

版权

本文详细介绍了如何在Vue项目中从Vue2版本升级到Vue3，以及如何配置FullCalendar插件，包括引入、组件化、事件处理和数据绑定等。

摘要由CSDN通过智能技术生成

npm install --save @fullcalendar/vue @fullcalendar/core

npm install --save @fullcalendar/vue3 @fullcalendar/core

<script>
import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
 
export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data() {
    return {
      calendarOptions: {
        eventColor: this.getEventColor, // 使用方法来确定颜色
        firstDay: 1,
        allDaySlot: false, // 不显示all-day
        firstHour: 6,
        slotMinTime: "06:00:00",
        slotMaxTime: "24:00:00",
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin // needed for dateClick
        ],
        datesSet: this.handleDatesSet,
        headerToolbar: {
          left: "prev,next today",
          center: "title",
          right: "dayGridMonth,timeGridWeek,timeGridDay"
        },

        /* 设置按钮文字 */
        buttonText: {
          today: "今天",
          dayGridMonth: "月",
          timeGridWeek: "周",
          timeGridDay: "日"
        },
        locale: "zh-cn",
        initialView: "timeGridWeek",
        // initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        // handleViewRender,
        eventDidMount: function (info) {  处理事件可以用
          if (info.event.extendedProps.isShowbgcColor) { //设置背景色
            info.el.style.background = "darkgray"
          }else{
            info.el.style.background = "#3788d8"
          }
          
        }, //事件挂载
        events: [  // 接收后端数据
           {
              title:"标题",
              start:"开始时间",
              end:"结束时间",
              color:"颜色局部",
              isShowBgcColor:"根据时间判断得出结果，在到eventDidMount里面去执行相关的方法"
            }
           


        ],
        customButtons: {
          next: {
            click: this.nextClick
          },
          prev: {
            click: this.prevClick
          },
        },
        eventColor: function (event) {
          if (event.start.isBefore(new Date())) {
            return "#f0f0f0"; // 过去事件的背景颜色
          } else {
            return "#008000"; // 未来事件的背景颜色
          }
        },

        // select: this.handleDateSelect,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents
        /* you can update a remote database when these fire:
        eventAdd:
        eventChange:
        eventRemove:
        */
      },
    }
  }
}
</script>
<template>
  <FullCalendar :options="calendarOptions" />
</template>```

[FullCalendar官网地址](https://fullcalendar.io/docs/vue)