我在我的应用程序及其工作中使用 FullCalendar。
现在我需要将意大利假期的颜色更改为红色。我在周末这样做但是:
- 我不知道如何在日历中添加假期。
- 我怎样才能改变它们的颜色。
这是我的代码:
<script>
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev',
center: 'title',
right: 'next',
},
defaultView: 'month',
lang: 'it',
height: 600,
dayClick: function(date, jsEvent, view) {
// Changing BG color
$(this).css('background-color', 'green');
//Create modal here
$('#myModal').modal();
// Show Date in SPAN
$('#spnDate').html(date.format('DD/MM/YYYY'));
// Put Date value in a variable
$('#date').attr('value', date.format('DD/MM/YYYY'));
},
editable: true,
});
</script>
最佳答案
你应该使用另一个 eventSource
提供假期。这些事件可以有一个属性,如 holiday
,指定该事件确实是一个假期。
基于这个假期
,您可以使用eventRender
更改当天的背景颜色。
您必须将以下代码添加到 var calendar = $('#calendar').fullCalendar({
:
eventSources: [
{
url: 'fullcalendar/holidays' // url to get holiday events
}
// any other sources...
],
eventRender: function(event, element, view) {
// lets test if the event has a property called holiday.
// If so and it matches '1', change the background of the correct day
if (event.holiday == '1') {
var dateString = event.start.format("YYYY-MM-DD");
$(view.el[0]).find('.fc-day[data-date=' + dateString + ']')
.css('background-color', '#FAA732');
}
},
您的 JSON 对象应如下所示:
[{"title":"Christmas","start":"2014-12-25","holiday":"1"},{"title":"Another holiday","start":"2014-10-14","holiday":"1"}]
关于javascript - 将意大利假期添加到完整日历中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26361913/