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

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

{% 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 }}');

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

		   header: {
			   left: 'prev,next today',
			   center: 'title',
			   right: 'dayGridMonth,timeGridWeek,timeGridDay'
		   },
		   views: {
			   dayGridMonth: { buttonText: 'month' },
			   timeGridWeek: { buttonText: 'week' },
			   timeGridDay: { buttonText: 'day' }
		   },
		   defaultView: 'dayGridMonth',

	   })).render();
	});
</script>
{% endcapture_global %}