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