Event Calendar in Yii

A JavaScript event calendar.

 FullCalendar is great for displaying events.

Installation

Package is although registered at packagist.org - so you can just add one line of code, to let it run!

add the following line to your composer.json require section:

  "philippfrenzel/yii2fullcalendar":"*",

And ensure, that you have the follwing plugin installed global:

php composer.phar global require "fxp/composer-asset-plugin:~1.0"

Viedo for how to use event calendar in Yii2

Part I

Part II

Links


https://github.com/philippfrenzel/yii2fullcalendar
http://www.yiiframework.com/extension/yii2fullcalendar/
http://fullcalendar.io/



Steps in Implement Yii2 event calendar


Step 1
              Create Table event in Your database

Table structure for table `event`
--

CREATE TABLE IF NOT EXISTS `event` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(200) NOT NULL,
  `description` varchar(500) NOT NULL,
  `created_date` date NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=8 ;


Step 2

          Using Gii module create an event CRUD operations.
          Create Model, Controller and View of event table.

Check
http://localhost/yii2.7/backend/web/index.php?r=tools%2Fevent%2Findex



Step 3

Installation

add line to  composer.json require section:

  "philippfrenzel/yii2fullcalendar":"*",

and run command on terminal

sudo composer update

Calendar automatically update after few minutes.


Step 4


Edit EventController.php


     /**
     * Lists all Event models.
     * @return mixed
     */
    public function actionIndex()
    {
        $searchModel = new EventSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

        $events = Event::find()->all();
        
      $tasks=[];  
      foreach ($events AS $eve){
      //Testing
      $event = new \yii2fullcalendar\models\Event();
      $event->id = $eve->id;
      $event->backgroundColor='red';
      $event->title = $eve->title;
      $event->start = $eve->created_date; 
      
      $tasks[] = $event;
    }
        
        return $this->render('index', ['events' => $tasks,
            ]);
        
    }

 /**
     * Creates a new Event model.
     * If creation is successful, the browser will be redirected to the 'view' page.
     * @return mixed
     */
    public function actionCreate($date)
    {
        $model = new Event();
        $model->created_date = $date;
        

        if ($model->load(Yii::$app->request->post()) && $model->save()) {
            //return $this->redirect(['view', 'id' => $model->id]);
            return $this->redirect(['index']);
        } else {
            return $this->renderAjax('create', [
                'model' => $model,
            ]);
        }
    }


Edit view/Index.php 


<?php

use yii\helpers\Html;
use yii\grid\GridView;
use yii\bootstrap\Modal;
use yii\helpers\Url;


/* @var $this yii\web\View */
/* @var $searchModel backend\modules\tools\models\EventSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = 'Events';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="event-index">

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

    <?php   //for popup create window
     modal::begin([
         'header'=>'<h4>Event<h4>',
         'id'=>'modal',
         'size'=>'modal-lg',         
     ]);
     echo "<div id='modalContent'></div>";
     modal::end();   
    ?>

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

edit main.js files in backend/web/js
for popup create window

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
$(function(){
    $(document).on('click','.fc-day',function(){
        var date = $(this).attr('data-date');
        
        $.get('index.php?r=tools/event/create',{'date':date},function(data){
                $('#modal').modal('show')
                .find('#modalContent')
                .html(data);
        });
        
        
    });


$('#modalButton').click(function(){
    //get the click of the create button.
    $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
});
});


add main.js register in backend/assest/AppAssest.php

<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */

namespace backend\assets;

use yii\web\AssetBundle;

/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
        'js/main.js',
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

AJAX Usage

If you wanna use ajax loader, this could look like this:

<?= yii2fullcalendar\yii2fullcalendar::widget([
      'options' => [
        'lang' => 'de',
        //... more options to be defined here!
      ],
      'ajaxEvents' => Url::to(['/timetrack/default/jsoncalendar'])
    ]);
?>

and inside your referenced controller, the action should look like this:

public function actionJsoncalendar($start=NULL,$end=NULL,$_=NULL){

    \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;

    $times = \app\modules\timetrack\models\Timetable::find()->where(array('category'=>\app\modules\timetrack\models\Timetable::CAT_TIMETRACK))->all();

    $events = array();

    foreach ($times AS $time){
      //Testing
      $Event = new \yii2fullcalendar\models\Event();
      $Event->id = $time->id;
      $Event->title = $time->categoryAsString;
      $Event->start = date('Y-m-d\TH:i:s\Z',strtotime($time->date_start.' '.$time->time_start));
      $Event->end = date('Y-m-d\TH:i:s\Z',strtotime($time->date_end.' '.$time->time_end));
      $events[] = $Event;
    }

    return $events;
  }