Я хотел бы передать цвета для событий через источник json events для jquery fullcalendar, как мне это достичь?
JQuery Полный календарь и динамические цвета событий
Ответ 1
Ничего проще. Если вы проверите документацию jQuery Fullcalendar цвета событий, вы увидите, что есть параметр className
, который вы можете указать для каждого объекта события. Содержимое этого параметра добавляется как класс к событиям, поэтому вам нужно указать только css с соответствующим именем.
События (обратите внимание на параметр className
в событии1)
[
{
title : 'event1',
start : '2012-06-10',
className : 'custom',
},
{
title : 'event2',
start : '2012-06-05',
end : '2012-06-07'
},
{
title : 'event3',
start : '2012-06-09 12:30:00',
allDay : false
}
]
CSS, чтобы сделать event1
выглядеть иначе
.custom,
.custom div,
.custom span {
background-color: green; /* background color */
border-color: green; /* border color */
color: yellow; /* text color */
}
Отметьте http://jsbin.com/ijasa3/96 для быстрого образца. Обратите внимание, что event1 имеет зеленый фон и желтый цвет текста.
Другим жизнеспособным способом использования опций, описанных в jQuery Fullcalendar Цвета события, можно было бы выполнить следующие строки:
Используйте разные источники событий для событий, которым нужен другой цвет:
$('#calendar').fullCalendar({
...
eventSources: [
//a full blown EventSource-Object with custom coloring
{
events: [
{
title : 'event1',
start : '2012-06-10'
}
],
backgroundColor: 'green',
borderColor: 'green',
textColor: 'yellow'
},
//a normal events-array with the default colors used
[
{
title : 'event2',
start : '2012-06-05',
end : '2012-06-07'
},
{
title : 'event3',
start : '2012-06-09 12:30:00',
allDay : false
}
]
],
...
});
Ответ 2
С версией 1.5 вы можете установить textColor, backgroudColor и borderColor в каждом случае.
Ответ 3
Если вы обновляетесь до версии 1.5, вы можете обнаружить, что это не работает. Решение состоит в том, чтобы прокомментировать стиль
.fc-event-skin { }
Ответ 4
Для лучшего рендеринга лучше использовать backgroundColor
для EventObject
.