Change cell background in fullCalendar agenda view based on start and end of a selection event

Question

Is it possible to highlight cells in full calendar based on start and end date in agendaWeek view. Any help is really appreciated. My problem is in select event, based on start and end time i want to change the color of cells based on end and start time, just like when i add an event. Thanks in advance.

 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

For this situation you have to do little tricky hack in fullcalendar.js.

First, In agenda view there is a single full row for all days eg. Week start from 3rd Jan, 2016 to 9th Jan, 2016. And for 08:00 you will have single horizontal row () which start from 3rd Jan, 2016 to 9th Jan, 2016. Here you have to make separate div blocks and set date and time as id attribute for each days within that particular single row.

Second, On your selection bases you can apply class by getting element by id whereas id is combination of date and time.

Answer 2

I understand the question as 'Can i change day cel colors based on the start or end times of the events in them. If so - yup! =)

Do some logic in eventRender and look for the dom object of the day cel using it's data-date property (in this case i highlight any days that have a event before noon):

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>