Protocolo/templates/calendario/calendario.html.twig

{% extends 'standard_layout.html.twig' %}


		{% block stylesheets %}
			{{ parent() }}
			<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.1.0/main.min.css">
			<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.1.0/main.min.css">
			<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.1.0/main.min.css">
		   
        {% endblock %}

        {% block javascripts %}
		{{ parent() }}
		<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.1.0/main.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.1.0/main.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.1.0/main.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.1.0/main.min.js"></script>
		<script>
		document.addEventListener('DOMContentLoaded', () => {
			var calendarEl = document.getElementById('calendar-holder');

			var calendar = new FullCalendar.Calendar(calendarEl, {
				defaultView: 'dayGridMonth',
				editable: true,
				eventSources: [
					{
						url: "/fc-load-events",
						method: "POST",
						extraParams: {
							filters: JSON.stringify({})
						},
						failure: () => {
							// alert("There was an error while fetching FullCalendar!");
						},
					},
				],
				header: {
					left: 'prev,next today',
					center: 'title',
					right: 'dayGridMonth,timeGridWeek,timeGridDay',
				},
				plugins: [ 'interaction', 'dayGrid', 'timeGrid' ], // https://fullcalendar.io/docs/plugin-index
				timeZone: 'UTC',
			});
			calendar.render();
		});
		</script>
		 {% endblock %}
		 
		 {% block sonata_page_content %}
		    <div id="calendar-holder"></div>
		  {% endblock %}