Change cell background in fullCalendar agenda view based on start and end of a selection event
<p><a href="https://i.stack.imgur.com/hUoOG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hUoOG.png" alt="enter image description here"></a></p>

<p>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.</p>

<pre><code> 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} + '&amp;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+'&amp;calView=' + currentView + '&amp;requestUser=' + $('#view_others').val() + '&amp;unsavedTimezone=' + unsavedTimezone
                    });
            },

            select:function (startDate, endDate, allDay) {
                var currentView = $('#eventCal').fullCalendar('getView').name;
                if(drag &amp;&amp; currentView=="agendaWeek") {
                    var availabilityDialog = $("&lt;div&gt;" +
                            '&lt;input type="radio" id="availabilityYes" name="availability" value="true" /&gt;' + "Add Available Time" +
                            '&lt;br/&gt;' +
                            '&lt;input type="radio" id="availabilityNo" name="availability" value="false"/&gt;' + " Remove Availability" +
                            "&lt;/div&gt;");
                    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 + "&lt;br&gt;" + $.fullCalendar.formatDate(event.start, 'MM/dd/yyyy') + "&lt;br&gt;" + $.fullCalendar.formatDate(event.start, 'h:mmTT')+ "-" +$.fullCalendar.formatDate(event.end, 'h:mmTT') + " " +"${calendar.userTimeZone()}"+ "&lt;br/&gt;Member:"+event.member
                });
                }
                if(currentView!='month'){
                 element.find('.fc-event-title').append("&lt;br/&gt;" + $.fullCalendar.formatDate(event.start, 'h:mmTT') + "-" + $.fullCalendar.formatDate(event.end, 'h:mmTT')+ " "+"${calendar.userTimeZone()} " +"&lt;br/&gt;Member:"+event.member);
                 }
            },

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

        });
</code></pre>