tabler/pages/_includes/ui/fullcalendar.html

{% assign calendar-id = include.calendar-id | default: 'main' %}

<div id="calendar-{{ calendar-id }}" class="card-calendar"></div>

{% append_lib fullcalendar %}

{% capture_global scripts %}
<script>
	document.addEventListener('DOMContentLoaded', function () {
      {% if jekyll.environment == 'development' %}window.tabler_calendar = window.tabler_calendar || {};{% endif %}
      var calendarEl = document.getElementById('calendar-{{ calendar-id }}'),
         today = new Date(),
         y = today.getFullYear(),
         m = today.getMonth(),
         d = today.getDate();

      window.FullCalendar && ({% if jekyll.environment == 'development' %}window.tabler_calendar["calendar-{{ calendar-id }}"] = {% endif %}new FullCalendar.Calendar(calendarEl, {
		   plugins: [ 'interaction', 'dayGrid' ],
         themeSystem: 'standard',

		   header: {
			   left: 'title',
			   center: '',
			   right: 'prev,next'
		   },

		   selectable: true,
		   selectHelper: true,
		   nowIndicator: true,
		   views: {
			   dayGridMonth: { buttonText: 'month' },
			   timeGridWeek: { buttonText: 'week' },
			   timeGridDay: { buttonText: 'day' }
		   },
		   defaultView: 'dayGridMonth',
		   timeFormat: 'H(:mm)',

		   events: [
		   	{
               title: 'All Day Event',
               start: new Date(y, m, 1),
				   className: 'bg-blue-lt'
            },
            {
               id: 999,
               title: 'Repeating Event',
               start: new Date(y, m, 7, 6, 0),
               allDay: false,
               className: 'bg-blue-lt'
            },
            {
               id: 999,
               title: 'Repeating Event',
               start: new Date(y, m, 14, 6, 0),
               allDay: false,
               className: 'bg-lime-lt'
            },
            {
               title: 'Meeting',
               start: new Date(y, m, 4, 10, 30),
               allDay: false,
               className: 'bg-green-lt'
            },
            {
               title: 'Lunch',
               start: new Date(y, m, 5, 12, 0),
               end: new Date(y, m, 5, 14, 0),
               allDay: false,
               className: 'bg-red-lt'
            },
            {
               title: 'LBD Launch',
               start: new Date(y, m, 19, 12, 0),
               allDay: true,
               className: 'bg-azure-lt'
            },
            {
               title: 'Birthday Party',
               start: new Date(y, m, 16, 19, 0),
               end: new Date(y, m, 16, 22, 30),
               allDay: false,
			      className: 'bg-orange-lt'
            }
         ]
	   })).render();
	});
</script>
{% endcapture_global %}