由于您没有提供有关数据库用于存储事件并将事件加载到日历的模型的任何详细信息，因此我假设您的模型名称为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;}上述注意事项actionFilterEvents中的 $choice参数，其中null为默认值，用于在首次加载日历时列出所有事件.用于将搜索到的事件从数据库加载到\yii2fullcalendar\model\Events的loadEvents()方法，请使用将要使用的相关模型字段名称代替MyEvents来更改foreach中使用的字段名称. .在这一点上，如果刷新页面时如前所述正确地完成了所有操作，则日历中会加载默认事件.实际部分现在是根据下拉菜单的选择来过滤事件的部分.对于服务器端，我们已经完成了上面的工作，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相关的代码需要粘贴到视图event-index中，该代码位于 heredoc ，您只需要复制粘贴即可，但最终以某种方式将javascript包装在<script>标记并删除了heredoc?而且，您是在script标签而不是<?php ?>标签中调用$this->registerJs()吗? ¯\ _(ツ)_/¯.您甚至都没有更改var eventSource=['/schedule/filter-events']; javascript代码的URL中的控制器名称，您的控制器是Event而不是schedule，我在每个要更改模型或控制器名称的地方都写了因此，即使您的小部件代码没有得到相应的更新，当它应该为'eventSources' => ['/event/filter-events'],时，它也会带有'eventSources' => ['/schedule/filter-events'],.因此，这一次只需复制以下粘贴整个视图代码，然后请勿更改.我不会再为您喂食，只是因为您必须将其标记为正确，尽管这是正确的答案，并且应该被授予赏金. 对错误进行故障排除和修复是集成代码时要解决的任务.提供的解决方案有效，您无法集成它并不意味着它不是正确的答案.'event-index.php` <?phpuse yii\helpers\Html;use yii\grid\GridView;use yii\bootstrap\Modal;$this->title = 'Roster Bul Hanine Project';$this->params['breadcrumbs'][] = $this->title;$js=<<< JSvar 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>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 :<?phpnamespace 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; }}This is event-index :<?phpuse yii\helpers\Html;use yii\grid\GridView;use yii\bootstrap\Modal;$this->title = 'Roster Bul Hanine Project';$this->params['breadcrumbs'][] = $this->title;$js=<<< JSvar 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>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 eventif 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 FullCalendar v3.9.0. So refer to the latest API version 3 for all the documentation references below.ApproachTo me, if I have to implement it I won't be using the 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.A simple example javascript based$('#calendar').fullCalendar({ eventSources: [ '/feed1.php', '/feed2.php' ]});If you look into the documentation for Fullcalendar they have events related section with the name Event Data where you can see various options along with the one mentioned.Start FromWe will start by providing 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.Change the code for the Widget and add the 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; }); }",));?>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 '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 PartSo the $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.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 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;}Things to notice above$choice parameter in actionFilterEvents with null as the default value for listing all the events when the calendar loads for the first time.The 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.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.Actual partNow 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 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 fullcalendarremoveEventSource,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.Every time we select a choice the previous 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.Add the below javascript on top of your view where you have initialized your widget.Make sure the selector used below #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);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 Yii2.0.15.1 and the latest available extension.EDITI 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 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 ? ¯\_(ツ)_/¯.And you didn't even changed the controller name in the URL for the 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'],.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`<?phpuse yii\helpers\Html;use yii\grid\GridView;use yii\bootstrap\Modal;$this->title = 'Roster Bul Hanine Project';$this->params['breadcrumbs'][] = $this->title;$js=<<< JSvar 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完整日历事件过滤不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
