我在Yii2框架中使用Philipp Frenzel FullCalendar并且它工作得很好.我想在选项选择的日历基础上实现基本过滤器事件,但我的代码仍然无效.帮助将受到高度赞赏.
这是在EventController中:
[ '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; } }
这是事件索引:
title = 'Roster Bul Hanine Project'; $this->params['breadcrumbs'][] = $this->title; $js=<<registerJs($js, \yii\web\View::POS_READY); ?> = Html::encode($this->title) ?>
render('_search', ['model' => $searchModel]); ?>= Html::a('Create Roster', ['create'], ['class' => 'btn btn-success']) ?>
'
Roster
', 'id' => 'model', 'size' => 'model-lg', ]); echo ""; 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'); } }, });*/ )); ?>
下面是我在index.php中评论'events'=> $ events时的屏幕截图结果(根据你的指示).即使我选择通过选择选项,它也不会过滤事件
如果我取消评论'events'=> $ events,它会显示所有事件,但是当我通过select选项选择时,它不会过滤事件.屏幕截图下方:
您使用的扩展名包括最新版本FullCalendar v3.9.0
。因此,请参阅下面的所有文档参考的最新API版本3。
对我来说,如果我必须实现它,那么我将不会使用该events
选项,因为我们需要基于从下拉列表中选择的选项在运行时过滤事件,一个更好的选择是使用eventSources
选项。它提供了一种指定多个事件源的方法。使用此选项代替该选项。events
您可以将任意数量的事件数组,函数,JSON feed URL或完整的事件源对象放入eventSources
数组。
一个基于Javascript的简单示例
$('#calendar').fullCalendar({ eventSources: [ '/feed1.php', '/feed2.php' ] });
如果您查看Fullcalendar的文档,那么它们的事件相关部分带有名称Event Data
,您可以在其中看到各种选项以及提到的选项。
我们将首先eventSources
为日历事件的JSON feed 提供一个URL,然后删除option events
。我将使用一个来源,如果您愿意,也可以有多个来源,但我会尽量简短。
更改窗口小部件的代码,然后eventSources
在clientOptions
该窗口小部件的选项下添加该选项。
= \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
要使用的相关内容,我会在示例中使用相同的网址)。
因此$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
部分将通过将选定的选择与所需的列进行比较column_name
(将其替换为您要与之比较的字段名称)来处理从数据库中过滤所有事件。现在尚待完成的部分是客户端,我们将绑定onchange
下拉事件,然后主要使用methods
fullcalendar提供的这3 个
removeEventSource
,动态删除事件源。该源中的事件将立即从日历中删除。
addEventSource
,动态地添加事件源。该源可以是Array / URL / Function,就像在events选项中一样。活动将立即从该来源获取并放置在日历上。
refetchEvents
,从所有来源重新提取事件,然后将其重新呈现在屏幕上。
每次我们选择一个选项时,eventSource
都会删除前一个选项,并eventSource
添加一个新选项,这样基本上可以构建schedule/filter-events?choice=all
if All Tech
被选择,schedule/filter-events?choice=0
if Hendy Nugraha
被选择等的URL 。
在初始化小部件的视图顶部添加以下Javascript。
确保下面使用的选择器#select_name
与您的下拉列表的实际匹配id
。
$js = <<registerJs($js, \yii\web\View::POS_READY);
按上述说明进行所有操作,它将立即开始工作,并且在下拉菜单中更改选项后将立即显示经过过滤的结果。
注意:我已经从一个正在运行的项目中提供了上述解决方案,Yii2.0.15.1
并提供了最新的扩展名。
我很惊讶您无法区分服务器端,HTML和Javascript,我提供的与Javascript相关的代码需要粘贴到视图event-index
中,heredoc
并且只需要复制粘贴即可,但是以某种方式结束了包装标签内的Javascript 并删除了
heredoc
?而且,您正在调用$this->registerJs()
脚本标签内部而不是标签?¯\ _(?)_ /¯。
你甚至没有在URL改变控制器名称为var eventSource=['/schedule/filter-events'];
Javascript代码的控制器Event
,而不是schedule
,我写在这里我假设一个模型或控制器名称相应地改变它的每一个点,即使你的控件代码没有相应地更新它还有'eventSources' => ['/schedule/filter-events'],
应该的时间'eventSources' => ['/event/filter-events'],
。
因此,这一次只需复制以下粘贴整个视图代码,就不要更改任何内容。我不会再为您喂食,只是因为您必须将其标记为正确,尽管这是正确的答案,应该被授予赏金。
集成代码时,必须对故障排除和修复语法错误进行修复。提供的解决方案正在运行,您无法集成它并不意味着它不是正确的答案。
'event-index.php`
title = 'Roster Bul Hanine Project'; $this->params['breadcrumbs'][] = $this->title; $js=<<registerJs($js, \yii\web\View::POS_READY); ?> = Html::encode($this->title) ?>
render('_search', ['model' => $searchModel]); ?>= Html::a('Create Roster', ['create'], ['class' => 'btn btn-success']) ?>
'
Roster
', 'id' => 'model', 'size' => 'model-lg', ]); echo ""; 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'); } }, });*/ )); ?>