Skip to content

All topics  /  General

Fullcalendar Change Event color Dynamically Example

General ·

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" />
</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>

It will help you...

More on this topic