fullCalendar "dayAgenda" and "weekAgenda" background colour change

Question

I am changing the background color of the dayAgenda and weekAgenda in fullcalendar for per slot.

So far I have tried this at viewRender but stucked..

 viewRender: function (view, element, cell) {

     if (view.type == "agendaWeek") {
      //change the each day background colors in week view vertically

       var  dayId = "Day id on which other user has set the holidays"
     // Set here the background color of column vartically if there is a holiday

     }
    if (view.type == "agendaDay") {
      //change the each time slot background colors horizontally according to availability of other user

        //Other user available between these time.
        var startTime = "start time here for that day, set by other user for his avaliability ";
        var endTime = "end time here for that day , set by other user for his avaliability";

       //Set here the background color if the other user not available at those time.

     }
    }

How to achieve the following:

Change background color if other user is not available in that time slot so that before clicking that row in dayAgenda user can get an idea about the availability of the another user at that particular time.
Change background color of the columns(day) in weekAgenda if there is holidays in that day which is set by the other user.

Anil Panwar Anil Panwar · Accepted Answer · 2016-05-17T14:49:17

I proceeded with this like below and now the holidays are showing with correct background colors in accurate slots.

 if (view.type == "agendaWeek") {              

                        //Get data in ajax call
                        $.each(data, function (i, item) {

                            var dayClass = data[i].IsHoliday || data[i].IsDayOff == true ? data[i].DayId : "";
                            if (dayClass != "")
                                dayClass = dayClass == 1 ? "fc-mon"
                                    : dayClass == 2 ? "fc-tue"
                                    : dayClass == 3 ? "fc-wed"
                                    : dayClass == 4 ? "fc-thu"
                                    : dayClass == 5 ? "fc-fri"
                                    : dayClass == 6 ? "fc-sat"
                                    : "fc-sun";
                            if (data != undefined)
                                $(".fc-day." + dayClass).css("background-color", "#CCCCC");

                        });


             }


 if (view.type == "agendaDay") {


                        //Get data in ajax call

                        //Just color the back ground of each dayAgenda time slot
                        $('.fc-slats > table > tbody  > tr').each(function (i) {
                            $("td:nth-child(2)", this).css("background", "#CCCCCC");
                        });

                        $.each(data, function (i, item) {
                            // if this day is alredy a holiday or day off then make it 
                            //completely unavialable to book appointment.
                            if (data[i].IsHoliday == true || data[i].IsDayOff == true) {

                                return false;
                            }

                            var startTime = moment(data[i].StartTime, ["h:mm A"]).format("HH:mm");
                            var endTime = moment(data[i].EndTime, ["h:mm A"]).format("HH:mm");

                            var startTimeS = moment.duration(startTime, 'ms').asSeconds();
                            var endTimeS = moment.duration(endTime, 'ms').asSeconds();

                            $('.fc-slats > table > tbody  > tr').each(function () {

                                var time = moment(this.innerText.trim(), ["h:mm A"]).format("HH:mm");
                                var timeS = moment.duration(time, 'ms').asSeconds();

                                //Remove the color slots which are avialable for the physician.
                                if (timeS >= startTimeS && timeS <= endTimeS) {
                                    $("td:nth-child(2)", this).css("background", "");


                                }

                            });

                        })

                    }

fullCalendar "dayAgenda" and "weekAgenda" background colour change

1 Answers