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

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

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

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

источник

2013-07-12 YasoCH

Для взглядов month, и 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/

источник

2013-07-12 12:34:18

Смотрите мой ответ ниже для решения на основе CSS, которое предположительно было бы быстрее: http://stackoverflow.com/a/36927481/270302 –

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

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

Редактировать: Ответ Regin Larsen выглядит лучше. Я не заметил этого в документации.

источник

2013-07-12 12:39:29

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

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

источник

2014-01-09 12:54:47 gmwraj

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

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

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

....

источник

2014-01-11 01:12:24 sulaiman

этот помог мне. потому что метод 'dayRender' не работает должным образом с dayThreeView –

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

источник

2014-10-21 17:50:29 radmonius

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

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

источник

2016-04-29 00:12:26

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

$("#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/

источник

2016-08-04 14:15:26 http203

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

ответ

Смежные вопросы