fullCalender「dayAgenda」和「weekAgenda」背景顏色變化

Question

我正在改變dayAgenda和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", ""); 


           } 

          }); 

         }) 

        }