那些遇到过的问题

Yii2完整日历事件过滤无效

Hen*_*ndy 6 php jquery fullcalendar yii2 yii2-basic-app

我在Yii2框架中使用Philipp Frenzel FullCalendar并且它工作得很好.我想在选项选择的日历基础上实现基本过滤器事件,但我的代码仍然无效.帮助将受到高度赞赏.

这是在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;
    }
}
Run Code Online (Sandbox Code Playgroud)

这是事件索引:

<?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>
Run Code Online (Sandbox Code Playgroud)

下面是我在index.php中评论'events'=> $ events时的屏幕截图结果(根据你的指示).即使我选择通过选择选项,它也不会过滤事件

在此输入图像描述

如果我取消评论'events'=> $ events,它会显示所有事件,但是当我通过select选项选择时,它不会过滤事件.屏幕截图下方:

在此输入图像描述

Muh*_*lam 5

您使用的扩展名包括最新版本FullCalendar v3.9.0。因此，请参阅下面的所有文档参考的最新API版本3。

方法

对我来说，如果我必须实现它，那么我将不会使用该events选项，因为我们需要基于从下拉列表中选择的选项在运行时过滤事件，一个更好的选择是使用eventSources选项。它提供了一种指定多个事件源的方法。使用此选项代替该选项。events您可以将任意数量的事件数组，函数，JSON feed URL或完整的事件源对象放入eventSources数组。

一个基于javascript的简单示例

$('#calendar').fullCalendar({
  eventSources: [
    '/feed1.php',
    '/feed2.php'
  ]
});
Run Code Online (Sandbox Code Playgroud)

如果您查看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;
        });

    }",
));
?>
Run Code Online (Sandbox Code Playgroud)

此时，如果您刷新日历，将不会看到之前正在加载的任何事件，因为以前您使用'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;
}
Run Code Online (Sandbox Code Playgroud)

以上注意事项

  • $choice在参数actionFilterEvents与null作为上市的所有事件的默认值时，首次日历负荷。
  • loadEvents()将从数据库中将搜索到的事件加载到的方法\yii2fullcalendar\model\Events，将所使用的字段名称更改为foreach您将使用的相关模型字段名称代替MyEvents。

此时，如果刷新页面时如前所述正确地完成了所有操作，则日历中将加载默认事件。

实际部分

现在是根据下拉菜单选择过滤事件的部分。对于服务器端，我们已经完成了上面的工作，该else部分将通过将选定的选择与所需的列进行比较column_name（将其替换为您要与之比较的字段名称）来处理从数据库中过滤所有事件。现在尚待完成的部分是客户端，我们将绑定onchange下拉事件，然后主要使用methodsfullcalendar提供的这3 个

  • removeEventSource，动态删除事件源。该源中的事件将立即从日历中删除。
  • addEventSource，动态地添加事件源。该源可以是Array / URL / Function，就像在events选项中一样。活动将立即从该来源获取并放置在日历上。
  • refetchEvents，从所有来源重新提取事件，然后将其重新呈现在屏幕上。

每次我们选择一个选项时，eventSource都会删除前一个选项，并eventSource添加一个新选项，这样基本上可以构建schedule/filter-events?choice=allif All Tech被选择，schedule/filter-events?choice=0if Hendy Nugraha被选择等的URL 。

在初始化小部件的视图顶部添加以下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);
Run Code Online (Sandbox Code Playgroud)

按上述说明进行所有操作，它将立即开始工作，并且在下拉菜单中更改选项后将立即显示经过过滤的结果。

注意：我已经从一个正在运行的项目中提供了上述解决方案，Yii2.0.15.1并提供了最新的扩展名。

编辑

我很惊讶您无法区分服务器端，HTML和javascript，我提供的与JavaScript相关的代码需要粘贴到视图event-index中，heredoc并且只需要复制粘贴即可，但是以某种方式结束了包装<script>标签内的javascript 并删除了heredoc？而且，您正在调用$this->registerJs()脚本标签内部而不是<?php ?>标签？¯\ _（？）_ /¯。

你甚至没有在URL改变控制器名称为var eventSource=['/schedule/filter-events'];JavaScript代码的控制器Event，而不是schedule，我写在这里我假设一个模型或控制器名称相应地改变它的每一个点，即使你的控件代码没有相应地更新它还有'eventSources' => ['/schedule/filter-events'],应该的时间'eventSources' => ['/event/filter-events'],。

因此，这一次只需复制以下粘贴整个视图代码，就不要更改任何内容。我不会再为您喂食，只是因为您必须将其标记为正确，尽管这是正确的答案，应该被授予赏金。

集成代码时，必须对故障排除和修复语法错误进行修复。提供的解决方案正在运行，您无法集成它并不意味着它不是正确的答案。

'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() {
    //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>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

782 次

最近记录：

6 年，9 月 前
相关归档
PHP中的is_null($ x)vs $ x === null 129
让我的函数访问外部变量 69
如何在Laravel 5中访问刀片中的URL段？ 36
scrollTop jquery,用id滚动到div？ 33
如何在foreach循环中转到下一条记录 31
使用jQuery可以进行摘要式身份验证吗？ 30
fb登录弹出块 30
Bootstrap模式:如何用onClick =""打开 30
可以在Yii2中更改动作类吗？ 5
Yii2允许的内存大小耗尽 5
难疑归档
如何在Web表单字段/输入标记上禁用浏览器自动完成？ 2680
如何在JavaScript中检查"undefined"？ 2294
如何在Python中将字符串解析为float或int？ 2108
如何在Bash中解析命令行参数？ 1764
如何迭代Pandas中的DataFrame中的行？ 1551
如何在Xcode 4中"添加现有框架"？ 1426
将零填充到字符串的最好方法 1309
如何使用INER JOIN与SQL Server删除？ 1181
UTF-8一路走来 1146
SQL仅选择列上具有最大值的行 1142