Полный календарь | Изменить цвет f c -event-dot при просмотре списка - PullRequest
Новая
       78

Полный календарь | Изменить цвет f c -event-dot при просмотре списка

2 голосов
/ 18 марта 2020

Я использую полный календарь, и я устанавливаю defaultView на listMonth следующим образом: 

var events= [... this.events,
    {
      "title": "a title"
      "start": "a date",
       type: "X"
    },
    {
      "title": "a title 2"
      "start": "a date 2",
       type: "Y"
    }
];

$("#calendar").fullCalendar({
    ...
    defaultView: "listMonth",
    eventRender: function (event, element) {
       if(event.type=="X")
          $(".fc-event-dot").css('background-color', '#2a7568 !important'); //does nothing
       if(event.type=="Y")
          $(".fc-event-dot").css('background-color', '#fff!important'); //does nothing
    }
});

как я могу изменить цвет точки

Ответы [ 2 ]

2 голосов
/ 18 марта 2020

$(".fc-event-dot").css(.... не будет работать так, как вы хотели, даже если бы он работал вообще, потому что $(".fc-event-dot") нацелен на все точки (т.е. все элементы этого класса), а не только один для указанного события c. И это не работает, потому что эти элементы еще не были отрисованы. Каждая точка существует только в объекте element, предоставленном для обратного вызова eventRender. FullCalendar еще не добавил событие и составляющие его элементы в DOM - это происходит только после завершения вызова eventRender, чтобы у вас была возможность изменить внешний вид до его отрисовки в календаре.

Поэтому вы необходимо обновить предмет, найдя его в пределах element. К счастью, jQuery предоставляет простой способ сделать это, используя функцию .find(): 

eventRender: function(event, element) {
  if (event.type == "X")
    element.find(".fc-event-dot").css('background-color','#08b394');
  if (event.type == "Y")
    element.find(".fc-event-dot").css('background-color','#2a7568');
},

Рабочая демонстрация: https://codepen.io/ADyson82/pen/MWwXbVK?editable=true&editors=001

1 голос
/ 18 марта 2020

Я нашел решение.

Не знаю, правильно ли это, но оно работает.

Это выглядит так: 

eventRender: function (event, element) {
    if (event.type == "planted") {
        element[0].cells[1].children[0].style.background = "#08b394" //works!
        //$(".fc-event-dot").addClass("#08b394 !important") //does not work
    } else {
        element[0].cells[1].children[0].style.background = "#2a7568" //works!
        //$(".fc-event-dot").css('background-color', '#2a7568 !important') //does not work
    }
}
...