yii2 calendar Archives - indocoder.com

Tutorial ini adalah lanjutan dari Bagian 33 sebelumnya. Kita akan menambahkan kode javascript sehingga saat kita mengklik tanggal, akan bisa langsung menambahkan event di tanggal tersebut. Oh ya, kalau mau lihat dokumentasi fullcalendar ada di http://fullcalendar.io/docs. 1. Modifikasi index.php dengan menambahkan pop-up.

<?php

use yii\helpers\Html;
use yii\grid\GridView;
use yii\bootstrap\Modal;
/* @var $this yii\web\View */
/* @var $searchModel common\models\EventSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Events');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="event-index">

    <?php
        Modal::begin([
            'header' => '<h4>Event</h4>',
            'id' => 'modal',
            'size' => 'modal-lg',
        ]);

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

        Modal::end(); 
    ?>


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

<?php

use yii\helpers\Html;

use yii\grid\GridView;

use yii\bootstrap\Modal;

/* @var $this yii\web\View */

/* @var $searchModel common\models\EventSearch */

/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Events');

$this->params['breadcrumbs'][] = $this->title;

<?php

Modal::begin([

'header' => '<h4>Event</h4>',

'id' => 'modal',

'size' => 'modal-lg',

]);

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

Modal::end();

<?= \yii2fullcalendar\yii2fullcalendar::widget(array(

'events'=> $events,

));?>

</div>

2. Buat main.js di frontend/web/js dan tambahkan dulu di AppAsset.

$(function(){

	$(document).on('click','.fc-day',function(){
		var date = $(this).attr('data-date');

		$.get('index.php?r=event/create',{'date':date},function(data){
			$('#modal').modal('show')
				.find('#modalContent')
				.html(data);
		});
	});

});

$(function(){

$(document).on('click','.fc-day',function(){

var date = $(this).attr('data-date');

$.get('index.php?r=event/create',{'date':date},function(data){

$('#modal').modal('show')

.find('#modalContent')

.html(data);

});

Aplikasi ini menggunakan Event Calendar. 1. Buat tabel event 2. Buat CRUD untuk tabel event 3. Install philippfrenzel yii-calendar melalui composer: https://github.com/philippfrenzel/yii2fullcalendar 4. Modifikasi frontend/controllers/EventController.php pada actionIndex

public function actionIndex()
    {
        $events = \common\models\Event::find()->all();

        $tasks = [];

        foreach ($events as $eve) {
            $event = new \yii2fullcalendar\models\Event();
            $event->id = $eve->id;
            $event->title = $eve->title;
            $event->start =  $eve->created_date;
            $tasks[] = $event;
        }

        return $this->render('index', [
            'events' => $tasks,
        ]);
    }

public function actionIndex()

{

$events = \common\models\Event::find()->all();

$tasks = [];

foreach ($events as $eve) {

$event = new \yii2fullcalendar\models\Event();

$event->id = $eve->id;

$event->title = $eve->title;

$event->start = $eve->created_date;

$tasks[] = $event;

}

return $this->render('index', [

'events' => $tasks,

]);

}

5. Modifikasi frontend/views/event/index.php

<?php

use yii\helpers\Html;
use yii\grid\GridView;

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

$this->title = Yii::t('app', 'Events');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="event-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <p>
        <?= Html::a(Yii::t('app', 'Create Event'), ['create'], ['class' => 'btn btn-success']) ?>
    </p>
    <?= \yii2fullcalendar\yii2fullcalendar::widget(array(
          'events'=> $events,
      ));?>
</div>

<?php

use yii\helpers\Html;

use yii\grid\GridView;

/* @var $this yii\web\View */

/* @var $searchModel common\models\EventSearch */

/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Events');

$this->params['breadcrumbs'][] = $this->title;

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

<?php // echo $this->render('_search', ['model' => $searchModel]); ?>

<p>

<?= Html::a(Yii::t('app', 'Create Event'), ['create'], ['class' => 'btn btn-success']) ?>

</p>

<?= \yii2fullcalendar\yii2fullcalendar::widget(array(

'events'=> $events,

));?>

</div>

6. Event akan muncul di dalam Calendar Tutorial ini sebagai dokumentasi dan pembelajaran pribadi sekalian belajar terjemahin bahasa Inggris, dan siapa tahu bermanfaat buat Read more about Tutorial Yii2 Bagian 33 : Full Calendar (1)[…]

indocoder.com

Tag: yii2 calendar

Tutorial Yii2 Bagian 34: Full Calendar (2)

Tutorial Yii2 Bagian 33 : Full Calendar (1)