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

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?

$(".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 (i.e. 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