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?

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

ADyson · Accepted Answer · 2020-03-18T07:54:12.900

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

Much better I must admit :p – Iraklis Bekiaris Mar 17 '20 at 22:28 — Iraklis Bekiaris, Mar 17 '20 at 22:28

score 2 · Answer 2 · answered Mar 17 '20 at 22:04

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

answered Mar 17 '20 at 22:04

Iraklis Bekiaris

1,163
15
43

1

this is fine, although you could do it more easily using selectors. – ADyson Mar 17 '20 at 22:07
Not sure how I could do that, you can post an answer if it is easy for you :) Thanks again! – Iraklis Bekiaris Mar 17 '20 at 22:13

score 0 · Answer 3 · answered Mar 07 '22 at 11:48

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 :)

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

3 Answers3