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。

posted @ 2023-08-28 17:43  一个土豆一棵青菜  阅读(234)  评论(0编辑  收藏  举报