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>