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 时的屏幕截图结果（按照您的说明）。即使我通过 select 选项进行选择，它也不会过滤事件
如果我取消注释 'events'=> $events，它会显示所有事件，但是当我通过 select 选项选择时，它不会过滤事件。屏幕截图下方：
您使用的扩展包含最新版本FullCalendar v3.9.0。因此，请参阅最新的 API 版本 3 以获取以下所有文档参考。
方法
对我来说，如果我必须实现它，我不会使用 events 选项，因为我们需要根据下拉列表中的 selected 选项在运行时过滤事件更好的选择是使用 eventSources 选项。它提供了一种指定多个事件源的方法。使用此选项代替events option.You可以将任意数量的event arrays, functions, JSON feed URLs, or full-out Event Source Objects放入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 source '/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 actionFilterEvents 中的参数，其中 null 作为日历首次加载时列出所有事件的默认值。loadEvents()方法将搜索到的事件从数据库加载到\yii2fullcalendar\model\Events，使用相关模型字段更改foreach中使用的字段名称您将使用的名称，而不是 MyEvents.
此时，如果您按照上述正确完成了所有操作，那么如果您刷新页面，您将看到默认事件加载到日历中。
实际部分
现在是根据下拉菜单的选择过滤事件的部分。对于服务器端，我们已经完成了上述工作，else 部分将通过比较 selected 选择与所需列 column_name (将其替换为您要与之比较的字段名称)。
现在还要做的部分是客户端，我们将绑定下拉列表的onchange事件，然后主要使用fullcalendar
提供的这3个methods
removeEventSource，从源中动态删除事件 source.Events 将立即从日历中删除。addEventSource，动态添加一个事件 source.The 源可能是一个 Array/URL/Function，就像在事件选项中一样。事件将立即从该源获取并放置在日历上。refetchEvents，从所有来源重新获取事件并在屏幕上重新呈现它们。
每次我们 select 一个选择时，以前的 eventSource 被删除并添加一个新的 eventSource 所以基本上会构建 url schedule/filter-events?choice=all 如果All Tech 是 selected，schedule/filter-events?choice=0 如果 Hendy Nugraha 是 selected 等等。
在初始化小部件的视图顶部添加以下 javascript。
确保 select 或下面使用的 #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 相关的代码event-index 位于 heredoc 内，您必须复制粘贴它，但不知何故，您最终将 javascript 包装在 <script> 标签内并删除了 heredoc？而且你在脚本标签内调用 $this->registerJs() 而不是 <?php ?> 标签？ ¯\_(ツ)_/¯。
而且你甚至没有在 URL 中为 var eventSource=['/schedule/filter-events']; javascript 代码更改控制器名称你的控制器是 Event 而不是 schedule ，我在假设模型或控制器名称的每一点都写了相应地更改它，即使你的小部件代码没有相应地更新它也有 'eventSources' => ['/schedule/filter-events'], 而它应该是 'eventSources' => ['/event/filter-events'],.
所以这次只需复制粘贴下面的整个视图代码并且不要更改任何内容。我不会再因为你必须将其标记为正确而用勺子喂你，尽管它是正确的答案并且应该被授予赏金。
故障排除和修复语法错误是您在集成代码时需要修复的职责。提供的解决方案有效，您未能集成它并不意味着它不是正确的答案。
'事件-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() {
//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>
我在 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 时的屏幕截图结果（按照您的说明）。即使我通过 select 选项进行选择，它也不会过滤事件
如果我取消注释 'events'=> $events，它会显示所有事件，但是当我通过 select 选项选择时，它不会过滤事件。屏幕截图下方：
您使用的扩展包含最新版本FullCalendar v3.9.0。因此，请参阅最新的 API 版本 3 以获取以下所有文档参考。
方法
对我来说，如果我必须实现它，我不会使用 events 选项，因为我们需要根据下拉列表中的 selected 选项在运行时过滤事件更好的选择是使用 eventSources 选项。它提供了一种指定多个事件源的方法。使用此选项代替events option.You可以将任意数量的event arrays, functions, JSON feed URLs, or full-out Event Source Objects放入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 source '/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;
}
以上注意事项
$choiceactionFilterEvents中的参数，其中null作为日历首次加载时列出所有事件的默认值。loadEvents()方法将搜索到的事件从数据库加载到\yii2fullcalendar\model\Events，使用相关模型字段更改foreach中使用的字段名称您将使用的名称，而不是MyEvents.
此时，如果您按照上述正确完成了所有操作，那么如果您刷新页面，您将看到默认事件加载到日历中。
实际部分
现在是根据下拉菜单的选择过滤事件的部分。对于服务器端，我们已经完成了上述工作，else 部分将通过比较 selected 选择与所需列 column_name (将其替换为您要与之比较的字段名称)。
现在还要做的部分是客户端，我们将绑定下拉列表的onchange事件，然后主要使用fullcalendar
methods
removeEventSource，从源中动态删除事件 source.Events 将立即从日历中删除。addEventSource，动态添加一个事件 source.The 源可能是一个 Array/URL/Function，就像在事件选项中一样。事件将立即从该源获取并放置在日历上。refetchEvents，从所有来源重新获取事件并在屏幕上重新呈现它们。
每次我们 select 一个选择时，以前的 eventSource 被删除并添加一个新的 eventSource 所以基本上会构建 url schedule/filter-events?choice=all 如果All Tech 是 selected，schedule/filter-events?choice=0 如果 Hendy Nugraha 是 selected 等等。
在初始化小部件的视图顶部添加以下 javascript。
确保 select 或下面使用的 #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 相关的代码event-index 位于 heredoc 内，您必须复制粘贴它，但不知何故，您最终将 javascript 包装在 <script> 标签内并删除了 heredoc？而且你在脚本标签内调用 $this->registerJs() 而不是 <?php ?> 标签？ ¯\_(ツ)_/¯。
而且你甚至没有在 URL 中为 var eventSource=['/schedule/filter-events']; javascript 代码更改控制器名称你的控制器是 Event 而不是 schedule ，我在假设模型或控制器名称的每一点都写了相应地更改它，即使你的小部件代码没有相应地更新它也有 'eventSources' => ['/schedule/filter-events'], 而它应该是 'eventSources' => ['/event/filter-events'],.
所以这次只需复制粘贴下面的整个视图代码并且不要更改任何内容。我不会再因为你必须将其标记为正确而用勺子喂你，尽管它是正确的答案并且应该被授予赏金。
故障排除和修复语法错误是您在集成代码时需要修复的职责。提供的解决方案有效，您未能集成它并不意味着它不是正确的答案。
'事件-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() {
//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>