JQuery Полный календарь и динамические цвета событий

Question

Я хотел бы передать цвета для событий через мой источник событий json для jquery fullcalendar, как мне это достичь?

Answer 1

Ничего проще. Если вы проверите документацию jQuery Fullcalendar Event Colors, вы увидите, что есть параметр className, который вы можете указать для каждого объекта события. Содержимое этого параметра добавляется как класс к событиям, поэтому вам нужно указать только css с соответствующим именем.

события (принять к сведению параметра className на event1)

[ 
    { 
    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 Event Colors может идти вдоль этих линий:

использования различных Eventsources для событий, которые нуждаются в другой цвет:

$('#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 
     } 
    ] 
    ], 
    ... 
}); 

http://jsbin.com/ijasa3/99

Answer 2

Если вы обновляетесь до версии 1.5, вы можете обнаружить, что это не работает. Решение, как представляется, закомментировать стиль

.fc-event-skin { } 

Answer 3

С версии 1.5 вы можете установить TextColor, backgroudColor и BorderColor в каждом случае.

Answer 4

Для лучшего рендеринга лучше использовать backgroundColor из EventObject.