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

{% block titulo_body %}
        <i class="material-icons medium left identidad-color-text">today</i>
        <h4 style="margin-top: 12px;">Calendario de Entrevistas</h4>
        <br>
{% endblock %}

{% block js_document_ready %}
        var eventosCalendar = {{ eventos|raw }}
        var calendarEl = document.getElementById('calendario');
        var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                events: eventosCalendar,
                headerToolbar: {
                left: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
                center: 'title',
                right: 'prev,next today'
                },
                eventContent: function(arg) {
                        var title = arg.event.title;
                        if (arg.view.type == "dayGridMonth" || arg.view.type == "timeGridWeek")
                        {
                                var maxLength = Math.round(calendario.offsetWidth/7);
                                if (arg.view.type == "dayGridMonth")
                                maxLength = Math.round(maxLength/10);
                                else
                                maxLength = Math.round(maxLength/3);
                                
                                if (title.length > maxLength) {
                                        title = title.slice(0, maxLength) + '...';
                                }
                        }

                        if (arg.view.type != "listWeek")
                        {
                                var dotElement = document.createElement('div');
                                dotElement.classList.add('fc-daygrid-event-dot');

                                var timeElement = document.createElement('div');
                                timeElement.classList.add('fc-event-time');
                                timeElement.style.fontSize = '12px';
                                timeElement.textContent = arg.timeText;
                        }

                        var titleElement = document.createElement('div');
                        titleElement.classList.add('fc-event-title');
                        titleElement.style.fontSize = '12px';
                        titleElement.textContent = title;

                        if (arg.view.type != "listWeek")
                        {
                                return { domNodes: [dotElement, timeElement, titleElement] };
                        }
                        else
                        {
                                return { domNodes: [titleElement] };
                        }
                },
                eventDidMount: function(info) {
                        var titleText = info.event.title;
                        info.el.classList.add('tooltipped');
                        info.el.setAttribute('data-tooltip', titleText);
                        $('.tooltipped').tooltip();
                },
                windowResize: function(arg) {
                       this.destroy();
                       this.render();
                }
        }); 
        calendar.setOption('height', 700);
        calendar.setOption('locale', 'es');
        calendar.render();

{% endblock %}



{% block body %}
        <div class="row">
            <div id="calendario"></div>
        </div>
{% endblock %}