Question

我目前正在开发一个包含fullcalendar JQuery插件的项目。我想通过点击agendaWeek-或agendaDay中的日期标题创建一个包含所选日期的所有事件（附加信息）的列表。我通过viewDisplay选项将click事件绑定到表头：

viewDisplay: function(view){
    $('table.fc-agenda-days thead th').each(function(){
        if($(this).html() != "&nbsp;"){ 
            $(this).css('cursor','pointer'); // set cursor
            $(this).unbind('click'); //unbind previously bound 'click'
            $(this).click(function(){
                // to be continued....       
            });
       }
    });
}

这很好......但是如何从那里继续？我唯一可以检索的是日标题（例如“Sun 2/19”）。也许有一个更简单的解决方案？

Answer 1

我通过更改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() != "&nbsp;"){
                $(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');
                });
            }
        });
    }

Answer 2

尝试我自己创造的这种解决方法。它将通过点击日标题轻松地从agendaWeek导航到agendaDay，只需在fullcalendar init之后调用zumaMaker（）。

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();
}

此外，您可以添加此css以自定义悬停时的日期标题。

.fc-day-header:hover {
   background-color: orange;
}
.fc-day-header {
   background-color: white;
}

FullCalendar：将click事件绑定到表头

2 个答案: