全日历 v4 中的事件年视图
event year view in fullcalendar v4
我想在 fullcalendar v4 中显示事件的年度视图。在 2.2.7 版本之前，年视图已添加到完整日历中。以后的版本没有这个。所以，我决定使用自定义视图创建年视图。但是我不知道我应该在哪里添加 html 以我们想要的方式显示年视图的部分。这就是我创建视图的方式。但是 listYear 插件能够以列表的形式显示一年中的所有事件。我想在一个视图中显示整个月的日历显示事件。是否可以添加我们自己的 html table 以在日历中呈现？
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 [
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();
});
提前致谢
我的目标是使用版本 3 及更高版本，因为它支持有效范围功能，并且版本 3 自定义视图非常容易理解。所以，我不得不使用版本 3 来做年视图。今年的视图仅限于由 12 个月组成的一年。在全日历实例化中声明自定义视图。
views:
{
CustomView:
{
type: 'custom',
}
}
在自定义年视图的页眉中声明一个按钮 year。然后在 customButtons: 中，定义当用户单击此按钮时发生的情况。
customButtons:
{
year:
{
text:'year',
click: function()
{
$('#calendar').fullCalendar('changeView', 'CustomView');
}
}
}
然后，获取对 fullcalendar 根命名空间的引用(FC)和所有视图继承自的class(View)。
var FC =$.fullCalendar;
var View =FC.View;
在我们的 class CustomView 的 render: function() 内构建视图。创建包含 12 个字段（3 列和 4 行）的 table 并附加到 fc-view。然后，将每个事件与所需的信息排列在对象中，并添加到 events_array.events_array 包含事件的对象。在数组 months 中获取接下来的 12 个月从哪个期间月份开始。然后，在月份数组中循环并在使用 id 创建的 table 中的每个字段中实例化完整日历视图。 ID 是来自 months（例如：'january_2019'）的值。设置时长为一个月，传入events数组。因此，每个字段显示一个月的视图以及事件。 12 个字段显示 12 个月的视图。
CustomView = View.extend(
{
render: function()
{ }}
在视图系统中注册我们的class。
FC.views.custom = CustomView;
<?php
require_once('bdd.php');
// information from sql
// $event_2 is events array
// $event_3 are array of earliest event start and latest event end date, chosen period start and end date,
?>
<html>
<head>
<style>
#container
{
width: 100%;
position: relative;
}
#calendar
{
width: 900px; /*can be in percentage also.*/
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
}
td.fc-sun
{
background-color: #535450 !important;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src='js/moment.min.js'></script>
<script src='v_3/fullcalendar.min.js'></script>
<link rel="stylesheet" href="v_3/fullcalendar.min.css" />
<script>
$(document).ready(function()
{
var event ='<?php echo json_encode($events_2);?>';
event =JSON.parse(event);
limit ='<?php echo json_encode($events_3);?>';
limit =JSON.parse(limit);
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'];
}
console.log(start+'=>'+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);
}
$('#calendar').fullCalendar
({
defaultDate: limit[0]['earliest'],
validRange: {
start : limit[0]['earliest'],
end : limit[0]['final']
},
header :
{
left :'prev,next,today',
center :'title',
right :'year,agendaWeek,month'
},
events : events_array,
customButtons:
{
year:
{
text:'year',
click: function()
{
$('#calendar').fullCalendar('changeView', 'CustomView');
}
}
},
views:
{
CustomView:
{
type: 'custom',
}
}
})
var view = $('#calendar').fullCalendar('getView');
//custom view:
var FC = $.fullCalendar; //a reference to FullCalendar's root namespace
var View =FC.View; //the class that all views must inherit from
var CustomView; //our subclass
start_year =limit[0]['earliest'].split("-")[0];
end_year =limit[0]['final'].split("-")[0];
start_month =parseInt(limit[0]['fye_start'].split("-")[1]);
CustomView = View.extend(
{
render: function()
{
$('.fc-prev-button').addClass('fc-state-disabled');
$('.fc-next-button').addClass('fc-state-disabled');
//change the title
document.getElementsByClassName("fc-center")[0].getElementsByTagName('h2')[0].innerHTML = start_year;
//
var months =getNext12MonthNamesWithYear(limit[0]['fye_start']);
var table ='<table align="center" style="width:100%">';
var m=0;
for(i=1;i<=4;i++)
{
table+='<tr>';
for(j=1;j<=3;j++)
{
table+='<td height="100"><div id="'+months[m]+'"></div></td>';
m++;
}
table+='</tr>';
}
table+='</table>';
$('.fc-view').append(table);
for(n=0;n<months.length;n++)
{
year =months[n].split("_")[1];
month=months[n].split("_")[0];
//
month=getMonthFromString(month);//convert month string to month no
//month compulsory to have 2 digit
if(month>=10)
{
c=month;
}
else
{
c='0'+month;
}
$('#'+months[n]).fullCalendar
(
{
header:
{
left: '',
center: 'title',
right: ''
},
events : events_array,
defaultDate : year+'-'+(c)+'-01',
//set the year range limit - fullcalendar.min.js v3.3.1 & above support this
defaultView:'month',
duration:
{
months: 1
}
})
}
},
}
)
FC.views.custom = CustomView; // register our class with the view system*/
})
function getNext12MonthNamesWithYear(date)
{
var now = new Date(date);
var month = now.getMonth();
var year = now.getFullYear();
var names = ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'];
var res = [];
for (var i = 0; i < 12; ++i)
{
res.push(names[month] + '_' + year);
if (++month === 12)
{
month = 0;
++year;
}
}
return res;
}
function getMonthFromString(mon)
{
return new Date(Date.parse(mon +" 1, 2012")).getMonth()+1
}
</script>
</head>
<body>
<div id='calendar'></div>
</body>
期待更好的解决方案。
我想在 fullcalendar v4 中显示事件的年度视图。在 2.2.7 版本之前，年视图已添加到完整日历中。以后的版本没有这个。所以，我决定使用自定义视图创建年视图。但是我不知道我应该在哪里添加 html 以我们想要的方式显示年视图的部分。这就是我创建视图的方式。但是 listYear 插件能够以列表的形式显示一年中的所有事件。我想在一个视图中显示整个月的日历显示事件。是否可以添加我们自己的 html table 以在日历中呈现？
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 [
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();
});
提前致谢
我的目标是使用版本 3 及更高版本，因为它支持有效范围功能，并且版本 3 自定义视图非常容易理解。所以，我不得不使用版本 3 来做年视图。今年的视图仅限于由 12 个月组成的一年。在全日历实例化中声明自定义视图。
views: { CustomView: { type: 'custom', } }
在自定义年视图的页眉中声明一个按钮 year。然后在 customButtons: 中，定义当用户单击此按钮时发生的情况。
customButtons: { year: { text:'year', click: function() { $('#calendar').fullCalendar('changeView', 'CustomView'); } } }
然后，获取对 fullcalendar 根命名空间的引用(FC)和所有视图继承自的class(View)。
var FC =$.fullCalendar; var View =FC.View;
在我们的 class CustomView 的 render: function() 内构建视图。创建包含 12 个字段（3 列和 4 行）的 table 并附加到 fc-view。然后，将每个事件与所需的信息排列在对象中，并添加到 events_array.events_array 包含事件的对象。在数组 months 中获取接下来的 12 个月从哪个期间月份开始。然后，在月份数组中循环并在使用 id 创建的 table 中的每个字段中实例化完整日历视图。 ID 是来自 months（例如：'january_2019'）的值。设置时长为一个月，传入events数组。因此，每个字段显示一个月的视图以及事件。 12 个字段显示 12 个月的视图。
CustomView = View.extend( { render: function() { }}
在视图系统中注册我们的class。
FC.views.custom = CustomView;
<?php
require_once('bdd.php');
// information from sql
// $event_2 is events array
// $event_3 are array of earliest event start and latest event end date, chosen period start and end date,
?>
<html>
<head>
<style>
#container
{
width: 100%;
position: relative;
}
#calendar
{
width: 900px; /*can be in percentage also.*/
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
}
td.fc-sun
{
background-color: #535450 !important;
}
</style>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src='js/moment.min.js'></script>
<script src='v_3/fullcalendar.min.js'></script>
<link rel="stylesheet" href="v_3/fullcalendar.min.css" />
<script>
$(document).ready(function()
{
var event ='<?php echo json_encode($events_2);?>';
event =JSON.parse(event);
limit ='<?php echo json_encode($events_3);?>';
limit =JSON.parse(limit);
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'];
}
console.log(start+'=>'+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);
}
$('#calendar').fullCalendar
({
defaultDate: limit[0]['earliest'],
validRange: {
start : limit[0]['earliest'],
end : limit[0]['final']
},
header :
{
left :'prev,next,today',
center :'title',
right :'year,agendaWeek,month'
},
events : events_array,
customButtons:
{
year:
{
text:'year',
click: function()
{
$('#calendar').fullCalendar('changeView', 'CustomView');
}
}
},
views:
{
CustomView:
{
type: 'custom',
}
}
})
var view = $('#calendar').fullCalendar('getView');
//custom view:
var FC = $.fullCalendar; //a reference to FullCalendar's root namespace
var View =FC.View; //the class that all views must inherit from
var CustomView; //our subclass
start_year =limit[0]['earliest'].split("-")[0];
end_year =limit[0]['final'].split("-")[0];
start_month =parseInt(limit[0]['fye_start'].split("-")[1]);
CustomView = View.extend(
{
render: function()
{
$('.fc-prev-button').addClass('fc-state-disabled');
$('.fc-next-button').addClass('fc-state-disabled');
//change the title
document.getElementsByClassName("fc-center")[0].getElementsByTagName('h2')[0].innerHTML = start_year;
//
var months =getNext12MonthNamesWithYear(limit[0]['fye_start']);
var table ='<table align="center" style="width:100%">';
var m=0;
for(i=1;i<=4;i++)
{
table+='<tr>';
for(j=1;j<=3;j++)
{
table+='<td height="100"><div id="'+months[m]+'"></div></td>';
m++;
}
table+='</tr>';
}
table+='</table>';
$('.fc-view').append(table);
for(n=0;n<months.length;n++)
{
year =months[n].split("_")[1];
month=months[n].split("_")[0];
//
month=getMonthFromString(month);//convert month string to month no
//month compulsory to have 2 digit
if(month>=10)
{
c=month;
}
else
{
c='0'+month;
}
$('#'+months[n]).fullCalendar
(
{
header:
{
left: '',
center: 'title',
right: ''
},
events : events_array,
defaultDate : year+'-'+(c)+'-01',
//set the year range limit - fullcalendar.min.js v3.3.1 & above support this
defaultView:'month',
duration:
{
months: 1
}
})
}
},
}
)
FC.views.custom = CustomView; // register our class with the view system*/
})
function getNext12MonthNamesWithYear(date)
{
var now = new Date(date);
var month = now.getMonth();
var year = now.getFullYear();
var names = ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'];
var res = [];
for (var i = 0; i < 12; ++i)
{
res.push(names[month] + '_' + year);
if (++month === 12)
{
month = 0;
++year;
}
}
return res;
}
function getMonthFromString(mon)
{
return new Date(Date.parse(mon +" 1, 2012")).getMonth()+1
}
</script>
</head>
<body>
<div id='calendar'></div>
</body>
期待更好的解决方案。