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?

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?

• javascript
• jquery
• fullcalendar
• fullcalendar-3

• you've tagged fullCalendar 4, but the syntax above is all for fullCalendar 3. I've updated the tag. – ADyson Commented Mar 17, 2020 at 22:00
• $(".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.) – ADyson Commented Mar 17, 2020 at 22:07
• Ohhh that's right! Forgot about it :p Thank you for your edit and knowledge :)) – Iraklis Bekiaris Commented Mar 17, 2020 at 22:11

3 Answers 3

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

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

I found the same issue using eventClick with a fullcalendar ponent(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 ponent. Hope this will be useful to someone :)