Search code examples
fullcalendarfullcalendar-schedulerfullcalendar-4

Change background color based on event title Fullcalendar 4


I'm trying to change the background color of an event (in Day View) of fullcalendar v4. I've spent hours trying to implement eventRender, to no avail. This has led me to find other workarounds, but now, I'm striking out!

I'm trying to figure out the solution explained here: [Fullcalendar - change event color based on value ..

But, every time the search for the word 'yes' is TRUE, I get an error in chrome console saying 'Failure parsing JSON'. If I change the search query to something that will create 'false', I do not get this error. To me, this means that the search is working, but the event render function is failing somehow.

my code:

    document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
  plugins: [ 'interaction', 'resourceDayGrid', 'resourceTimeGrid' ],
  defaultView: 'resourceTimeGridDay',
  defaultDate: '<?php echo $startdate?>',
  validRange: {
    start: '<?php echo $startdate?>',
    end: '<?php echo $maxdaycal?>'
    },
  height: 700,

...    
...

eventSources: [
            {
            url: 'getevents2.php?festid=<?php echo $festid?>&room=<?php echo $roomabv?>',
            cache: false,
            },
            {
            url: 'getbreaks2.php?festid=<?php echo $festid?>&room=<?php echo $roomabv?>',
            cache: false,
            color: 'grey',
            editable: false,
            }            
        ],
eventRender: function(info) {
      if(info.event.extendedProps.desc == "yes") {
      element.style.css('background-color', '#000');
      }
},
....
    });

calendar.render();


});

My goal: Search for the word "Accomp" in the title of the element (probably in info.event.title) .. and have the background change to a different color .. like red .. or something.

I've also tried to show an Icon in this field if the word Accomp is present, but -- I had to show it in a modal, because I couldnt get eventrender to show html.

I think this is because of the differences in FC v4 .. but I'm not sure.

I've also tried: [Is it possible to assign the background colour of a FullCalendar event based on its title? .. but I couldn't get that sorted out either.

UPDATE: The search function is working, as I can see it in the console log, but whenever I try to set the css, the calendar does not render.

          eventRender: function(info) {
          console.log(info.event.title);
            if(-1 != info.event.title.indexOf("Accomp")) {
            console.log(info.event.title);
                fc-title.css('background-color', '#000');
            }
        },

Solution

  • This is based on some other answers that areavailable, but it appears that there are differences in FC4... This works for me!

      eventRender: function(info) {
            if(-1 != info.event.title.indexOf("Accomp")) {
                info.el.style.backgroundColor  = "red";
            }
        },