How to filter events using select option

[hendynugraha]

Greetings Programmers,

I'm using Philipp Frenzel FullCalendar in Yii2 Framework and its working perfectly. I want to implement simple filter events on calendar base on option select but my codes still not working. Help would be highly appreciated.

This in inside Event - index.php :

`<?php

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

$this->title = 'Roster Bul Hanine Project';
$this->params['breadcrumbs'][] = $this->title;

$js = <<< JS
var eventSource=['/event/filter-events'];
$("#select_name").on('change',function() {
var eventSourceNew=['/event/filter-events?choice=' + $(this).val()];
$('#event').fullCalendar('removeEventSource', eventSource[0]);
$('#event').fullCalendar('addEventSource', eventSourceNew[0]);
$('#event').fullCalendar('refetchEvents');
eventSource = eventSourceNew;
});
JS;
$this->registerJs($js,\yii\web\View::POS_READY);

?>

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

<p><?= Html::a('Create Roster', ['create'], ['class' => 'btn btn-success']) ?></p>
<p>
    <select class="model_attribute" id="select_name">
        <option value="all">All Tech</option>
        <option value="Hendy Nugraha">Hendy Nugraha</option>
        <option value="Ginanjar Nurwin">Ginanjar Nurwin</option>
        <option value="Rio Andhika">Rio Andhika</option>
    </select>
</p>
<div id="event"></div>

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

<?=\yii2fullcalendar\yii2fullcalendar::widget(array(
  //'events'=> $events, 
  'id' => 'event',
  'clientOptions' => [ 
    'editable' => true,
    'eventSources' => ['/event/filter-events'],
    'draggable' => true,
    'droppable' => true,
    ],
    'eventClick' => "function(calEvent, jsEvent, view) {
            $(this).css('border-color', 'red');
            $.get('index.php?r=event/update',{'id':calEvent.id}, function(data){
                $('.modal').modal('show')
                .find('#modelContent')
                .html(data);
            })
            $('#calendar').fullCalendar('removeEvents', function (calEvent) {
                return true;
            });
       }",
));
?>

`

and this is EventControllers :

`<?php

namespace app\controllers;

use Yii;
use app\models\Event;
use app\models\EventSearch;
use yii\web\Controller;
use yii\web\NotFoundHttpException;
use yii\filters\VerbFilter;

class EventController extends Controller
{
public function behaviors()
{
return [
'verbs' => [
'class' => VerbFilter::className(),
'actions' => [
'delete' => ['POST'],
],
],
];
}

public function actionIndex()
{
    /*$searchModel = new EventSearch();
    $dataProvider = $searchModel->search(Yii::$app->request->queryParams);*/
	
	$events = Event::find()->all();
	$tasks = [];
	
	foreach ($events as $eve)
	{
		  $event = new \yii2fullcalendar\models\Event();
		  $event->id = $eve->id;
		  $event->backgroundColor = 'green';
		  $event->title = $eve->title;
		  $event->start = $eve->created_date;
		  $tasks[] = $event;
	}

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

public function actionView($id)
{
    return $this->render('view', [
        'model' => $this->findModel($id),
    ]);
}

public function actionCreate($date)
{
    $model = new Event();
	$model->created_date = $date;

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

public function actionUpdate($id)
{
    $model = $this->findModel($id);

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

public function actionDelete($id)
{
    $this->findModel($id)->delete();

    return $this->redirect(['index']);
}

protected function findModel($id)
{
    if (($model = Event::findOne($id)) !== null) {
        return $model;
    }

    throw new NotFoundHttpException('The requested page does not exist.');
}

public function actionFilterEvents($choice = null) {
	Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
	$query = Event::find();

	if( is_null($choice) || $choice=='all'){
		//the function should return the same events that you were loading before
		$dbEvents = $query->all();
		$events = $this->loadEvents($dbEvents);
	} else{
		//here you need to look up into the data base 
		//for the relevant events against your choice
		$dbEvents = $query->where(['=', 'column_name', ':choice'])
				->params([':choice' => $choice])
				->asArray()
				->all();
		$events = $this->loadEvents($dbEvents);
	}
	return $events;
}

private function loadEvents($dbEvents) {
	foreach( $dbEvents AS $event ){
		$Event = new \yii2fullcalendar\models\Event();
		$Event->id = $event->id;
		$Event->title = $event->categoryAsString;
		$Event->description = $event->description;
		$Event->start = date('Y-m-d\TH:i:s\Z', strtotime($event->created_date));
		$Event->end = date('Y-m-d\TH:i:s\Z', strtotime($event->time_out ));
		$Event->status = $event->status;
		$Event->remarks = $event->remarks;
		$events[] = $Event;
	}
	return $events;
}

}`

[philippfrenzel]

So open or not open ;) Are you passing params correct?

[hendynugraha]

Hi Philip, believe you're doing well. in truth, it's great to hear from you. Basically I need to filter events as per codes above and until right now those codes it's not working. this issue is still open. really really hope you can give a sample of how to implement filter events based on select option. anyway, your Full Calendar is awesome :)

[philippfrenzel]

thanks @hendynugraha -> so this sounds like you solved it -> I will close it for now ;)