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。

在这个 starter sn-p 中查看 cmets。
玩得开心！

$("#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>