it-swarm.com.ru

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

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

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

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

14
Dr. Gadget

Для представлений 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/

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

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

.fc-past {
    background-color: silver;
}
7
Avindra Goolcharan

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

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

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

....
4
sulaiman sudirman

Если кто-то захочет 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");
                    }
    }
});

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

4
gmwraj

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

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

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

1
TK Omble

Чтобы сравнить, используя параметр даты для определенного дня:

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

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

1
http203

getDate не работает, я думаю, вместо этого используйте момент. 

внутриvar calendar = $('#calendar').fullCalendar({ ... }

dayRender: function (date, cell) {
        var today = moment('2018-06-22T00:00Z');
        if (date.isSame(today, "day")) {
            cell.css("background-color", "blue");
        }
    },
0
Reemi