Fullcalendar | Change color of fc-event-dot at list view

Question

I am using full calendar and i am setting the defaultView to listMonth like this:

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
    }
});

how can i change the the color of the dot?

Answer 1

$(".fc-event-dot").css(.... won't work as you intended, even if it was working at all, because $(".fc-event-dot") targets all the dots (ie all the elements with that class), not just the one for the specific event being rendered. And it's not working because those elements haven't yet been rendered. Each dot only exists within the element object supplied to the eventRender callback. FullCalendar has not yet added the event and its constituent elements to the DOM - that only happens when the eventRender call finishes, so that you have the chance to amend the appearance before it is drawn on the calendar.

Therefore you have to update the item by finding it within element . Fortunately jQuery provides a simple way to do so, using the .find() function:

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');
},

Working demo: https://codepen.io/ADyson82/pen/MWwXbVK?editable=true&editors=001

Answer 2

I found the solution.

Do not know if it is the proper way but it works.

It goes like this:

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
    }
}

Answer 3

I found the same issue using eventClick with a fullcalendar component(using Vue):

eventClick: function(info) {
        if(info.el.style.borderColor == 'green') {
          info.el.children[0]["style"].borderColor = "red"; //change the dot
          info.el.style.borderColor = 'red'; //change the border-color of the date
        }
        else{
         info.el.children[0]["style"].borderColor = "green";
            info.el.style.borderColor = 'green';
        }
        },

This function is placed inside the calendarOptions of the component. Hope this will be useful to someone:)