Fullcalendar -> 改变颜色选择的事件答案

【问题标题】：Fullcalendar -> Change color selected eventFullcalendar -> 改变颜色选择的事件
【发布时间】：2015-09-02 14:47:43
【问题描述】：

我正在使用 FullCalendar，但无法更改所选日期的事件背景。您单击的其他日子标记为红色，但没有事件。我认为它是由 CSS 决定的，但我不知道如何修改它才能正常工作。

我的代码：http://jsfiddle.net/y33wb52n/

Javascript

$(document).ready(function() {
    var fecha_seleccionada;
    var tempVar = "";

    $('#calendar').fullCalendar({
        lang: "es",

        selectable: true,
        select: function(a, b) {
            fecha_seleccionada = a.format();
            //alert(fecha_seleccionada);
            var input_fecha = document.getElementById("input_fecha");
            input_fecha.value = fecha_seleccionada;
        },

        //defaultDate: '2015-02-12',
        editable: false,
        eventLimit: false, // allow "more" link when too many events
        events: [
                {
                    title: 'Evento',
                    width: '0',
                    start: '2015-09-17'
                },
                {
                    title: 'Evento',
                    width: '0',
                    start: '2015-09-19'
                }
        ],


        dayClick: function(date, allDay, jsEvent, view) {
            // change the day's background color just for fun
            if (tempVar == "")
            {
                $(this).css('background-color', 'red');
                tempVar = this;
            }
            else
            {
                $(this).css('background-color', 'red');
                $(tempVar).css('background-color', '#f6f6f6');
                tempVar = this;
            }
        }


    });
});

CSS

.fc-event-skin {
margin: -20px auto 0px auto; /* spacing between events and edges */
padding: 30px 0px;
border-radius: 0px !important;

}

HTML

<div id='calendar' style='margin:3em 0;font-size:13px'></div>

有什么帮助吗？谢谢！

【问题讨论】：

我不明白你在做什么。您是否尝试在加载所有事件时更改它们的背景颜色，或者在单击事件时更改它们的背景颜色？
我正在尝试更改我点击的日子的背景。但是有事件的日子没有用红色标记。

标签： javascript fullcalendar

【解决方案1】：

我相信这是因为如果您点击一个事件，您并没有点击当天。我对您提供的示例进行了尝试，如果您单击一个不会改变颜色的事件，这是正确的，但您实际上可以单击事件发生改变颜色的事件后面的那一天。

http://i.stack.imgur.com/OKDiR.png

因此，当您单击事件时，dayClick 事件不会触发，eventClick 事件会触发。

http://fullcalendar.io/docs/mouse/eventClick/

但不确定您应该如何从回调中获取事件背后的日期。

【讨论】：

【解决方案2】：

只需将其添加到您的 css 中：

.fc-highlight {
    background-color:red;
}

这在点击一天时有效，所以你应该在你的全日历 jQuery 中有这个：

$(document).ready(function() {
           $('#calendarID').fullCalendar({

           dayClick: function(date, jsEvent, view) {
                // some code
                $('#calendarID').fullCalendar('select', date);

           },
...

【讨论】：