text: {% assign calendar-id = include.calendar-id | default: 'main' %}
  
  <div id="calendar-{{ calendar-id }}" class="card-calendar"></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 }}'),
           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 %}
  