<?php
            $JsEventRender = 'function(event, element) {
                element.addClass(event.description);
                element.addClass(event.color);
            }'
        ?>

<?php
            $JsEventDrop = 'function(event, delta, revertFunc) {
                    var event_data = {
                        id: event.id,
                        titulo: event.title,
                        descripcion: event.description,
                        fecha_inicio: $.fullCalendar.formatDate(event.start, "YYYY-MM-DD"),
                        hora_inicio: $.fullCalendar.formatDate(event.start, "HH:mm"),
                        hora_termino: $.fullCalendar.formatDate(event.end, "HH:mm"),
                        fecha_termino: $.fullCalendar.formatDate(event.end, "YYYY-MM-DD"),
                        color: event.color,
                    };
                    if (!confirm("¿Está seguro que desea modificar la fecha y/o hora?")) {
                        revertFunc();
                    }
                    else {
                        $.ajax({
                            type: "POST",
                            url: "index.php?r=calendario/update" + "&id=" + event_data.id
                            + "&titulo=" + event_data.titulo + "&descripcion=" + event_data.description
                            + "&fecha_inicio=" + event_data.fecha_inicio + "&hora_inicio=" + event_data.hora_inicio
                            + "&hora_termino=" + event_data.hora_termino + "&fecha_termino=" + event_data.fecha_termino
                            + "&color=" + event_data.color,
                            success: function(json) {
                                alert("Fecha y/o hora modificada correctamente");
                            }
                        });

                    }
                }'
        ?>

<?= yii2fullcalendaryii2fullcalendar::widget([
            'events' => $events,
            'id' => 'calendar',
            'options' => [
                      'lang' => 'es',
                    ],
            'clientOptions' => [
                    'selectable' => false,
                    'editable' => true,
                    'droppable' => true,
                    'header' => [
                        'left' => 'prev,next,today',
                        'center' => 'title',
                        'right' => 'month,agendaWeek,agendaDay,listDay',
                        ],
                'minTime' => '08:00',
                'maxTime' => '21:00',
                'height' => 'auto',
                'snapDuration' => '00:05:00',
                'eventRender' => new JsExpression($JsEventRender),
                'eventClick' => new JsExpression($JsEventClick),
                'eventDrop' => new JsExpression($JsEventDrop),
                'eventResize' => new JsExpression($JsEventResize),
                    ],
            ]);
        ?>