yii2 - yii2fullcalendar eventDrop 移除 event.color 和 event.description
问题描述
我对 yii2fullcalendar eventDrop 有问题。我为 eventDrop 和 eventRender 制作了一个 JsExpression,如下所示。
问题是,当我将事件拖放到另一天并刷新页面时,它会失去颜色,并且描述变为未定义。
使用 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 框架的论坛上发布了同样的问题 https://forum.yiiframework.com/t/fullcalendar-eventdrop-removes-event-color-and-event-description/125790
解决方案
去做
根据讨论,您需要使用eventSources
动态加载事件,然后在事件更新后重新获取事件。
如何
主要部分可以从我之前写的先前答案中涵盖,该答案详细描述了如何使用该eventSources
选项,因此我不会详细介绍这些细节。唯一与该答案不同的是,当您在日历上拖放事件时,您必须重新获取事件,并且您已经在使用eventDrop
获取事件属性并向其发送 ajax 调用的选项更新数据库中的事件属性,所以您只需要添加
- 在您的控制器中创建一个操作,该操作以我提到的上一个答案中描述的格式返回事件列表。
- 在选项中列出该操作的 url,该
eventSources
选项采用 ['/controller/action'] 之类的 url 数组。 通过调用如下方法更新事件后重新获取事件
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"); }'
推荐阅读
- jsp - 使用 JSTL 设置 html 属性值
- android - PowerMockito Spy: Calling real method results with CannotStubVoidMethodWithReturnValue
- python - Selenium - 如何从 iframe 中发送 jQuery?
- ios - 使用 ARkit 生成多个对象
- python - 如何通过 Selenium (Python) 从博客文章中抓取信息
- angular - Http post调用并等待foreach内部的响应并使用observables / angular触发下一个调用
- python - 字典到多索引熊猫数据框
- reactjs - 无法使用 Material UI 在 React 中获取表单字段数据
- corda - 错误:关系“node_checkpoints”不存在
- c# - 将数据从 SQL 绑定到具有对另一个类的引用的对象