Fullcalendar on click event and assetbundle for main.js [solved]

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

Hi there. Im configuring on click event in the fullcalendar extension from philipfrenzel.

App does nothing on click.

I can’t find my mistakes. Developer console in chrome doesn’t say anything.

Here’s the AssetBundle

namespace app\assets;

use yii\web\AssetBundle;

class EventAsset extends Assetbundle
{
    public $sourcePath = "@app/assets";
    
    public $js = [
        'js/main.js',
    ];
}

Here is my main.js

$(function(){
    
    $(document).on('click', '.fc-day', function(){
        var date = $(this).attr('data-date');
        
        $.get('index.php?r=event/create', {'fecha_creacion':date}, function(data){
           $('#modal').modal('show')
                   .find('#modalContent')
                   .load(data);
        });
    });
    
    $.get('#modalButton').on('click', function(){
           $('#modal').modal('show')
                   .find('#modalContent')
                   .load($(this).attr('value'));
        });    
});

and here’s part of my view file

use app\assets\AppAsset;

AppAsset::register($this);
...
Modal::begin([
            'header'=>'<h4>Evento</h4>',
            'id'=>'modal',
            'size'=>'modal-lg',
        ]);
        
        echo "<div id='ModalContent'></div>";
        Modal::end();

Any thoughs?

I’ll appreciate your comments.

[jaimez]

Please post your EventController - actionCreate and also a view file which is rendered by this action as a respond to GET request.

Also repair this line in your asset file:
class EventAsset extends Asset B undle

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

Hey @jaimez thanks for your answer.

Here’s the EventController.php - actionCreate

public function actionCreate($date)
    {
        $model = new Event();
        $model->fecha_creacion = $date;
        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            return $this->redirect(['index']);
        }

        return $this->renderAjax('create', [
            'model' => $model,
        ]);
    }

and Here’s the view create.php

<div class="event-create">

    <h1><?= Html::encode($this->title) ?></h1>

    <?= $this->render('_form', [
        'model' => $model,
    ]) ?>

</div>

[jaimez]

I still don’t see a line which renders the fullcalendar widget. Please post whole view file _form.

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

_form.php

<div class="event-form">

    <?php $form = ActiveForm::begin(); ?>

    <?= $form->field($model, 'titulo')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'descripcion')->textInput(['maxlength' => true]) ?>

    <?= $form->field($model, 'fecha_creacion')->textInput() ?>

    <div class="form-group">
        <?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
    </div>

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

</div>

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

I think you mean index.php @jaimez

<div class="event-index">

    
    <h1><?= Html::encode($this->title) ?></h1>

    <?php 
        Modal::begin([
            'header'=>'<h4>Evento</h4>',
            'id'=>'modal',
            'size'=>'modal-lg',
        ]);
        
        echo "<div id='ModalContent'></div>";
        Modal::end();
        
        ?>

    <?= \yii2fullcalendar\yii2fullcalendar::widget(array(
      'events'=> $events,
  )); ?>
</div>

[jaimez]

Well, if I understand this correctly you have EventController which controls the whole proccess. actionIndex shows the view with fullcalendar. For now I do not consider other things (modals, form, etc.)

First thing I see is that in index.php you register asset AppAsset but here should be EventAsset.

Also, where is your main.js file located ?
I see you are using property $sourcePath. It should be used only when your files from asset are stored in a directory which is not web-accessible. More info: https://www.yiiframework.com/doc/guide/2.0/en/structure-assets

You could try this:

1. create directory js in /web
2. move your main.js file to /web/js
3. change asset file to:

namespace app\assets;

use yii\web\AssetBundle;

class EventAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
    ];
    public $js = [
        'js/main.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\web\JqueryAsset',
        'yii\bootstrap\BootstrapAsset',        
    ];
}

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

I created a directory in /web where I put my main.js file. Also I changed my EventAsset.php with the code you provided and registered my EventAsset.php file in index.php, but it still doesn’t do the work. I believe the problem is in my main.js file.

