javascript - FullCalendar 独特的自定义每周 View

Question

是否可以像图片链接一样从头开始构建每周 View - 使用下面的 Json 结构？

var nestedEvents = {
    "ABC": [
        { 
            title: 'Test-1',
            startDate: moment,
            endDate: moment,
            "allDay": true
        },{ 
            title: 'Test-2',
            startTime: moment,
            endTime: moment,
            "allDay": true
        }
    ],
    "DEF": [
        { 
            title: 'Test-3',
            startTime: moment,
            endTime: moment,
            "allDay": true
        }
    ]
};

Answer 1

您可以借助 momentjs 的格式函数来完成此操作

moment(startDate).format('w') //returns the weeknumber (from 1 to 53)  
moment(startDate).format('d') //returns the day of the week (from 0 to 6)

首先，您必须创建一个对象来存储按周排序的事件。

然后，您必须循环事件并使用事件相应的周和日索引将每个事件推送到此对象:

for(var i=0; i<events.length; i++){
    var weekIndex = moment(startDate).format('w')-1; 
    var dayIndex = moment(startDate).format('d');

    calendar.weeks[weekIndex].days[dayIndex].events.push(events[i]);
}

结果(一年)必须如下所示:

var calendar = {

"weeks": [
  {
     "weekNumber": 0,
     "days": [
        {
           "dayNumber": 0,
           "events": [
              {
                 "title": "Test-1",
                 "startDate": moment,
                 "endDate": moment
                 "allDay": true
              }
           ]
        },
        {
           "dayNumber": 1,
           "events": [
              {
                 "eventNumber": 0,
                 "title": "Test-2",
                 "startDate": moment,
                 "endDate": moment,
                 "allDay": true
              },
              {
                 "eventNumber": 1
              },
              {}
           ]
        },
        {
           "dayNumber": 2
        }
     ]
  },
  {
     "weekNumber": 1
  },
  {
     "weekNumber": 2
  },
  {}
]
}