Fullcalendar: изменение цвета для определенных дней

Я застрял в проекте, который я получаю на работе. Мне нужно изменить цвет фона на несколько дней. Это календарь, который должен видеть пользователь, какие дни доступны, а какие нет. Я узнал, что есть атрибут, называемый "дата-дата", но я не нашел возможности его использовать.

Есть ли способ манипулировать фоном конкретных дней?

Я думаю, что должен быть способ, потому что ячейка, которая показывает текущую дату, имеет другой цвет.

Ответ 1

Для представлений month, basicWeek и basicDay вы можете изменить рендеринг дней, предоставив функцию dayRender. Например:.

$("#calendar").fullCalendar({
    dayRender: function (date, cell) {
        cell.css("background-color", "red");
    }
});

Документация для dayRender доступна здесь: http://arshaw.com/fullcalendar/docs/display/dayRender/

И вот рабочий пример по jsfiddle: http://jsfiddle.net/kvakulo/CYnJY/4/

Ответ 2

    dayRender: function(date, cell){
        if (moment().diff(date,'days') > 0){
            cell.css("background-color","silver");
        }
    },

Ответ 3

Для тех, кто хочет просто изменить цвет прошлых дат, укажите .fc-past в своем css и добавьте свойство background-color.. Например,

.fc-past {
    background-color: silver;
}

Ответ 4

Если кто-то хочет, чтобы jquery fullcalendar предыдущий весь день был красным (или любым другим), то это код.

    var $calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
    },

    defaultView: 'month',

    dayRender: function (date, cell) {
       var check = $.fullCalendar.formatDate(date,'yyyy-MM-dd');
                    var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
                    if (check < today) {
                        cell.css("background-color", "red");
                    }
    }
});

Код Регина Ларсена поможет мне добиться этого. Спасибо Регину Ларсену.

Ответ 5

Почему бы не использовать атрибут date-date?

$("#calendar").fullCalendar(function() {

  viewRender: function() {
    $("[data-date="+$.fullCalendar.formatDate(new Date(), "yyyy-MM-dd")+"]").css("background-color", "red");
},

....

Ответ 6

При работе с внешними библиотеками вы должны стараться не использовать все, что было создано библиотекой. Поскольку в следующей версии, если они меняют способ работы библиотеки внутри, библиотека по-прежнему будет обратно совместимой, но ваш код перестанет работать. Поэтому попробуйте использовать библиотечный API как можно больше, а не делать хаки.

Отвечая на ваш вопрос, одним из способов сделать это будет, добавьте новое событие во все дни, которые недоступны. Это можно сделать, создав объект события и сделав renderEvent (.fullCalendar('renderEvent', event [, stick])). При создании объекта события назначьте цвет фона в качестве цвета, который вы хотите, и установите цвет, цвет текста, цвет рамки так же, как и фон, если вы не хотите, чтобы он был видимым.

Изменить: Ответ Регина Ларсена кажется лучше. Я не заметил этого в документации.

Ответ 7

Сравнение с использованием параметра даты для определенного дня:

$("#calendar").fullCalendar({
    dayRender: function (date, cell) {
        if (date.isSame('2016-08-04')) {
           cell.css("background-color","red");
        }
    }
});

isSame происходит от момента .js, который используется fullcalendar: http://momentjs.com/docs/#/query/is-same/