Yii2fullcalendar eventDrop removes event.color and event.description [solved]

Yii 2.0 General Discussions
1

Hi it’s me again. Im having problem with fullcalendar eventDrop. I’ve made a JsExpression for eventDrop and eventRender as seen below.

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

The problem is, when I drag and drop an event to a different day and refresh the page, it loses it’s color and description goes to undefined.

Here’s the widget

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

Does anyone have experienced something like this?
Thanks in advance.

2

Hi Juan Carlos Reyes Suazo,

Of course as per above code it will not work for you!

Where you are defining the event sources?

How you manage the color for each event?

I am using this calendar and had referred this link may help you more!

Event Source Object - Full Calendar

Thanks & Regards,
Johnson SAR

3

Thank you for your answer my friend but I’ve managed it to solve this in other ways. I solved this by changing actionUpdate to it’s default, and adding 2 new actions called actionUpdateDrop and actionUpdateResize, one for each of the JsExpressions, JsEventDrop and JsEventResize respectively. I also changed JsExpressions to call these actions without passing tittle, description, and color because these parameters are not needed in the update. And magically events now keeps it’s descriptions and colors when I refresh the page. Check at the code below

//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>

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