fullCalender "dayAgenda" и "weekAgenda" изменение цвета фона

Question

Я меняю цвет фона дняAgenda и weekAgenda в fullcalender для каждого слота.

До сих пор я попытался это на viewRender но 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. 


    } 
    } 

Как достичь следующего:

1- Изменить цвет фона, если другой пользователь не доступен в этом временном интервале, так что перед тем, как щелкнуть эту строку в dayAgenda, пользователь может получить представление о доступности другого пользователя в это конкретное время.

2- Изменение цвета фона столбцов (день) в weekAgenda, если в тот день есть праздники, которые задает другой пользователь.

Answer 1

Я исходил из этого, как показано ниже, и теперь праздники показывают правильные цвета фона в точных слотах.

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", ""); 


           } 

          }); 

         }) 

        }