Yii2完整日历事件过滤不起作用 [英] Yii2 full calendar event filtering not working
问题描述
我在Yii2框架中使用Philipp Frenzel FullCalendar，并且它运行良好.我想基于选项select在日历上实现基本的过滤器事件，但是我的代码仍然无法正常工作.帮助将不胜感激.
这是在EventController内部:
<?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;
/**
* EventController implements the CRUD actions for Event model.
*/
class EventController extends Controller
{
/**
* {@inheritdoc}
*/
public function behaviors()
{
return [
'verbs' => [
'class' => VerbFilter::className(),
'actions' => [
'delete' => ['POST'],
],
],
];
}
/**
* 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)
{
$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,
]);
}
/**
* Displays a single Event model.
* @param integer $id
* @return mixed
* @throws NotFoundHttpException if the model cannot be found
*/
public function actionView($id)
{
return $this->render('view', [
'model' => $this->findModel($id),
]);
}
/**
* 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(['index']);
}else{
return $this->renderAjax('create', [
'model' => $model,
]);
}
}
/**
* Updates an existing Event model.
* If update is successful, the browser will be redirected to the 'view' page.
* @param integer $id
* @return mixed
* @throws NotFoundHttpException if the model cannot be found
*/
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,
]);
}
}
/**
* Deletes an existing Event model.
* If deletion is successful, the browser will be redirected to the 'index' page.
* @param integer $id
* @return mixed
* @throws NotFoundHttpException if the model cannot be found
*/
public function actionDelete($id)
{
$this->findModel($id)->delete();
return $this->redirect(['index']);
}
/**
* Finds the Event model based on its primary key value.
* If the model is not found, a 404 HTTP exception will be thrown.
* @param integer $id
* @return Event the loaded model
* @throws NotFoundHttpException if the model cannot be found
*/
protected function findModel($id)
{
if (($model = Event::findOne($id)) !== null) {
return $model;
}
throw new NotFoundHttpException('The requested page does not exist.');
}
/**
*
* @param type $choice
* @return type
*/
public function actionFilterEvents($choice = null) {
Yii::$app->reponse->format = \yii\web\Response::FORMAT_JSON;
$query = models\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;
}
/**
*
* @param type $dbEvents
* @return \yii2fullcalendar\models\Event
*/
private function loadEvents($dbEvents) {
foreach( $dbEvents AS $event ){
//Testing
$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->created_date));
$Event->end = date('Y-m-d\TH:i:s\Z', strtotime($event->time_out . ' ' . $event->time_out));
$Event->status = $event->status;
$Event->remarks = $event->remarks;
$events[] = $Event;
}
return $events;
}
}
这是事件索引:
<?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() {
//get current status of our filters into eventSourceNew
var eventSourceNew=['/event/filter-events?choice=' + $(this).val()];
//remove the old eventSources
$('#event').fullCalendar('removeEventSource', eventSource[0]);
//attach the new eventSources
$('#event').fullCalendar('addEventSource', eventSourceNew[0]);
$('#event').fullCalendar('refetchEvents');
//copy to current source
eventSource = eventSourceNew;
});
JS;
$this->registerJs($js, \yii\web\View::POS_READY);
?>
<div class="event-index">
<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="0">Hendy Nugraha</option>
<option value="1">Ginanjar Nurwin</option>
<option value="2">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;
});
}",
/*$('#event').fullCalendar({
eventRender: function(event, element) {
if(event.status == "on leave") {
element.css('background-color', '#131313');
} else if (event.status == "stand by") {
element.css('background-color', '#678768');
} else if (event.status == "active") {
element.css('background-color', '#554455');
}
},
});*/
));
?>
</div>
下面的
是当我在index.php中注释'events'=> $ events时的屏幕截图结果(根据您的说明).即使我通过选择选项进行选择，也不会过滤事件
如果我取消注释'events'=> $ events，它将显示所有事件，但是当我通过select选项进行选择时，它不会过滤事件.屏幕截图下方:
您使用的扩展名包括最新版本FullCalendar v3.9.0.因此，请参阅下面的所有文档参考的最新API版本3.
方法
对我来说，如果我必须实现它，我将不会使用events选项，因为我们需要根据从下拉列表中选择的选项在运行时过滤事件，更好的选择是使用events选项.您可以放置任意数量的事件数组 ，功能，将事件源对象放入eventSources数组.
基于javascript的简单示例
$('#calendar').fullCalendar({
eventSources: [
'/feed1.php',
'/feed2.php'
]
});
如果您查看Fullcalendar的文档，则它们具有与事件相关的部分，其名称为 Event Data 您可以在其中看到上述提到的各种选项.
开始于
我们将从为日历事件的JSON供稿提供eventSources URL开始，然后删除选项events.我将使用一个来源，如果您愿意，也可以有多个来源，但我会尽量简短.
更改窗口小部件的代码，并在窗口小部件的clientOptions选项下添加eventSources选项.
<?=
\yii2fullcalendar\yii2fullcalendar::widget(array(
'id' => 'eventFilterCalendar',
'clientOptions' => [
'editable' => true,
'eventSources' => ['/schedule/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;
});
}",
));
?>
这时，如果您刷新日历，将不会看到以前正在加载的任何事件，因为以前您是使用'events'=>$events加载事件的，但是现在我们提供了url源'/schedule/filter-events'(将其更改为要使用的相关controller/action，我将在示例中使用相同的URL ).
第二部分
因此，您之前加载的$events现在将必须通过我们将要创建的新操作来加载.如果您遵循GitHub页面上提供的扩展示例，并从数据库模型加载事件，然后使用for循环进行循环，以将所有事件加载到\yii2fullcalendar\models\Events()模型，然后加载该数组.
由于您没有提供有关数据库用于存储事件并将事件加载到日历的模型的任何详细信息，因此我假设您的模型名称为MyEvents并相应地对其进行了更改，而字段column_name在查询中.
/**
*
* @param type $choice
* @return type
*/
public function actionFilterEvents($choice = null) {
Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
$query = MyEvents::find();
if( is_null($choice) || $choice=='all'){
//the function should return the same events that you were loading before
$dbEvents = $query->all();
} 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();
}
return $this->loadEvents($dbEvents);
}
/**
*
* @param type $dbEvents
* @return \yii2fullcalendar\models\Event
*/
private function loadEvents($dbEvents) {
foreach( $dbEvents AS $event ){
//Testing
$Event = new \yii2fullcalendar\models\Event();
$Event->id = $event->id;
$Event->title = $event->categoryAsString;
$Event->start = date('Y-m-d\TH:i:s\Z', strtotime($event->date_start . ' ' . $event->time_start));
$Event->end = date('Y-m-d\TH:i:s\Z', strtotime($event->date_end . ' ' . $event->time_end));
$events[] = $Event;
}
return $events;
}
上述注意事项
-
$choice参数，其中null为默认值，用于在首次加载日历时列出所有事件. - 用于将搜索到的事件从数据库加载到
\yii2fullcalendar\model\Events的loadEvents()方法，请使用将要使用的相关模型字段名称代替MyEvents来更改foreach中使用的字段名称. .
actionFilterEvents中的在这一点上，如果刷新页面时如前所述正确地完成了所有操作，则日历中会加载默认事件.
实际部分
现在是根据下拉菜单的选择来过滤事件的部分.对于服务器端，我们已经完成了上面的工作，else部分将通过比较选定的选择与所需的列column_name(将其替换为所需的字段名称)来处理从数据库中过滤所有事件的操作.与进行比较).
现在要做的部分是客户端，我们将绑定下拉列表的onchange事件，然后主要使用fullcalendar提供的这3个methods
-
removeEventSource，动态删除事件源.该源中的事件将立即从中删除日历. -
addEventSource，动态添加事件源.该源可以是Array/URL/功能与事件选项中的功能相同.活动将立即从该来源获取并放置在日历上. -
refetchEvents，从所有来源重新获取事件并将其重新呈现在屏幕上.
每次选择一个选项时，都会删除以前的eventSource并添加一个新的eventSource，因此，如果选择了All Tech，则基本上将构建URL schedule/filter-events?choice=all，如果选择了Hendy Nugraha，则将构建schedule/filter-events?choice=0，并且很快.
在您已初始化小部件的视图上方添加以下javascript.
确保在#select_name下面使用的选择器与下拉菜单的实际id相匹配.
$js = <<< JS
var eventSource=['/schedule/filter-events'];
$("#select_name").on('change',function() {
//get current status of our filters into eventSourceNew
var eventSourceNew=['/schedule/filter-events?choice=' + $(this).val()];
//remove the old eventSources
$('#eventFilterCalendar').fullCalendar('removeEventSource', eventSource[0]);
//attach the new eventSources
$('#eventFilterCalendar').fullCalendar('addEventSource', eventSourceNew[0]);
$('#eventFilterCalendar').fullCalendar('refetchEvents');
//copy to current source
eventSource = eventSourceNew;
});
JS;
$this->registerJs($js, \yii\web\View::POS_READY);
按照上述说明进行所有操作，它将立即开始工作，并在您更改下拉菜单中的选项后立即显示经过过滤的结果.
注意:我已经从运行中的项目中提供了上述解决方案，其中包含Yii2.0.15.1和最新的可用扩展名.
编辑
我很惊讶您无法区分服务器端，HTML和javascript，我提供的与JavaScript相关的代码需要粘贴到视图 I'm using Philipp Frenzel FullCalendar in Yii2 framework and its working perfectly. I want to implement basic filter events on calendar base on option select but my codes still not working. Help would be highly appreciated. This is inside EventController : This is event-index : below is screen shot result when i comment 'events'=> $events, inside index.php, (as per your instruction). even I choose via select option, it's not filtering the event if I un-comment 'events'=> $events, it's showing all events, but when i choose via select option, it's not filtering event. below the screen shot: The extension you are using includes the latest version To me, if I have to implement it I won't be using the A simple example javascript based If you look into the documentation for Fullcalendar they have events related section with the name We will start by providing Change the code for the Widget and add the At this point if you will refresh the calendar you will not see any events that you were loading before because previously you were using the So the As you have not provided any detail regarding the model you are using for the database to store and load events to the calendar, I assume that your model name is Things to notice above At this point, if you have done everything correctly as mentioned if you refresh your page you will see the default events loading in the calendar. Now comes the part of filtering the events depending on the choice of the drop-down. For server-side we have already done the work above, the Every time we select a choice the previous Add the below javascript on top of your view where you have initialized your widget. Make sure the selector used below Do everything as told above and it will start working and will show you filtered results as soon as you change options in the drop-down. Note: I have provided the solution above from a running project, with I am amazed that you can't differentiate between server-side, HTML and javascript, the code I provided related to javascript that you needed to paste in the view And you didn't even changed the controller name in the URL for the So this time just copy paste the whole view code below and DO NOT CHANGE anything. I won't be spoon feeding you anymore just because you have to mark it correct, although it is the correct answer and should Have been awarded the Bounty. Troubleshooting and fixing syntax errors are your duties to fix along when you are integrating the code. The solution provided is working and you failing to integrate it does not mean it isnt the correct answer. 'event-index.php`
这篇关于Yii2完整日历事件过滤不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！event-index中，该代码位于<?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;
/**
* EventController implements the CRUD actions for Event model.
*/
class EventController extends Controller
{
/**
* {@inheritdoc}
*/
public function behaviors()
{
return [
'verbs' => [
'class' => VerbFilter::className(),
'actions' => [
'delete' => ['POST'],
],
],
];
}
/**
* 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)
{
$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,
]);
}
/**
* Displays a single Event model.
* @param integer $id
* @return mixed
* @throws NotFoundHttpException if the model cannot be found
*/
public function actionView($id)
{
return $this->render('view', [
'model' => $this->findModel($id),
]);
}
/**
* 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(['index']);
}else{
return $this->renderAjax('create', [
'model' => $model,
]);
}
}
/**
* Updates an existing Event model.
* If update is successful, the browser will be redirected to the 'view' page.
* @param integer $id
* @return mixed
* @throws NotFoundHttpException if the model cannot be found
*/
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,
]);
}
}
/**
* Deletes an existing Event model.
* If deletion is successful, the browser will be redirected to the 'index' page.
* @param integer $id
* @return mixed
* @throws NotFoundHttpException if the model cannot be found
*/
public function actionDelete($id)
{
$this->findModel($id)->delete();
return $this->redirect(['index']);
}
/**
* Finds the Event model based on its primary key value.
* If the model is not found, a 404 HTTP exception will be thrown.
* @param integer $id
* @return Event the loaded model
* @throws NotFoundHttpException if the model cannot be found
*/
protected function findModel($id)
{
if (($model = Event::findOne($id)) !== null) {
return $model;
}
throw new NotFoundHttpException('The requested page does not exist.');
}
/**
*
* @param type $choice
* @return type
*/
public function actionFilterEvents($choice = null) {
Yii::$app->reponse->format = \yii\web\Response::FORMAT_JSON;
$query = models\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;
}
/**
*
* @param type $dbEvents
* @return \yii2fullcalendar\models\Event
*/
private function loadEvents($dbEvents) {
foreach( $dbEvents AS $event ){
//Testing
$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->created_date));
$Event->end = date('Y-m-d\TH:i:s\Z', strtotime($event->time_out . ' ' . $event->time_out));
$Event->status = $event->status;
$Event->remarks = $event->remarks;
$events[] = $Event;
}
return $events;
}
}
<?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() {
//get current status of our filters into eventSourceNew
var eventSourceNew=['/event/filter-events?choice=' + $(this).val()];
//remove the old eventSources
$('#event').fullCalendar('removeEventSource', eventSource[0]);
//attach the new eventSources
$('#event').fullCalendar('addEventSource', eventSourceNew[0]);
$('#event').fullCalendar('refetchEvents');
//copy to current source
eventSource = eventSourceNew;
});
JS;
$this->registerJs($js, \yii\web\View::POS_READY);
?>
<div class="event-index">
<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="0">Hendy Nugraha</option>
<option value="1">Ginanjar Nurwin</option>
<option value="2">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;
});
}",
/*$('#event').fullCalendar({
eventRender: function(event, element) {
if(event.status == "on leave") {
element.css('background-color', '#131313');
} else if (event.status == "stand by") {
element.css('background-color', '#678768');
} else if (event.status == "active") {
element.css('background-color', '#554455');
}
},
});*/
));
?>
</div>
FullCalendar v3.9.0. So refer to the latest API version 3 for all the documentation references below.Approach
events option as we need to filter events on runtime base on the option selected from the drop-down a better option would be to use eventSources option. It provides a way to specify multiple event sources. This option is used instead of the events option.You can put any number of event arrays, functions, JSON feed URLs, or full-out Event Source Objects into the eventSources array.$('#calendar').fullCalendar({
eventSources: [
'/feed1.php',
'/feed2.php'
]
});
Event Data where you can see various options along with the one mentioned.Start From
eventSources a URL for our JSON feed for the calendar events, and remove the option events. I will use a single source you can have multiple too if you like but i will keep it short and simple. eventSources option under the clientOptions option for the widget.<?=
\yii2fullcalendar\yii2fullcalendar::widget(array(
'id' => 'eventFilterCalendar',
'clientOptions' => [
'editable' => true,
'eventSources' => ['/schedule/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;
});
}",
));
?>
'events'=>$events to load the events but now we have provided a url source '/schedule/filter-events' (change it to the relevant controller/action you want to use I will use the same URL for the example).Second Part
$events that you were loading before, will now have to load via the new action we are going to create. If you are following the example provided on the GitHub page for the extension and loading your events from the database model and then looping over with a for loop to load all of the events to the \yii2fullcalendar\models\Events() model and then load that array.MyEvents change it accordingly and the field column_name in the query./**
*
* @param type $choice
* @return type
*/
public function actionFilterEvents($choice = null) {
Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
$query = MyEvents::find();
if( is_null($choice) || $choice=='all'){
//the function should return the same events that you were loading before
$dbEvents = $query->all();
} 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();
}
return $this->loadEvents($dbEvents);
}
/**
*
* @param type $dbEvents
* @return \yii2fullcalendar\models\Event
*/
private function loadEvents($dbEvents) {
foreach( $dbEvents AS $event ){
//Testing
$Event = new \yii2fullcalendar\models\Event();
$Event->id = $event->id;
$Event->title = $event->categoryAsString;
$Event->start = date('Y-m-d\TH:i:s\Z', strtotime($event->date_start . ' ' . $event->time_start));
$Event->end = date('Y-m-d\TH:i:s\Z', strtotime($event->date_end . ' ' . $event->time_end));
$events[] = $Event;
}
return $events;
}
$choice parameter in actionFilterEvents with null as the default value for listing all the events when the calendar loads for the first time.loadEvents() method to load the searched events from the database to \yii2fullcalendar\model\Events, do change the field names used in the foreach with the relevant model field names that you will use instead of MyEvents.Actual part
else part will handle filtering all the events from the database by comparing the selected choice with the desired column column_name (replace it with the field name you want to compare with).
The part still to be done is the client-side now, we will bind the onchange event of the dropdown and then use mainly these 3 methods provided by fullcalendar
removeEventSource,Dynamically removes an event source.Events from the source will be immediately removed from the calendar.addEventSource,Dynamically adds an event source.The source may be an Array/URL/Function just as in the events option. Events will be immediately fetched from this source and placed on the calendar.refetchEvents, Refetches events from all sources and rerenders them on the screen.eventSource is removed and a new eventSource is added so basically will building the url schedule/filter-events?choice=all if All Tech is selected, schedule/filter-events?choice=0 if Hendy Nugraha is selected and so on. #select_name is matched with your drop-down's actual id.$js = <<< JS
var eventSource=['/schedule/filter-events'];
$("#select_name").on('change',function() {
//get current status of our filters into eventSourceNew
var eventSourceNew=['/schedule/filter-events?choice=' + $(this).val()];
//remove the old eventSources
$('#eventFilterCalendar').fullCalendar('removeEventSource', eventSource[0]);
//attach the new eventSources
$('#eventFilterCalendar').fullCalendar('addEventSource', eventSourceNew[0]);
$('#eventFilterCalendar').fullCalendar('refetchEvents');
//copy to current source
eventSource = eventSourceNew;
});
JS;
$this->registerJs($js, \yii\web\View::POS_READY);
Yii2.0.15.1 and the latest available extension.EDIT
event-index was inside the heredoc and you had to just copy paste it but somehow you ended up wrapping the javascript inside the <script> tag and removed the heredoc? and moreover you are calling the $this->registerJs() inside the script tag rather than the <?php ?> tags ? ¯\_(ツ)_/¯. var eventSource=['/schedule/filter-events']; javascript code your controller is Event and not schedule, i wrote at every point where i assumed a model or controller name to change it accordingly, even your widget code is not updated accordingly it also has the 'eventSources' => ['/schedule/filter-events'], when it should be 'eventSources' => ['/event/filter-events'],.<?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() {
//get current status of our filters into eventSourceNew
var eventSourceNew=['/event/filter-events?choice=' + $(this).val()];
//remove the old eventSources
$('#event').fullCalendar('removeEventSource', eventSource[0]);
//attach the new eventSources
$('#event').fullCalendar('addEventSource', eventSourceNew[0]);
$('#event').fullCalendar('refetchEvents');
//copy to current source
eventSource = eventSourceNew;
});
JS;
$this->registerJs($js, \yii\web\View::POS_READY);
?>
<div class="event-index">
<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="0">Hendy Nugraha</option>
<option value="1">Ginanjar Nurwin</option>
<option value="2">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;
});
}",
/*$('#event').fullCalendar({
eventRender: function(event, element) {
if(event.status == "on leave") {
element.css('background-color', '#131313');
} else if (event.status == "stand by") {
element.css('background-color', '#678768');
} else if (event.status == "active") {
element.css('background-color', '#554455');
}
},
});*/
));
?>
</div>
