Fullcalendar Change Event color Dynamically Example

Hi Guys,

In this blog, I would like to share with you how to perform on change event color in fullcelendar. We will show fullcalendar event on change event color.

You can perform task on change event color then you can use on change event color in fullcalendar. You can use change event color on fullcalendar.

Here I will give you full example for on change event color in fullcalendar So let's see the bellow example.

Example

 
<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>Fullcalendar Change Event color Dynamically Example</title> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.css" target="_blank" rel="nofollow"  /> 
</head> 
<style type="text/css"> 
    #calendar { 
        width:80%; 
        margin: 20px auto; 
    } 
</style> 
<body> 
    <div id="calendar"></div> 
</body> 
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment-with-locales.min.js"></script> 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js"></script> 
<script type="text/javascript"> 
    var defaultEvents = [ 
    { 
        // Just an event 
        title: 'Test Event', 
        start: '2020-09-02', 
        className: 'scheduler_basic_event', 
        color:'black' 
    }, 
]; 
 
// Any value represanting monthly repeat flag 
var REPEAT_MONTHLY = 1; 
// Any value represanting yearly repeat flag 
var REPEAT_YEARLY = 2; 
     
$('#calendar').fullCalendar({ 
    header: { 
        left: 'prev,next today', 
        center: 'title', 
        right: 'month,agendaWeek,agendaDay' 
    }, 
        editable: true, 
        // defaultDate: '2017-02-16', 
        eventSources: [defaultEvents], 
        dayRender: function( date, cell ) { 
        // Get all events 
        var events = $('#calendar').fullCalendar('clientEvents').length ? $('#calendar').fullCalendar('clientEvents') : defaultEvents; 
    } 
}); 
</script> 
</html>