Question

我正在为每个插槽更改fullcalendar中dayAgenda和weekAgenda的背景颜色。

到目前为止，我已经在viewRender尝试了这个但是坚持了......

 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.

     }
    }

如何实现以下目标：

如果其他用户在该时段中不可用，则更改背景颜色，以便在dayAgenda中单击该行之前，用户可以了解该特定时间内另一个用户的可用性。
如果当天有假期由其他用户设置，则在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", "");


                                }

                            });

                        })

                    }

fullCalendar＆＃34; dayAgenda＆＃34;和＆＃34; weekAgenda＆＃34;背景颜色变化

1 个答案: