在官方示例中,事件显示如下:
https://fullcalendar.io/js/fullcalendar-3.5.0/demos/basic-views.html
它列出了日历中的每个事件,单击单个事件将触发操作。
但是,我想进行一些自定义:
不显示任何事件, 但突出显示有事件的日期, 然后单击该日期转到 URL,例如
http://example.com/details?date=2017-09-10
是否有任何选项可以更改这样的布局?如果没有,那么从哪里开始定制呢?
非常感谢您的帮助。
最佳答案
这是可能的。您可以使用 CSS 轻松隐藏事件。然后,使用一点 jQuery,您可以在日期方 block 上设置颜色和单击时使用的 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>
关于javascript - Fullcalendar JS 突出显示有事件的日期,点击该日期将转到特定的 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46029844/