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

Question

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

Answer 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
      }
    ]
  ],
  ...
});

http://jsbin.com/ijasa3/99

Answer 2

В версии 1.5 вы можете установить textColor, backgroudColor и borderColor в каждом событии.

Answer 3

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

.fc-event-skin { }

Answer 4

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