【发布时间】：2020-02-12 01:47:30
【问题描述】：
我想在 fullcalendar v4 中显示事件的年视图。在 2.2.7 版之前，已将年视图添加到完整日历中。以后的版本没有这个。所以，我决定使用自定义视图创建年视图。但是我不知道应该在哪里添加以我们想要的方式显示年视图的 html 部分。这就是我创建视图的方式。但是 listYear 插件能够以列表形式显示一年中的所有事件。我想在一个视图上显示整个月的日历显示事件。是否可以添加我们自己的 html 表格以在日历中呈现？
views: { Year: { type : 'listYear', duration : { months: 12 }, start :year+'-01-01', end :(year+1)+'-01-01', buttonText:'year' } }
document.addEventListener('DOMContentLoaded', function() {
var year =<?php echo $year;?>;
var event ='<?php echo json_encode($events);?>';
event=JSON.parse(event);
//console.log(event);
//create event Array
events_array=[];
for(i=0;i<event.length;i++)
{
//parameter for event Array-https://fullcalendar.io/docs/event-object
start_array=event[i]['start'].split(" ");
end_array=event[i]['end'].split(" ");
if(start_array[1]==='00:00:00')
{
start =start_array[0];
}
else
{
start =event[i]['start'];
}
if(end_array[1]==='00:00:00')
{
end =end_array[0];
}
else
{
end =event[i]['end'];
}
object_data={
id :event[i]['id'],
title :event[i]['remark']+'-'+event[i]['title'],
start :start,
end :end,
color :event[i]['color'],
}
events_array.push(object_data);
}
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid','list'],
header:
{
left : 'prev,next today',
center : 'title',
//version 2.2.7 able to show year view.Year view has been implemented until version 2.2.7.
//But , we are using 4 to use valid range (limiting the duration).Valid range available from 3.3.0
right : 'Year,dayGridMonth,dayGridWeek,dayGridDay,listMonth'
},
views: {
Year: {
/* type: 'timelineYear',*/
type: 'listYear',
duration: { months: 12
/*weeks:1*/ },
start:year+'-01-01',
end: (year+1)+'-01-01',
/*intervalStart: $.fullCalendar.moment(year+'-01-01'),
intervalEnd: $.fullCalendar.moment((year+1)+'-01-01'),*/
buttonText: 'year'
}
},
defaultDate: year+'-01-01',
//set the year range limit - fullcalendar.min.js v3.3.0 & above support this
validRange: {
start : year+'-01-01',
end : (year+1)+'-01-01'
},
defaultView : 'dayGridMonth',
editable : false,//disable drag
events : events_array,
//from [https://stackoverflow.com/questions/45698134/dayrender-not-properly-working-in-fullcalendar-on-given-dates]
dayRender: function (date, cell)
{
var disabledDates = ["2016-02-10", "2016-02-15"];
//$.inArray returns the index of the element in the array, not a boolean indicating if the item exists in the array. If the element was not found, -1 will be returned.
/*if ($.inArray(date.format("YYYY-MM-DD"), disabledDates) > -1)
{
cell.css("background-color", "green");
}
*/
}
});
calendar.render();
});
提前致谢
【问题讨论】：
-
为此，您需要一个基于创建自己的类的完全自定义视图 - 请参阅fullcalendar.io/docs/custom-view-with-js。实现起来可能相当复杂（我没有尝试过，但我认为会有很多工作），尽管您可以先从 fullCalendar 源代码复制现有 fullCalendar 视图之一的代码，然后修改满足您的需求。
标签： javascript calendar fullcalendar fullcalendar-4 fullcalendar-3