Fullcalendar JS突出显示发生事件的日期，单击该日期将转到特定的URL

Question

在官方示例中，事件显示如下：

https://fullcalendar.io/js/fullcalendar-3.5.0/demos/basic-views.html

它列出了日历中的每个事件，然后单击单个事件将触发操作。

但是，我想对以下内容进行一些自定义：

不显示任何事件，而是突出显示具有事件的日期，然后单击该日期，转到URL，例如

http://example.com/details?date=2017-09-10

是否可以选择这样的布局？ 如果没有，那么从哪里开始定制？

非常感谢您的帮助。

Answer 1

那是可能的。 您可以使用CSS轻松隐藏事件。 然后，使用一些jQuery，可以在日期方块上设置颜色，并在点击时使用data-url 。

查看此入门片段中的评论。
玩得开心！

 $("#calendar").fullCalendar({ events:[ {title:"Test", start:"2017-09-14", end:"2017-09-14" }, {title:"Test", start:"2017-09-22", end:"2017-09-22" }, {title:"Test", start:"2017-10-13", end:"2017-09-22" }, {title:"Test", start:"2017-10-22", end:"2017-09-22" } ], eventAfterAllRender : function(view) { //Loop through all event to set the highlight and onclick url $(".fc-event-container").each(function(){ // Get this day of the week number var weekDayIndex = $(this).index(); // Get the calendar row var row = $(this).closest(".fc-row"); // Get this date var date = row.find(".fc-day-top").eq(weekDayIndex).attr("data-date"); // Add highlight and data-date row.find(".fc-day").eq(weekDayIndex) .addClass("highlight") .attr("data-url","example.com/details?date="+date); }); } }); // Click handler $(document).on("click", ".highlight", function(){ alert( $(this).data("url") ); }); 

 .fc-event-container{ display:none; } .highlight{ background-color:red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.css" rel="stylesheet"/> <div id="calendar"></div>