Question

我正在尝试制作自动刷新日历。我正在使用日历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];

我不知道这是否是最奇怪的方式，但我仍然是角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作为后端在角度日历UI（Fullcalendar）中刷新事件

1 个答案: