Любой способ раскрасить определенные дни в FullCalendar?

Question

Используя FullCalendar, есть ли способ, которым я могу программно раскрасить определенные дни иначе, чем в остальные дни? Например, в представлениях «месяц» или «неделя» я хотел бы раскрасить дни без событий на них «красным», а дни с некоторыми событиями (но еще не с полным графиком) - желтыми. Дни с полным графиком будут окрашены в обычный цвет (белый фон). Есть ли какие-либо обратные вызовы или теги CSS, которые я могу использовать, чтобы добавить это поведение? Спасибо.

Answer 1

Согласно ответу Регина здесь вы можете изменить цвет, установив в календаре событие dayRender , например:

$( "#calendar" ).fullCalendar(function() {  
    dayRender: function (date, cell) {

        if ( !dateHasEvent(date) )
            cell.css("background-color", "red");
        else if ( dateHasEvent(date) )
            cell.css("background-color", "yellow");
    }
});

function dateHasEvent(date) {
   // some code here
}

Answer 2

использовать вид для отображения определенных дней.

viewRender: function(view,element){
                    $.ajax({
                        url: //your custom url,
                        data: {start:view.start.format(),end:view.end.format()},
                        type: 'GET',
                        dataType: "json",
                        contentType: "application/json",                
                        success: function (data) {
                            $.each(data, function(i) {
                                $('.fc-day[data-date="'+data[i]["date"]+'"]').css('background', Your Color Code);
                            });
                        }
                    });
                },

Answer 3

Я согласен с первоначальным ответом gravityone. Вы можете отслеживать запрос .

Я не верю, что существует надежный способ реализации этого типа функции без модификации кода ядра. Я думаю, что ближе всего вы можете прийти сейчас что-то вроде следующего. Однако вам нужно будет создать эти вызовы для addClass (), используя ваши источники событий. Это работает только при полном просмотре календаря и «прерывается», если у вас есть день месяца, который отображается дважды в представлении (по сравнению с предыдущим или следующим месяцем).

$("div.fc-day-number:contains('15')").parent().addClass("vacation");

<style>
            .fc-grid .vacation {
                background-color:#F00;
            }
</style>

Answer 4

FullCalendar выглядит очень надежным календарем jquery, и редактирование исходного кода для этого может причинить вам некоторые неудобства, когда он обновляется автором. Я бы предложил написать письмо автору и попросить добавить эту функцию, или некоторую информацию о том, как редактировать поля, как вам нужно.

Вторая идея заключается в том, чтобы посмотреть, какие селекторы CSS создаются при каждой вашей ситуации, и изменить цвет фона в соответствии с ситуацией. Это оставит исходный код FullCal бесплатным для обновления и даст вам то, что вам нужно.

Надеюсь, это поможет.

Answer 5

Мне нужно было выделить несколько дней, используя данные с сервера, без использования каких-либо событий fullcalendar. Оказалось, что с помощью jQuery все относительно просто. В примере кода вам нужно будет заполнить объект days датами в формате fullcalendar (возможно, через JSON). Формат (ГГГГ-ММ-ДД). За этим должно следовать значение: 0 - ложь, 1 или больше - истина. Объект days должен быть инициализирован до события готовности документа (поэтому переменные дни должны быть глобальными для document.ready). В этом примере 2016-03-05 и 2016-03-30 будут выделены, а 2016-03-09 - нет.

$(document).ready(function(){
  var days = {'2016-03-05': 1,'2016-03-09': 0,'2016-03-30': 1};
  $("td, th").each(function(){
    if(days[$(this).attr("data-date")]){
      $(this).css("background-color","lime");
    }
  });
});

Я искал в Интернете общее решение, подобное этому, но безуспешно. Многие люди подошли близко, но этот делает то, о чем просили другие.

Надеюсь, это поможет.

Don

Answer 6

Если кто-то все еще ищет такое же решение, вот это JSFiddle .

JQuery

$(document).ready(function() {

  $('#calendar').fullCalendar({
    theme: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultDate: '2014-07-04',
    editable: true,
    events: [{
      title: 'All Day Event',
      start: '2014-07-01'
    }, {
      title: 'Long Event',
      start: '2014-07-07',
      end: '2014-07-10'
    }, {
      id: 999,
      title: 'Repeating Event',
      start: '2014-07-09T16:00:00'
    }, {
      id: 999,
      title: 'Repeating Event',
      start: '2014-07-16T16:00:00'
    }, {
      title: 'Meeting',
      start: '2014-07-12T10:30:00',
      end: '2014-07-12T12:30:00'
    }, {
      title: 'Lunch',
      start: '2014-07-12T12:00:00'
    }, {
      title: 'Birthday Party',
      start: '2014-07-13T07:00:00'
    }, {
      title: 'Click for Google',
      url: 'http://google.com/',
      start: '2014-07-28'
    }],
    eventAfterAllRender: function(view) {
      //Use view.intervalStart and view.intervalEnd to find date range of holidays
      //Make ajax call to find holidays in range.
      var fourthOfJuly = moment('2014-07-04', 'YYYY-MM-DD');
      var holidays = [fourthOfJuly];
      var holidayMoment;
      for (var i = 0; i < holidays.length; i++) {
        holidayMoment = holidays[i];
        if (view.name == 'month') {
          $("td[data-date=" + holidayMoment.format('YYYY-MM-DD') + "]").addClass('holiday');
        } else if (view.name == 'agendaWeek') {
          var classNames = $("th:contains(' " + holidayMoment.format('M/D') + "')").attr("class");
          if (classNames != null) {
            var classNamesArray = classNames.split(" ");
            for (var j = 0; j < classNamesArray.length; j++) {
              if (classNamesArray[j].indexOf('fc-col') > -1) {
                $("td." + classNamesArray[j]).addClass('holiday');
                break;
              }
            }
          }
        } else if (view.name == 'agendaDay') {
          if (holidayMoment.format('YYYY-MM-DD') == $('#calendar').fullCalendar('getDate').format('YYYY-MM-DD')) {
            $("td.fc-col0").addClass('holiday');
          };
        }
      }
    }
  });

});

CSS

body {
  margin: 0;
  padding: 50px 0 0 0;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
  font-size: 14px;
}

#calendar {
  width: 100%;
}

.holiday {
  background: lightgray;
}

HTML

<div id="calendar"></div>