How to use dayclick for instant save

[tsatsar]

Hello,

I'm trying to use fullcalendar to save instantly on dayclick an event whose data come from dropdown list before.

So, I need to take data from dropdown list, to save data on click and to display all data saved.

For this, I'm trying first to save an event on dayclick "normally" with a prompt for the title of the event.

But it doesn't work : the prompt come (alert too) but nothing is saved on my calendar.

I have already searched on the doc (https://fullcalendar.io/docs/mouse/dayClick/) and on th demo (https://github.com/philippfrenzel/yii2fullcalendar-demo/blob/master/views/site/index.php) dut I don't find something that works.

I thing I don't understand something but I don't know what...

That's my view (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> 

And for my controller (SiteController.php) I try all I can find like this (http://www.yiiframework.com/extension/yii2fullcalendar/) and this (https://github.com/philippfrenzel/yii2fullcalendar-demo/blob/master/controllers/SiteController.php)

Someone can help me ?

Thank you, Sarah

[tsatsar]

I find something that works :

$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;

I just change "$('#calendar').fullCalendar" with the id "'id' => 'calendar',".

But I still don't understand how it work : -Where are saved the event? -Can I save the event on a model I create? -Why does ajax not necessary ?

[philippfrenzel]

I'll check this evening - about 5 hours from now and see what I can find out ;)

[tsatsar]

Thank you ! I'm waiting for your answer =)

[tsatsar]

I'm trying to save my event to a model I have created with Ajax.

I have this :

$JSCode = <<<EOF
    function(start,end) {
        var title = $("select[id=codePers] option:selected");
        var codePersonnel = $("select[id=codePers] option:selected").val();
        var posteId = $("select[id=postId] option:selected").val();
        var categorieID = $("select[id=catId] option:selected").val();

        var eventData;

        $.ajax({
            url : '/site/Ajax',
            dataType: 'POST',
            data: {
                codePersonnel : codePersonnel,
                                dateCalendaire : start.format(),
                posteId : posteID,
                categorieID : categorieID
            },
            success: function (data, response, event, date) {
                alert("success here");
                eventData = {
                    title: title,
                    start: start.format(),
                    end: start.format(),
                };
                $('#calendar').fullCalendar('renderEvent', eventData, true);
            },
            error: function () {
                alert("Oops! Something didn't work");
            }
        }); 
}
EOF;

And action on my controller, for try :

public function actionAjax(){
     if(isset(Yii::$app->request->post('codePersonnel'))){
        $codePersonnel = "Ajax Worked!";
        echo $codePersonnel;
    }else{
        $codePersonnel = "Ajax failed";
        echo $codePersonnel;
    }
    // return Json    
    return \yii\helpers\Json::encode($codePersonnel);   
  }

But it doesn't work, it go to error: function () { alert("Oops! Something didn't work"); }

I'll update if I found something.

[tsatsar]

I'm there :

My view :

`

field($feuille_de_jour_responsable, 'ID_Categorie')->dropDownList(CategorieFdj::find()->select(['Nom', 'ID_Categorie'])->indexBy('ID_Categorie')->column(), ['id'=>'catId']); ?>

    <div class="col-md-4">
        <?= $form->field($feuille_de_jour_responsable, 'ID_Poste_FDJ')->dropDownList(PosteFdj::find()->select(['Nom_Poste_FDJ', 'ID_Poste_FDJ'])->indexBy('ID_Poste_FDJ')->column(), ['id'=>'postId']); ?>
    </div>
    <div class="col-md-4">
        <?= $form->field($feuille_de_jour_responsable, 'Code_Personnel')->dropDownList(Personnel::find()->select(['Nom_Personnel', 'Code_Personnel'])->indexBy('Code_Personnel')->column(), ['id'=>'codePers']); ?>
    </div>
</div>

<?php ActiveForm::end();?>

<?= yii2fullcalendar\yii2fullcalendar::widget([
    'id' => 'calendar',
    'clientOptions' => [
        'height' => 650,
        //'language' => 'fa',
        //'eventLimit' => TRUE,
        'selectable' => true,
        'selectHelper' => true,
        'droppable' => true,
        'editable' => true,
        //'theme'=>true,
        'fixedWeekCount' => false,
        'defaultDate' => date('Y-m-d'),
        'eventClick' => new JsExpression($JSEventClick),
        'select'=>new JsExpression($JSCode)
    ],

    //'ajaxEvents' => Url::to(['/site/jsoncalendar']),              

]);

?>

<?= Html::encode($JSCode); ?> 

<?= Html::encode($JSEventClick); ?>     `

My controller :

`if (Yii::$app->request->isAjax) { $feuille_de_jour_responsable = new FeuilleDeJourResponsable();

        if ($feuille_de_jour_responsable->load(Yii::$app->request->post()) && $feuille_de_jour_responsable->save()) {
            return $this->redirect(['view', 'Date_Calendaire' => $feuille_de_jour_responsable->Date_Calendaire, 'ID_Poste_FDJ' => $feuille_de_jour_responsable->ID_Poste_FDJ, 'ID_Categorie' => $feuille_de_jour_responsable->ID_Categorie, 'Code_Personnel' => $feuille_de_jour_responsable->Code_Personnel]);
        } else {
            return $this->render('create', [
                'feuille_de_jour_responsable' => $feuille_de_jour_responsable,
            ]);
        }
        }
    }`

It's like the basic function create.

When I click on a day, I have the "exception alert" from my Ajax function and next, nothing. I don't understand why because the URL I can see with firebug is the same that a "normal" URL with a form... Picture : http://www.hostingpics.net/viewer.php?id=419210838.png

[philippfrenzel]

? Help still needed?

[tsatsar]

Unfortunately, yes... Now I'm on exams and I'll take it back from February for my student work.