yii2fullcalendar eventDrop removes event.color and event.des

我在 yii2fullcalendar eventDrop 方面遇到了问题。我已经为eventDrop和eventRender制作了一个JsExpression，如下所示。

问题是，当我将事件拖放到不同的日期并刷新页面时，它会失去颜色，并且描述变为未定义。

使用事件渲染，我向事件类添加了颜色和描述属性。

我尝试修改 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");
}
});
}
}'
?>
<?= 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),
],
]);
?>
<?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 调用以更新数据库中的事件属性，因此您只需要添加

在控制器中创建一个操作，该操作以我提到的上一个答案中描述的格式返回事件列表。
在eventSources选项中列出该操作的 URL，该选项采用 ['/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");
}'

我通过将 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>

待办

如何

相关内容

最新更新

热门标签：