jquery colors fullcalendar fullcalendar-5

Set each different color in the event box with full calendar function

I have a problem setting the color in each event box in the full calendar function. Currently, I just can set in the fc-daygrid-event-dot. May I know how to set the background color in each event box?

Below is my coding:

 document.addEventListener('DOMContentLoaded', function() {
    // titleFormat: 'MMMM D, YYYY' 
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      headerToolbar: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      initialDate: '2021-04-25',
      navLinks: true, // can click day/week names to navigate views
      selectable: true,
      selectMirror: true,
      
      
      select: function(arg) {
      $('#createEventModal #startTime').val(arg.start);
      $('#createEventModal #endTime').val(arg.end);
      $('#createEventModal #when').text(arg.start);
      $('#createEventModal').modal('toggle');
    },
      eventClick: function(arg) {
        if (confirm('Are you sure you want to delete this event?')) {
          arg.event.remove()
        }
      },
      editable: true,
      dayMaxEvents: true, // allow "more" link when too many events
      events: <?php echo json_encode($myArray); ?>
    });
    calendar.render();   
  });

This is my json_encode($myArray); data:

[{"title":"All Day Event","start":"2016-01-01 00:00:00","color":"#40E0D0"},{"title":"Long Event","start":"2016-01-07 00:00:00","color":"#FF0000"},{"title":"Repeating Event","start":"2016-01-09 16:00:00","color":"#0071c5"},{"title":"Conference","start":"2016-01-11 00:00:00","color":"#40E0D0"},{"title":"Meeting","start":"2016-01-12 10:30:00","color":"#000"},{"title":"Lunch","start":"2016-01-12 12:00:00","color":"#0071c5"},{"title":"Happy Hour","start":"2016-01-12 17:30:00","color":"#0071c5"},{"title":"Dinner","start":"2016-01-12 20:00:00","color":"#0071c5"},{"title":"Birthday Party","start":"2016-01-14 07:00:00","color":"#FFD700"},{"title":"Double click to change","start":"2016-01-28 00:00:00","color":"#008000"},{"title":"13245132","start":"2021-03-31 00:00:00","color":"undefin"},{"title":"asfsa","start":"2021-04-01 00:00:00","color":"undefin"},{"title":"52115","start":"2021-04-01 00:00:00","color":"undefin"},{"title":"624","start":"2021-04-01 00:00:00","color":"undefin"},{"title":"512","start":"2021-04-04 00:00:00","color":"#FF0000"},{"title":"21512","start":"2021-04-06 00:00:00","color":"#FF0000"},{"title":"236234","start":"2021-04-07 00:00:00","color":"#FF0000"},{"title":"3521","start":"2021-04-03 00:00:00","color":"#00FF00"},{"title":"HHH","start":"2021-04-02 00:00:00","color":"#FFFF00"},{"title":"test","start":"2021-03-30 00:00:00","color":"#378006"},{"title":"asfsa","start":"2021-03-28 00:00:00","color":"#378006"},{"title":"ok","start":"2021-03-29 00:00:00","color":"#378006"},{"title":"ok","start":"2021-04-01 00:00:00","color":"#378006"},{"title":"ok","start":"2021-03-31 00:00:00","color":"#378006"},{"title":"555","start":"2021-04-16 00:00:00","color":"#378006"},{"title":"asfsa","start":"2021-03-28 00:00:00","color":"#FF0000"}]

Now my result like below the picture, each color just can show in the dot:

Actually, I want the expected result like below the sample picture:

What I've tried： i）I have tried to change color to background-color in the json_encode($myArray); data, but still cannot work.

Swati result:

Solution

You can use eventDidMount event inside this you can use .each loop to iterate through your json array and then we need to get the td where events are added .

Now , if you look dynamically generated td you will find data-date attribute so use this attribute then there can two or more event on same date so you can use title key from your json array and check this value is there inside fc-event-title div or not lastly use .closest(".fc-daygrid-event-harness") and change back-ground color of that div.

Demo Code :

//suppose this is array
var arrays = [{
  "title": "All Day Event",
  "start": "2016-01-01 00:00:00",
  "color": "#40E0D0"
}, {
  "title": "Long Event",
  "start": "2016-01-07 00:00:00",
  "color": "#FF0000"
}, {
  "title": "Repeating Event",
  "start": "2016-01-09 16:00:00",
  "color": "#0071c5"
}, {
  "title": "Conference",
  "start": "2016-01-11 00:00:00",
  "color": "#40E0D0"
}, {
  "title": "Meeting",
  "start": "2016-01-12 10:30:00",
  "color": "#000"
}, {
  "title": "Lunch",
  "start": "2016-01-12 12:00:00",
  "color": "#0071c5"
}, {
  "title": "Happy Hour",
  "start": "2016-01-12 17:30:00",
  "color": "#0071c5"
}, {
  "title": "Dinner",
  "start": "2016-01-12 20:00:00",
  "color": "#0071c5"
}, {
  "title": "Birthday Party",
  "start": "2016-01-14 07:00:00",
  "color": "#FFD700"
}, {
  "title": "Double click to change",
  "start": "2016-01-28 00:00:00",
  "color": "#008000"
}, {
  "title": "512",
  "start": "2021-04-04 00:00:00",
  "color": "#FF0000"
}, {
  "title": "21512",
  "start": "2021-04-06 00:00:00",
  "color": "#FF0000"
}, {
  "title": "236234",
  "start": "2021-04-07 00:00:00",
  "color": "#FF0000"
}, {
  "title": "3521",
  "start": "2021-04-03 00:00:00",
  "color": "#00FF00"
}, {
  "title": "HHH",
  "start": "2021-04-02 00:00:00",
  "color": "#FFFF00"
}, {
  "title": "test",
  "start": "2021-03-30 00:00:00",
  "color": "#378006"
}, {
  "title": "43",
  "start": "2021-03-28 00:00:00",
  "color": "#378006"
}, {
  "title": "ok",
  "start": "2021-03-29 00:00:00",
  "color": "#378006"
}, {
  "title": "o2k",
  "start": "2021-04-01 00:00:00",
  "color": "#378006"
}, {
  "title": "ok3",
  "start": "2021-03-31 00:00:00",
  "color": "#378006"
}, {
  "title": "5553",
  "start": "2021-04-16 00:00:00",
  "color": "#378006"
}, {
  "title": "asfsa",
  "start": "2021-03-28 00:00:00",
  "color": "#FF0000"
}]

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

  var calendar = new FullCalendar.Calendar(calendarEl, {
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay'
    },
    initialDate: '2021-04-25',
    navLinks: true, // can click day/week names to navigate views
    selectable: true,
    selectMirror: true,
    eventDidMount: function(view) {
      //loop through json array
      $(arrays).each(function(i, val) {
        //find td->check if the title has same value-> get closest daygird ..change color there
        $("td[data-date=" + moment(val.start).format("YYYY-MM-DD") + "] .fc-event-title:contains(" + val.title + ")").closest(".fc-daygrid-event-harness").css("background-color", val.color);
      })
    },
    select: function(arg) {
      $('#createEventModal #startTime').val(arg.start);
      $('#createEventModal #endTime').val(arg.end);
      $('#createEventModal #when').text(arg.start);
      $('#createEventModal').modal('toggle');
    },
    eventClick: function(arg) {
      if (confirm('Are you sure you want to delete this event?')) {
        arg.event.remove()
      }
    },
    editable: true,
    dayMaxEvents: true,
    events: arrays //pass array here
  });

  calendar.render();


});

.fc-event-title {
  color: white
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<div id='calendar'></div>