如何在 yii2 中使用 select 即时保存 fullcalendar

Question

我正在尝试使用 fullcalendar (https://github.com/philippfrenzel/yii2fullcalendar) 来立即保存选择数据来自之前下拉列表的事件。

所以，我需要从下拉列表中获取数据，以在点击时保存数据并显示所有保存的数据。

为此，我首先尝试“通常”在 dayclick 上保存一个事件，并提示输入事件的标题。

但它不起作用：提示来了（也有警报），但我的日历上没有保存任何内容。

我已经在文档 (fullcalendar.io/docs/mouse/dayClick/) 和演示 (github.com/philippfrenzel/yii2fullcalendar-demo/blob/master/views/site/index.php) 上进行了搜索我找不到有用的东西。

我觉得我不明白一些东西，但我不知道什么......

这是我的观点（index.php）：

<?php
    use yii\helpers\Html;
    use yii\helpers\Url;
    use yii\helpers\ArrayHelper;
    use yii\helpers\Json;
    use app\models\FeuilleDeJourResponsable;
    use yii\web\JsExpression;
?>
<div class="site-index">
    <?php
    $JSDayClick = <<<EOF
    function(start,end) {
        var title = prompt('Event Title:');
        var eventData;
        if (title) {
            eventData = {
                title: title,
                start: start,
                end: end
            };
            $('#w0').fullCalendar('renderEvent', eventData, true);
        }
        $('#w0').fullCalendar('unselect');
    }
EOF;
?>
    <?= yii2fullcalendar\yii2fullcalendar::widget([
        'id' => 'calendar',
        'clientOptions' => [
           // 'language' => 'fa',
            //'eventLimit' => TRUE,
            'selectable' => true,
            'selectHelper' => true,
            'droppable' => true,
            'editable' => true,
//          'theme'=>true,
            'fixedWeekCount' => false,
            'defaultDate' => date('Y-m-d'),
            'dayClick'=>new \yii\web\JsExpression($JSDayClick)
        ],
        'ajaxEvents' => Url::to(['/site/jsoncalendar']),              
    ]);
?>
    <?= Html::encode($JSDayClick); ?>  
</div> 

对于我的控制器（SiteController.php），我尝试了所有我能找到的（www.yiiframework.com/extension/yii2fullcalendar/）和这个（github.com/philippfrenzel/yii2fullcalendar-demo/blob/master/controllers /SiteController.php)

有人可以帮助我吗？

谢谢你， 莎拉

编辑：

我找到了适合我第一步的东西：

$JSDayClick = <<<EOF
    function(date) {
        var title = prompt('Event Title:');
        var eventData;
        alert(date.format());
        if (title) {
            eventData = {
                title: title,
                start: date.format(),
            };
            $('#calendar').fullCalendar('renderEvent', eventData, true);
            alert(eventData.title);
            alert(eventData.start);
        }
        $('#calendar').fullCalendar('unselect');
    }
EOF;

我只是将 "$('#calendar').fullCalendar" 更改为 id "'id' => 'calendar',"。

但对于下一步，我需要了解如何将事件保存在我创建的其他模型上 (feuille de jour)。

我一直在寻找，但我没有任何想法......

再次感谢您， 莎拉

Answer 1

它没有经过测试。

$JSDayClick = <<<EOF
      //dayClick: function (date, allDay, jsEvent, view) {
      function (date, allDay, jsEvent, view) { 
        var titleNew = prompt('Event Title:'); var thedate1 = formatDate(date);

            $.ajax({
                url: Url::to(['/site/day-click-calendar-event']),
                dataType: 'json',
                data: { 
                      title: titleNew,
                      start: thedate1,
                      end: thedate1
                },
                success: function (data, response, event, date) {
                    //alert("success here");
                    $('#calendar').fullCalendar('renderEvent',
                    {
                        title: titleNew,
                        start: thedate1,
                        end: thedate1
                    }, true);
                },
                error: function () {
                    alert("Oops! Something didn't work");
                }
            });
        },

在站点控制器中：

public actionDayClickCalendarEvent()
{
 //save date
}