FullCalendar generates real React virtual DOM nodes so you can leverage Fiber, React's highly optimized rendering engine.
Documentation for FullcalendarFirst, obtain the standard fullcalendar bundle in one of the following ways:
npm install fullcalendar
<div class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="36487">0</div>
<div class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="10">0</div>
<div class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="856">0</div>
<div class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="4562">0</div>
<div class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="5321">0</div>
<div class="counter purecounter" data-purecounter-delay="50" data-purecounter-start="0" data-purecounter-end="12356">0</div>
Copy-paste the following <script> near the end of your pages under Muze Javascript Plugins to enable it.
<script src="../assets/vendor/fullcalendar/main.min.js"></script>
Copy-paste the following <link> near the end of your pages under Muze Plugins CSS to enable it.
<link href="../assets/vendor/fullcalendar/main.min.css" rel="stylesheet" type="text/css" media="all">
Copy-paste the init function under JS Plugins Init before the closing </body> tag, to enable it.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
initialDate: '2021-01-07',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
events: [
{
title: 'All Day Event',
start: '2021-01-01'
},
{
title: 'Long Event',
start: '2021-01-07',
end: '2021-01-10'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2021-01-09T16:00:00'
},
{
groupId: '999',
title: 'Repeating Event',
start: '2021-01-16T16:00:00'
},
{
title: 'Conference',
start: '2021-01-11',
end: '2021-01-13'
},
{
title: 'Meeting',
start: '2021-01-12T10:30:00',
end: '2021-01-12T12:30:00'
},
{
title: 'Lunch',
start: '2021-01-12T12:00:00'
},
{
title: 'Meeting',
start: '2021-01-12T14:30:00'
},
{
title: 'Birthday Party',
start: '2021-01-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2021-01-28'
}
]
});
calendar.render();
});