Question

我想在agendaDay视图的allday行中添加一个类，以便在用户选择它时突出显示它。

目前我的代码如下：

$('#calendar').fullCalendar({
    header: {
        left: 'prevYear,prev,today,next,nextYear',
        center: 'title',
        right: 'agendaDay,agendaWeek,month,listMonth'
    },
    defaultView: defaultView,
    navLinks: true,
    eventColor: 'blue',
    allDaySlot: true,
    height: "auto",
    events: {title: 'All Day Event', start: '2018-03-01',id: 999},
    dayClick: function(date, jsEvent, view) {
        if(view.name != 'agendaDay'){ 
            $(".fc-state-highlight").removeClass("fc-state-highlight");
            $("td[data-date=" + date.format('YYYY-MM-DD') + "]").addClass("fc-state-highlight"); 
        }
        if(view.name == 'agendaDay'){ 
            $(".fc-state-highlight").removeClass("fc-state-highlight");
            $('[data-time="'+date.format('hh:mm:ss')+'"]').addClass("fc-state-highlight");
        }
        if (clickTimer == null) {
            clickTimer = setTimeout(function () {
                clickTimer = null;
                console.log("single");
                ///Single Click code here

                console.log(date.format());
                $('#calendar').fullCalendar('changeView', 'agendaDay', date);
                ///
            }, 500)
        } else {
            clearTimeout(clickTimer);
            clickTimer = null;
            console.log("double");
            ///Double Click Code here

        }

    }
});

是否可以在用户点击它时添加一个类，如果没有，我可以在fullcalendar.js文件中添加一个类吗？

css是：

 .fc-state-highlight {
        background:cyan;
 }

Answer 1

你可以非常直接地做到这一点，对于'＃34;月＆＃34;和＆＃34;议程＆＃34;查看类型，如下所示：

JS：

$('#calendar').fullCalendar({
 header: {
        left: 'prevYear,prev,today,next,nextYear',
        center: 'title',
        right: 'agendaDay,agendaWeek,month,listMonth'
    },
    dayClick: function(date, jsEvent, view) {
        $(".highlight").removeClass("highlight");
        $("td[data-date="+date.format('YYYY-MM-DD')+"]").addClass("highlight");
    }
});

CSS：

.highlight
{
  background-color:red;
}

我认为你的主要困难是＆＃34; fc-state-highlight＆＃34;你正在使用的课程并没有真正做任何事情。

有关正常工作的演示，请参阅http://jsfiddle.net/sbxpv25p/436/。

如果你想要一种不同的颜色，你当然可以调整它，或者你只想在更受限制的情况下发生突出显示等。

将类添加到Fullcalendar Allday标记

1 个答案: