FullCalendar - 通过单击议程周视图中的日期标题获取日期

Question

我想确定在议程周视图中单击日期标题单元格时选择的日期。我可以向这些标题单元格添加一个单击处理程序，但我不太清楚如何从完整日历中获取日期，因为单击标题时不会触发 dayClick 事件。这些单元格上的类是 fc-sun、fc-mon 等。

Answer 1

试试我自己做的这个解决方法。 只需在 fullcalendar 初始化后调用 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;
}

Answer 2

由于没有人回答，他就是我所做的。议程 viewObject 显示了当前一周的开始和结束日期。我创建了一个数组，其中包含显示的一周的所有日期。然后我使用 JQuery 选择所有第 th 标题单元格，并为每个 th 标记添加一个日期属性。我还为每个标签添加了一个点击事件，并在点击标题时检索了日期属性。必须在每个新的一周显示时执行此过程。