tabler.tabler/shared/includes/ui/fullcalendar.html

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

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

{% capture script %}
<script>
	document.addEventListener('DOMContentLoaded', function () {
		var calendarEl = document.getElementById('calendar-{{ id }}');
		var currentYear = new Date().getFullYear();
		var currentMonth = new Date().getMonth();

		var calendar = new FullCalendar.Calendar(calendarEl, {
			initialView: 'dayGridMonth',
			
			{% if include.sample-events %}
			events: [
				{
					title: "Offsite Retreat",
					start: new Date(currentYear, currentMonth, 2, 9, 0),
					end: new Date(currentYear, currentMonth, 4, 17, 0),
					color: 'var(--tblr-red)',
					backgroundColor: 'var(--tblr-red-lt)',
					borderColor: 'var(--tblr-red-200)',
				}, 
				{
					title: "Monthly Planning",
					start: new Date(currentYear, currentMonth, 1, 10, 0),
					end: new Date(currentYear, currentMonth, 1, 11, 30),
				},
				{
					title: "Marketing Strategy Call",
					start: new Date(currentYear, currentMonth, 4, 14, 0),
					end: new Date(currentYear, currentMonth, 4, 15, 0)
				},
				{
					title: "Design Sprint",
					start: new Date(currentYear, currentMonth, 7, 9, 0),
					end: new Date(currentYear, currentMonth, 7, 12, 0)
				},
				{
					title: "Dev Team Check-in",
					start: new Date(currentYear, currentMonth, 10, 11, 0),
					end: new Date(currentYear, currentMonth, 10, 11, 30)
				},
				{
					title: "Customer Feedback Review",
					start: new Date(currentYear, currentMonth, 13, 13, 0),
					end: new Date(currentYear, currentMonth, 13, 14, 0)
				},
				{
					title: "Mid-Month Review",
					start: new Date(currentYear, currentMonth, 15, 10, 30),
					end: new Date(currentYear, currentMonth, 15, 11, 30)
				},
				{
					title: "Webinar: Product Update",
					start: new Date(currentYear, currentMonth, 18, 16, 0),
					end: new Date(currentYear, currentMonth, 18, 17, 0)
				},
				{
					title: "Sales Training",
					start: new Date(currentYear, currentMonth, 21, 9, 30),
					end: new Date(currentYear, currentMonth, 21, 11, 0)
				},
				{
					title: "Company All-Hands",
					start: new Date(currentYear, currentMonth, 25, 15, 0),
					end: new Date(currentYear, currentMonth, 25, 16, 0)
				},
				{
					title: "End-of-Month Wrap-up",
					start: new Date(currentYear, currentMonth, 31, 10, 0),
					end: new Date(currentYear, currentMonth, 31, 11, 0)
				}
			],
			{% endif %}
		});
		calendar.render();
	});
</script>
{% endcapture %}

{% capture_script %}
{{ script }}
{% endcapture_script %}
{% endremoveemptylines %}