Fullcalendar Change Event color Dynamically Example

jquery , Fullcalendar

Nicesnippets

91

07-09-2020


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

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