以 Laravel 作为后端刷新 Angular 日历 UI（全日历）中的事件

Question

我正在尝试制作自动刷新日历。我正在使用 Calendar UI 并以这种方式从我的后端获取数据

  /**Calendar Config***/
      //config object
                $scope.uiConfig = {
                    calendar:{
                        height: 500,
                        width: 800,
                        editable: false,
                        //First Hour
                        firstHour: 8,
                        //Devide by half hour
                        slotMinutes: 30,
                        //default duration 01:30
                        defaultEventMinutes: 90,
                        axisFormat: 'HH:mm',
                        timeFormat: {
                            agenda: 'H:mm{ - H:mm}'
                        },
                    header:{
                        //Buttons
                        center: 'month agendaWeek agendaDay',
                        left: 'title',
                        right: 'today prev,next'
              },
              defaultView: 'agendaWeek'
            }
          };

      //Get planings By Group
            $scope.getPlaningsByGroup = function(groupId){
                planing.getPlaningsByGroup(groupId)
                    .success(function(data){
                        //Populate the event object
                        $scope.populatePlan(data);
                    });
                }

      //Populating the plan
      $scope.events = [];
      $scope.populatePlan = function(plans){
        plans.forEach(function(plan){
          start_time = moment.duration(plan.start_time);;
          duration = moment.duration(plan.course.duration);
          start_course = moment()
                          .day(plan.day)
                          .hour(start_time.hours())
                          .minutes(start_time.minutes())
                          .seconds(start_time.seconds())
                          .format("YYYY-MM-DDTHH:mm:ss");



          end_time = start_time.add(duration);
          end_course = moment()
                          .day(plan.day)
                          .hour(end_time.hours())
                          .minutes(end_time.minutes())
                          .seconds(end_time.seconds())
                          .format("YYYY-MM-DDTHH:mm:ss");

          console.log(end_course);

          $scope.events.push(
                  {
                    id:plan.id,
                    title:plan.course.title,
                    start:start_course,
                    end :end_course,
                    allDay:false,
                  }
            );


        });
      }
      //Event Source object
      $scope.eventSources = [$scope.events];

我不知道这是否是最奇怪的方法，但我仍然是 angular js 的宝贝所以请原谅这个犯罪现场 ^^。我做了一些研究，然后决定使用 $interval 提供程序来刷新事件。这是我尝试后遇到的问题：尝试 1： //Refresh events var refresh = function(){ $('#calendar').fullCalendar('rerenderEvents'); console.log("refreshed"); } $interval(refresh, 3000); refresh();

基本上这没什么用尝试 2： //Refresh events var refresh = function(){ $scope.events.length = 0; $scope.getPlaningsByGroup($scope.student.group_id); console.log("refreshed"); } $interval(refresh, 3000); refresh();

这很有效，但我知道这是对后端的自杀企图。我的问题是如何解决这种疯狂。谢谢

Answer 1

您可以使用两种策略使您的日历与服务器保持同步，而无需发出大量请求。

第一个，叫做long polling。简而言之，客户端发出请求，您的服务器将使其保持活动状态，直到有新事件可用。

第二个，叫做WebSocket。这是一个全双工通信通道，您可以在其中双向发送数据。

我不使用 PHP，所以我不知道 laravel 是否支持长轮询或 websocket，但我认为创建起来并不困难。

以 Laravel 作为后端刷新 Angular 日历 UI（全日历）中的事件

Refresh Events In Angular Calendar UI (Fullcalendar) With Laravel As A Backend

fullcalendar

laravel

angularjs

angular-ui