Jquery FullCalendar:将单击事件绑定到表标题
我目前正在做一个项目,包括fullcalendar JQuery插件。 我想通过单击agendaWeek或agendaDay中的day标题,创建一个包含所选日期的所有事件(以及其他信息)的列表。我通过viewDisplay选项将单击事件绑定到表格标题:Jquery FullCalendar:将单击事件绑定到表标题,jquery,fullcalendar,Jquery,Fullcalendar,我目前正在做一个项目,包括fullcalendar JQuery插件。 我想通过单击agendaWeek或agendaDay中的day标题,创建一个包含所选日期的所有事件(以及其他信息)的列表。我通过viewDisplay选项将单击事件绑定到表格标题: viewDisplay: function(view){ $('table.fc-agenda-days thead th').each(function(){ if($(this).html() != "&nbs
viewDisplay: function(view){
$('table.fc-agenda-days thead th').each(function(){
if($(this).html() != " "){
$(this).css('cursor','pointer'); // set cursor
$(this).unbind('click'); //unbind previously bound 'click'
$(this).click(function(){
// to be continued....
});
}
});
}
这个很好用。。。但如何从那里继续?我唯一能检索到的是日期标题(例如“Sun 2/19”)。也许有一个更简单的解决方案?我通过将weekView的columnFormat更改为读取完整日期来解决这个问题。在我的加泰罗尼亚地区案例中:
columnFormat: {
month: 'ddd',
week: 'dddd dd/MM/yyyy',
day: 'dddd dd/MM/yyyy'
}
然后在viewDisplay上,您可以解析完整日期,并在单击的日期导航到agendaDay:
viewDisplay: function(view) {
// Add onclick to header columns of weekView to navigate to clicked day on dayView
$('table.fc-agenda-days thead th').each(function(){
if($(this).html() != " "){
$(this).css('cursor','pointer'); // set cursor
$(this).unbind('click'); //unbind previously bound 'click'
$(this).click(function(){
var dateStr = $(this).html().substring($(this).html().indexOf(' ')+1);
var day = dateStr.substring(0, 2);
var month = dateStr.substring(3, 5) - 1;
var year = dateStr.substring(6, 10);
$('#calendar').fullCalendar('gotoDate', new Date(year, month, day));
$('#calendar').fullCalendar('changeView', 'agendaDay');
});
}
});
}
试试我自己做的这个变通方法。 通过单击日期标题,只需在fullcalendar init之后调用zumaMaker(),就可以轻松地从agendaWeek导航到agendaDay
function zumaMaker() {
var arrayUIDays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
for (var m = 0; m < arrayUIDays.length; m++) {
var dim = ".fc-day-header.fc-widget-header.fc-" + arrayUIDays[m];
var dok = $(dim).html();
$(dim).attr("onclick", "zumaMethod( '" + dok + "','" + dim + "');");
$(dim).css("cursor", "pointer");
}
}
function zumaMethod(doma, diver) {
var date = doma.split(" ")[1].split("/");
var day = date[0];
var month = date[1];
var year = date[2];
var off_date = year + "-" + month + "-" + day + "T" + "00:00:00";
$("#pl_tbl").fullCalendar('changeView', 'agendaDay');
$("#pl_tbl").fullCalendar('gotoDate', off_date);
$(diver).css("cursor", "pointer");
$(diver).attr("onclick", "zumaMethodRevert();");
}
function zumaMethodRevert() {
$("#pl_tbl").fullCalendar('changeView', 'agendaWeek');
zumaMaker();
}
.fc-day-header:hover {
background-color: orange;
}
.fc-day-header {
background-color: white;
}