изменить backgroundColor события FullCalendar (v4) - PullRequest
Новая
       24

изменить backgroundColor события FullCalendar (v4)

0 голосов
/ 05 июня 2019

Я пытаюсь реализовать поведение «выбранного события» в FullCalendar v4, но безуспешно.Мне нужно следующее поведение:

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

Первая проблемаэто изменить цвет фона события clicked, но у меня ничего не получается.

Документы FullCalendar v4 немного неоднозначны в отношении backgroundColor.Я попробовал следующие методы (пример реакции):

В настройке я поставил 

const calendar = new Calendar(this.calRef.current, {
    ...
    eventClick: this.eventClick
    ...
}

Первый метод использует метод setProp, как описано здесь 

eventClick = (info) => {
    info.event.setProp('backgroundColor', 'red')
}

Это не работает, хотя

Второй метод использует стили элементов, как описано здесь 

eventClick = (info) => {
    info.el.style.backgroundColor = 'red';
}

Это также не работает

Что я делаю не так?

1 Ответ

0 голосов
/ 05 июня 2019

Дэни. После просмотра того, что вы спрашиваете, похоже, что это уже как опция fullcalendar. При создании календаря вы должны включить плагин взаимодействия и установить для параметра selectable значение true . Как это: 

var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid','timeGrid','interaction' ],
    selectable: true,
...

Рабочий пример можно посмотреть по адресу https://codepen.io/ormasoftchile/pen/byZZXq

С наилучшими пожеланиями.

...