Question

我在我的应用程序及其工作中使用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>

Answer 1

您应该使用另一个提供假期的eventSource。这些事件可以具有holiday之类的属性，用于指定事件确实是假日。

根据此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" ， “假日”： “1”}]

将意大利假期添加到fullcalendar中

1 个答案: