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

Question

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:

https://fullcalendar.io/docs/initialize-globals version 5.6.0 I think this version — Pi Network Crytocurrency, Apr 28 '21 at 05:24

score 2 · Answer 1 · answered Apr 28 '21 at 06:47

Your data contains a "color" key for each event. To achieve what you need you could set the "backgroundColor" key instead, which sets the color of the event. Please the the documentation here: https://fullcalendar.io/docs/event-object

    {[{"title":"All Day Event","backgroundColor": "yellow", "start":"2016-01-01 00:00:00","color":"#40E0D0"}...]

For a working example, please visit working example

Swati · Accepted Answer · 2021-04-28T09:42:41.807

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/fullcalendar-scheduler@5.6.0/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler@5.6.0/main.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<div id='calendar'></div>

Thanks for your answer. But the result cannot change all background color, you can check my updated question — Pi Network Crytocurrency, Apr 28 '21 at 08:59
from where that blue color coming :P in your result i am not seeing them in my code ? — Swati, Apr 28 '21 at 09:03
If you see its setting color correctly but , that blue color is overrriding that . Can you make runnable code ? Because i am seeing that behaviour on my end so i have look in your code to find exact reason. — Swati, Apr 28 '21 at 09:18
Thanks. I think is script problem. How to change word become white color? — Pi Network Crytocurrency, Apr 28 '21 at 09:30
use css `.fc-event-title { color :white }` . Also , for previous issue check if after changing `.closest(".fc-daygrid-event-harness")` to `.closest(".fc-event")` works . — Swati, Apr 28 '21 at 09:33
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/231692/discussion-between-swati-and-pi-network-crytocurrency). — Swati, Apr 28 '21 at 09:36
I have another question same as this question. If you have time, you see can help me or not. Thanks. https://stackoverflow.com/questions/67302723/event-click-show-the-selected-data-with-fullcalendar-function — Pi Network Crytocurrency, Apr 28 '21 at 15:01

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

2 Answers2

Linked