{% extends "fenixedu-learning-theme/base.html" %}

{% block header %}
	<link href='{{staticDir}}/css/fullcalendar.css' rel='stylesheet' />
	<link href='{{staticDir}}/css/fullcalendar.print.css' rel='stylesheet' media='print' />
	<link href='{{staticDir}}/css/schedule.css' rel='stylesheet' rel='stylesheet' />

	<script src='{{staticDir}}/js/moment.min.js'></script>
	<script src='{{staticDir}}/js/jquery-ui.fullCalendar.custom.min.js'></script>
	<script src='{{staticDir}}/js/fullcalendar.js'></script>
	<script src="{{staticDir}}/js/bootstrap.min.js"></script>

{% endblock header %}

{% block content %}
	<div id='calendar'></div>

	<script type="text/javascript">
		var i18nDayNames = [
			"{{ i18n('resources.FenixEduLearningResources', 'weekday.sunday') }}",
			"{{ i18n('resources.FenixEduLearningResources', 'weekday.monday') }}",
			"{{ i18n('resources.FenixEduLearningResources', 'weekday.tuesday') }}",
			"{{ i18n('resources.FenixEduLearningResources', 'weekday.wednesday') }}",
			"{{ i18n('resources.FenixEduLearningResources', 'weekday.thursday') }}",
			"{{ i18n('resources.FenixEduLearningResources', 'weekday.friday') }}",
			"{{ i18n('resources.FenixEduLearningResources', 'weekday.saturday') }}"
		];

        var i18nDayNamesShort = i18nDayNames.map(function(el){
            return el.substr(0,3);
        });
        
        var i18nMonthNames = [
   			"{{ i18n('resources.FenixEduLearningResources', 'month.january') }}",
   			"{{ i18n('resources.FenixEduLearningResources', 'month.february') }}",
   			"{{ i18n('resources.FenixEduLearningResources', 'month.march') }}",
   			"{{ i18n('resources.FenixEduLearningResources', 'month.april') }}",
   			"{{ i18n('resources.FenixEduLearningResources', 'month.may') }}",
   			"{{ i18n('resources.FenixEduLearningResources', 'month.june') }}",
   			"{{ i18n('resources.FenixEduLearningResources', 'month.july') }}",
   			"{{ i18n('resources.FenixEduLearningResources', 'month.august') }}",
   			"{{ i18n('resources.FenixEduLearningResources', 'month.september') }}",
   			"{{ i18n('resources.FenixEduLearningResources', 'month.october') }}",
   			"{{ i18n('resources.FenixEduLearningResources', 'month.november') }}",
   			"{{ i18n('resources.FenixEduLearningResources', 'month.december') }}"
   		];
        
        var i18nMonthNamesShort = i18nMonthNames.map(function(el){
            return el.substr(0,3);
        });

		var config = {
			firstDay: 1,
			allDaySlot: false,
			weekends: true,
			minTime : '07:00',
			maxTime : '23:59',
			defaultView: '{{defaultView}}',
			timeFormat: 'HH:mm',
			axisFormat: 'HH:mm',
			slotDuration: '00:30:00',
			slotEventOverlap: false,
			dayNames: i18nDayNames,
			dayNamesShort: i18nDayNamesShort,
			monthNames: i18nMonthNames,
			monthNamesShort: i18nMonthNamesShort,
			eventAfterRender: afterEventsRender,
			events: "{{eventsUrl}}",
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,basicDay'
            },
			eventLimit: true,
			editable: false,
			buttonText: {
			    today:    "{{ i18n('resources.FenixEduLearningResources', 'label.calendar.today') }}",
			    month:    "{{ i18n('resources.FenixEduLearningResources', 'label.calendar.month') }}",
			    week:     "{{ i18n('resources.FenixEduLearningResources', 'label.calendar.week') }}",
			    day:      "{{ i18n('resources.FenixEduLearningResources', 'label.calendar.day') }}"
			}
		};

		$(document).ready(function() {
			$('#calendar').fullCalendar(config);
            $.get("{{eventsUrl}}/nearestEvent", function(selectedDate) {
                $('#calendar').fullCalendar('gotoDate', selectedDate );
            });
		});

		function afterEventsRender( event, jsEvent, view ) {
			jsEvent.attr('title', event.description);
			jsEvent.tooltip({ container: 'body', html: false });
		}
	</script>
{% endblock content %}