Question

是否可以在agendaWeek视图中根据开始日期和结束日期突出显示完整日历中的单元格。任何帮助都非常感谢。我的问题是在select事件中，基于开始和结束时间我想根据结束和开始时间更改单元格的颜色，就像我添加事件时一样。提前谢谢。

 var calendar = $('#eventCal').fullCalendar({

            header:{left:'prev,next today', center:'title', right:'month,agendaWeek,agendaDay'},
            selectable:true,
            /*selectable: {
                month: false,
                agenda: true
            },*/
            defaultView:'${params.calView}',
            ignoreTimezone:true,
            allDayDefault:false,
            unselectAuto:false,
            editable:false,
            selectHelper: true,
            events:'${createLinkTo(dir: '/')}calendar/loadEvents/?requestuser=' +${params.requestuser?:currentUser} + '&courseSource=' + '${params.courseSource}',
            eventClick:function (event) {

                var currentView = $('#eventCal').fullCalendar('getView').name;
                var unsavedTimezone = '${unsavedTimezone}'
                    $.fancybox({
                        titleShow:false,
                        width:400,
                        height:120,
                        autoDimensions:true,
                        overlayOpacity:0.6,
                        onComplete:function () {
                            attachCalendarDatePickerClasses(event.start);
                        },
                        href:event.urlCalendar+'&calView=' + currentView + '&requestUser=' + $('#view_others').val() + '&unsavedTimezone=' + unsavedTimezone
                    });
            },

            select:function (startDate, endDate, allDay) {
                var currentView = $('#eventCal').fullCalendar('getView').name;
                if(drag && currentView=="agendaWeek") {
                    var availabilityDialog = $("<div>" +
                            '<input type="radio" id="availabilityYes" name="availability" value="true" />' + "Add Available Time" +
                            '<br/>' +
                            '<input type="radio" id="availabilityNo" name="availability" value="false"/>' + " Remove Availability" +
                            "</div>");
                    availabilityDialog.dialog({
                        title: 'Select Availability',
                        draggable: false,
                        autoOpen: false,
                        modal: true,

                    });
                    availabilityDialog.dialog('open');
                    $("body").on("click", ".ui-widget-overlay", function () {
                        availabilityDialog.dialog("close");
                    });

            },
            eventRender: function(event, element) {
               var currentView = $('#eventCal').fullCalendar('getView').name;
               if(currentView=='month'){
                element.qtip({
                  // content:$(this).children('.fc-event-time').text()
                   content: event.title + "<br>" + $.fullCalendar.formatDate(event.start, 'MM/dd/yyyy') + "<br>" + $.fullCalendar.formatDate(event.start, 'h:mmTT')+ "-" +$.fullCalendar.formatDate(event.end, 'h:mmTT') + " " +"${calendar.userTimeZone()}"+ "<br/>Member:"+event.member
                });
                }
                if(currentView!='month'){
                 element.find('.fc-event-title').append("<br/>" + $.fullCalendar.formatDate(event.start, 'h:mmTT') + "-" + $.fullCalendar.formatDate(event.end, 'h:mmTT')+ " "+"${calendar.userTimeZone()} " +"<br/>Member:"+event.member);
                 }
            },

            viewDisplay: function (view) {
                currentCalendarView = view.name;
            }

        });

Answer 1

对于这种情况，你必须在fullcalendar.js中做一些棘手的攻击。</ p>

首先，在议程视图中，所有日子都有一整行例如。周从2016年1月3日到2016年1月9日开始。从08:00开始，您将从2016年1月3日到2016年1月9日开始单水平行（）。在这里，你必须制作单独的div块，并将日期和时间设置为该特定单行中每天的id属性。

其次，在您的选择基础上，您可以通过按ID获取元素来应用类，而id是日期和时间的组合。

Answer 2

我将这个问题理解为'我可以根据事件的开始或结束时间更改日期颜色。如果是的话 - 是的！ =）

在eventRender中做一些逻辑，并使用它的data-date属性查找day cel的dom对象（在这种情况下，我突出显示在中午之前有事件的任何日子）：

Fiddle

$(document).ready(function() {
    $('#calendar').fullCalendar({   
        ...
        eventRender: function(event, element){
                    if (event.start.hours() < 12){
                $("td [data-date='" + event.start.format("YYYY-MM-DD") + "']").addClass('highlight-red');
              }
            },
        ...
    });
});

<style>
    #calendar .fc-day.highlight-red{
        background-color: red;
    }
</style>

根据选择事件的开始和结束更改fullCalendar议程视图中的单元格背景

2 个答案: