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

I am trying to make an automated refresh calendar. I am using Calendar UI and i am getting data from my backend in this way

  /**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];

I don’t know if it is the wierdest way to do it but i am still a babe at angular js so please excuse this crime scene ^^ . i did a little reasearch and i decided to go with $interval provider to refresh the events. and here is the problems that i faced after trying:
Try 1 :
//Refresh events
var refresh = function(){
$('#calendar').fullCalendar('rerenderEvents');
console.log("refreshed");
}
$interval(refresh, 3000);
refresh();

Basically this did nothing
Try 2 :
//Refresh events
var refresh = function(){
$scope.events.length = 0;
$scope.getPlaningsByGroup($scope.student.group_id);
console.log("refreshed");
}
$interval(refresh, 3000);
refresh();

And this worked but i know that this is a suicide attempt to the backend.
My Question is how to solve this madness.
Thanks

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can use two strategies to keep your calendar in sync with server without make lots of requests.

The first one, is called long polling. Put it simply, client makes a request, your server will keep it alive until new events are available.

The second one, is called WebSocket. It’s a full-duplex communication channel where you can send data in both directions.

I don’t work with PHP, so I don’t know if laravel has support for long polling or websocket, but I think that would not be difficult to create.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x