yii2fullcalendar eventDrop удаляет event.color и event.description - PullRequest
Новая
       5

yii2fullcalendar eventDrop удаляет event.color и event.description

0 голосов
/ 19 апреля 2019

У меня проблема с yii2fullcalendar eventDrop. Я сделал JsExpression для eventDrop и eventRender, как показано ниже.

Проблема в том, что когда я перетаскиваю событие в другой день и обновляю страницу, оно теряет свой цвет, а описание становится неопределенным.

С помощью eventRender я добавляю свойства цвета и описания в класс событий.

Я попытался изменить fullcalendar.css и fullcalendar.min.css .fc-event безуспешно

Вот код 

<?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");
                            }
                        });

                    }
                }'
        ?>

<?= yii2fullcalendar\yii2fullcalendar::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),
                    ],
            ]);
        ?>

<?php
public function actionCreate($fecha_inicio, $fecha_termino)
    {   
        $model = new Calendario();
        $model->fecha_inicio = $fecha_inicio;
        $model->fecha_termino = $fecha_termino;
        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['index']);
        }

        return $this->renderAjax('create', [
            'model' => $model,
        ]);
    }

public function actionUpdate($id, $titulo, $descripcion, $fecha_inicio, $hora_inicio, $hora_termino, $fecha_termino, $color)
    {
        $model = $this->findModel($id);
        $model->id = $id;
        $model->titulo = $titulo;
        $model->descripcion = $descripcion;
        $model->fecha_inicio = $fecha_inicio;
        $model->hora_inicio = $hora_inicio;
        $model->hora_termino = $hora_termino;
        $model->fecha_termino = $fecha_termino;
        $model->color = $color;
        $model->save();

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['index']);
        }

        return $this->renderAjax('update', [
            'model' => $model,
        ]);
    }

Сначала я подумал, что это проблема с URL, но это не так. Я опубликовал ту же проблему в форуме Yii Framework https://forum.yiiframework.com/t/fullcalendar-eventdrop-removes-event-color-and-event-description/125790

Ответы [ 2 ]

0 голосов
/ 10 мая 2019

Я решил эту проблему, изменив actionUpdate на его значение по умолчанию и добавив 2 новых действия с именами actionUpdateDrop и actionUpdateResize, по одному для каждого из JsExpressions, JsEventDrop и JsEventResize соответственно. Я обнаружил, что eventRender вообще не работает, поэтому удалил его. Я также изменил JsExpressions, чтобы вызывать эти действия без передачи названия, описания и цвета, потому что эти параметры не нужны в обновлении. И теперь волшебным образом события сохраняют свое описание и цвет. 

//CalendarioController.php

public function actionUpdate($id)
    {
        $model = $this->findModel($id);

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['index']);
        }

        return $this->renderAjax('update', [
            'model' => $model,
        ]);
    }

    public function actionUpdateDrop($id, $fecha_inicio, $hora_inicio, $hora_termino, $fecha_termino)
    {
        $model = $this->findModel($id);
        $model->fecha_inicio = $fecha_inicio;
        $model->hora_inicio = $hora_inicio;
        $model->hora_termino = $hora_termino;
        $model->fecha_termino = $fecha_termino;
        $model->save();

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['index']);
        }

        return $this->render('update', [
            'model' => $model,
        ]);
    }

    public function actionUpdateResize($id, $hora_inicio, $hora_termino)
    {
        $model = $this->findModel($id);
        $model->hora_inicio = $hora_inicio;
        $model->hora_termino = $hora_termino;
        $model->save();

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['index']);
        }

        return $this->render('update', [
            'model' => $model,
        ]);
    }

//Index.php

<p>
        <?php
            $JsEventDrop = 'function(event, delta, revertFunc) {
                    var event_data = {
                        id: event.id,
                        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"),
                    };
                    if (!confirm("¿Está seguro que desea modificar la fecha y/o hora?")) {
                        revertFunc();
                    }
                    else {
                        $.ajax({
                            type: "POST",
                            url: "index.php?r=calendario/update-drop" + "&id=" + event_data.id 
                            + "&fecha_inicio=" + event_data.fecha_inicio + "&hora_inicio=" + event_data.hora_inicio 
                            + "&hora_termino=" + event_data.hora_termino + "&fecha_termino=" + event_data.fecha_termino,
                            success: function(json) {
                                alert("Fecha y/o hora modificada correctamente");
                            }
                        });

                    }
                }'
        ?>
    </p>

    <p>
        <?php
            $JsEventResize = 'function(event, delta, revertFunc) {
                    var event_data = {
                        id: event.id,
                        hora_inicio: $.fullCalendar.formatDate(event.start, "HH:mm"),
                        hora_termino: $.fullCalendar.formatDate(event.end, "HH:mm"),
                    };
                    if (!confirm("¿Está seguro que desea modificar la hora?")) {
                        revertFunc();
                    }
                    else {
                        $.ajax({
                            type: "POST",
                            url: "index.php?r=calendario/update-resize" + "&id=" + event_data.id 
                            + "&hora_inicio=" + event_data.hora_inicio + "&hora_termino=" + event_data.hora_termino,
                            success: function(json) {
                                alert("Hora modificada correctamente");
                            }
                        });
                    }
               }'
         ?>
   </p>
0 голосов
/ 23 апреля 2019

Задачи

В соответствии с обсуждением вам необходимо использовать eventSources для динамической загрузки событий, а затем повторно извлекать события после их обновления.

Как сделать

Основная часть может быть рассмотрена из предыдущего ответа , который я написал ранее, в котором подробно описывается, как использовать опцию eventSources, поэтому я не буду вдаваться в эти подробности.единственное, что отличается от этого ответа, - это то, что вам нужно повторно выбирать события, когда вы перетаскиваете событие в календарь, и для этого вы уже используете опцию eventDrop, где вы получаете свойства события и отправляетеВызов ajax для обновления свойств событий в базе данных, поэтому все, что вам нужно, это добавить

  • Создать действие в вашем контроллере, которое возвращает список событий в формате, описанном в предыдущем ответе, который я упомянул.
  • Перечислите URL этого действия в параметре eventSources, который принимает массив URL, например ['/controller/action'].

  • Повторное получение событий после обновления событиявызывая метод refetchEvents, как показано ниже. 

    $('#calendar').fullCalendar('refetchEvents');

    , и это должна быть последняя строка скрипта, которая у вас есть для eventDrop, поэтому ваш полный код для JavaScript будет выглядеть как 

     $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");
                        }
                    });

                }

            //this line will refetch the events on the calendar with the newly saved values
            $("#calendar").fullCalendar("refetchEvents");
            }'
...