fullcalendar动态获取数据

fullcalendar动态获取数据，包含上一个下一个  周视图 月视图

我知道的三种绑定数据的方式：

1.直接赋值一个数组[]

2.使用url，它会自动加上start和end参数

                    events: "/api/demo-feeds/events.json?overload-day"

3.使用方法包装

 

 

const getDatas = async (val) => {

  return await getXxxs(val)

/**打印val：

1. end: Sun Sep 03 2023 00:00:00 GMT+0800 (China Standard Time) {}
2. endStr: "2023-09-03T00:00:00+08:00"
3. start: Sun Aug 27 2023 00:00:00 GMT+0800 (China Standard Time) {}
4. startStr: "2023-08-27T00:00:00+08:00"
5. timeZone: "local"

**/

}

 

 

 

const calendarOptions = ref({
  plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
  initialView: 'timeGridWeek',
  eventMouseEnter: handleEventMouseEnter,
  eventClick: handleEventClick,
  locale: zhCnLocale,
  weekends: true,
  firstDay: 0,
  headerToolbar: {
    // 头部toolba
    left: 'prev,next today',
    center: 'title',
    right: 'timeGridDay,timeGridWeek,dayGridMonth'
    // right: 'dayGridMonth'
  },
  events: getDatas
  //  [
  //   //日程事件的json
  //   // { title: 'event 1', color: '#409eff;', date: '2023-08-14 12:00:00' },
  //   // { title: 'event 2', color: '#67c23a', date: '2023-08-15 05:59:23' },
  //   // { title: 'event 3', color: '#e6a23c', date: '2023-08-16 08:23:00' }
  // ]
})

　　参考：https://www.cnblogs.com/ichenchao/articles/12895462.html

 

Event Source Object

"event source"是Fullcalendar的事件数据源events，可以是你定义的一个数组，一个函数，一个返回json的接口，或者google calendar。