CODEWITHSUNDEEP
javascriptjqueryfullcalendarfullcalendar-3
Iraklis Bekiaris
Iraklis Bekiaris

Reputation: 1221

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?

Upvotes: 2

Views: 6654

Answers (3)

Carlo Stanzione
Carlo Stanzione

Reputation: 59

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

Upvotes: 0

ADyson
ADyson

Reputation: 61794

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

Upvotes: 3

Iraklis Bekiaris
Iraklis Bekiaris

Reputation: 1221

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

Upvotes: 2

Related Questions