将意大利节日添加到fullcalendar中 [英] Add Italian holidays into fullcalendar

问题描述

我在我的应用程序和它的工作中使用FullCalendar。

现在我需要将意大利节日的颜色更改为红色。我在周末做了，但：

1. 我不知道如何在日历中添加节假日。


2. 我怎样才能改变它们的颜色。
pre> <脚本>
var calendar = $（'＃calendar'）。fullCalendar（{
header：{
left：'prev'，
center：'title'，
right ：'next'，
}，
defaultView：'month'，
lang：'it'，
height：600，
dayClick：function（date，jsEvent ，view）{
//改变BG颜色
$（this）.css（'background-color'，'green'）;
//在这里创建模态
$（ '#myModal'）。modal（）;
//在SPAN中显示日期$ b $（'＃spnDate'）。html（date.format（'DD / MM / YYYY'））;
//将日期值放入一个变量
$（'＃date'）。attr（'value'，date.format（'DD / MM / YYYY'））;

}，
editable：true，
}）;
< / script>





解决方案

您应该使用另一个 eventSource 提供假期。这些事件可以有一个属性，如 holiday ，它指定该事件确实是一个假期。





基于此 holiday ，您可以使用 eventRender



您必须将以下代码添加到 var calendar = $（'＃calendar'）。fullCalendar（{：

  eventSources：[
 {
 url：'fullcalendar / holidays'// url获取节日活动
} 
 //任何其他来源... 
]，
 eventRender：函数（event，element，view）{
 //让我们测试这个事件是否有一个叫做holiday的属性
 //如果是，它匹配'1'，改变正确日期的背景
 if（event.holiday =='1'）{
 var dateString = event.start.format（YYYY-MM-DD）; 
 
 $（view.el [ 0]）。找到（。FC-天[数据日期= + dateString +]）
的CSS（背景色，＃FAA732’ ）; 
 
 
 
 
 $ b您的JSON对象应该如下所示： p> 
 
 
 
 
 [{title：Christmas，start：2014-12-25，holiday：1} ，{title：Another holiday，start：2014-10-14，holiday：1}] 
 
 
 
I use FullCalendar in my application and its working. 

Now I need to change the color of Italian holidays into red. I did it for weekends but: 

I don't know how to add holidays in calendar.
How can i change their color.
This is my code :
<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>

解决方案
You should use another eventSource that provides the holidays. These events can have a property like holiday, that specify that the event is indeed a holiday.

Based on this holiday, you can change the background color of the day with eventRender

You will have to add the following code to 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');
    }
},
Your JSON object should look like this:

  
[{"title":"Christmas","start":"2014-12-25","holiday":"1"},{"title":"Another holiday","start":"2014-10-14","holiday":"1"}]


                        
这篇关于将意大利节日添加到fullcalendar中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！