[jaimez]

Previous steps were neccessary to ensure correct loading of main.js file. You should now see this file in generated source code of page among other *.js files. I think that your main.js file has at least one error. This cannot work:

    $.get('#modalButton').on('click', function(){
           $('#modal').modal('show')
                   .find('#modalContent')
                   .load($(this).attr('value'));
        });  

It’s because $.get is function for AJAX GET request and it doesn’t have method .on(). This method should be used on objects from DOM.

I have not enough time for testing your code now and will be offline for a few days. Maybe when I return I could test it properly and find the solution.

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

Thanks man. You’ve put lots of effort. I thank you for that.

I’ll be trying to figure it out.

[mcki0127 (Steve)]

I got this working recently. I haven’t looked closely at your code, but I’ll paste mine here so you can compare:

<?= \yii2fullcalendar\yii2fullcalendar::widget([
                    'header' => [
                        'left' => 'prev,next today',
                        'center' => 'title',
                        'right' => 'picker month,agendaWeek,agendaDay',
                    ],
                    'clientOptions' => [
                        'theme' => true,
                        'themeSystem' => 'jquery-ui',
                        'selectable' => true,
                        'eventLimit' => true,
                        'select' => new JSExpression("function(date, allDay, jsEvent, view) {
                            if (view.name == 'day') return;
                                view.calendar.gotoDate(date);
                                view.calendar.changeView('agendaDay');
                        }"),
                        'eventClick' => new JsExpression("function(event, jsEvent, view) {
                            $.get('/network/view-event', {id: " . $network->id . ", eid: event.id, resourceId: event.resourceId}, function(data) {
                                var viewModal = $('#view-event-modal');
                                viewModal.modal('show').find('#view-event-content').html(data);
                                viewModal.find('.view-event-modal-header').css('background-color', event.color);
                            });
                        }"),
                        'eventSources' => [
                            $eventList,
                            $icalList,
                        ],
                    ],
                ]); ?>

[mcki0127 (Steve)]

In case this might help anyone, I have an edit button in the view event modal that closes the view modal and opens an edit modal, so event click looks like this:

'eventClick' => new JsExpression("function(event, jsEvent, view) {
    $.get('/network/view-event', {id: " . $network->id . ", eid: event.id, resourceId: event.resourceId}, function(data) {
        var viewModal = $('#view-event-modal');
        viewModal.modal('show').find('#view-event-content').html(data);
        viewModal.find('.view-event-modal-header').css('background-color', event.color);
                                
        $('#edit-event-btn').click(function(e) {
            $('#view-event-modal').modal('hide');
                               
            setTimeout(function() {
                $.get('/network/edit-event', {id:" . $network->id . ", eid:event.id}, function(data) {
                    $('#edit-event-modal').modal('show').find('#edit-event-content').html(data);
                });
            }, 500);
                                 
        });
    });
}"),

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

I have some news. Now the modal appears. I mean, After some tests it pops up. I don’t know how but I tried in Google Chrome’s private mode and it appeared and now it pops up in normal mode. It seems to be a bug.

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

Sorry for double posting but I found an error in index.php

<?php 
        Modal::begin([
            'header'=>'<h4>Evento</h4>',
            'id'=>'modal',
            'size'=>'modal-lg',
        ]);
        
        echo "<div id='ModalContent'></div>";
        Modal::end();
        
        ?>

it’s modalContent with ‘m’ in lower case

echo "<div id='modalContent'></div>";

Now it shows the create.php in modal view but it doesn’t save at all.

And for those who are trying to do the same, I’ve been following this tutorial

https://www.youtube.com/watch?v=_jNrPCgwi-8 part 1
https://www.youtube.com/watch?v=ghkbIGsLJRY&t=170s part 2

[jc.reyes.suazo (Juan Carlos Reyes Suazo)]

I’ve created the crud again with gii and now it works! I can create events by clicking the day.

So I solved this. Thanks everyone.