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>

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

1 个答案: