how to automatic refresh the calednar

[chandan4871]

how to automatic refresh the calendar after data bind from firebase database. Actually i have bind the data to the calendar but events are not able to show in calendar after bind but after a change event its showing so how to automatically refresh the after data bind.

[twinssbc]

@chandan4871 Not sure how you bind data to the calendar. The event source change is watched at the variable level, if you directly modify the element in the event source, the refresh won't be triggered because of the performance consideration. You can check the README for more detail. To force refresh, you can manually broadcast the event.

$scope.$broadcast('eventSourceChanged',$scope.eventSource);

[chandan4871]

.controller('BDCalendar',function($scope,$firebaseArray,$ionicLoading){ $scope.show = function() { $ionicLoading.show({ template: '

Loading...

' }); }; $scope.hide = function(){ $ionicLoading.hide(); }; $scope.calendar = {}; $scope.changeMode = function (mode) { $scope.calendar.mode = mode; };

    $scope.loadEvents = function () {
        $scope.calendar.eventSource = createRandomEvents();
         $scope.$broadcast('eventSourceChanged',$scope.calendar.eventSource);
    };
   $scope.loadEvents();
    $scope.onEventSelected = function (event) {
        console.log('Event selected:' + event.startTime + '-' + event.endTime + ',' + event.title);
    };
    $scope.onViewTitleChanged = function (title) {
        $scope.viewTitle = title;
    };
    $scope.today = function () {
        $scope.calendar.currentDate = new Date();
    };

    $scope.isToday = function () {
        var today = new Date(),
            currentCalendarDate = new Date($scope.calendar.currentDate);

        today.setHours(0, 0, 0, 0);
        currentCalendarDate.setHours(0, 0, 0, 0);
        return today.getTime() === currentCalendarDate.getTime();
    };

    $scope.onTimeSelected = function (selectedTime) {
        console.log('Selected time: ' + selectedTime);
    };

    function createRandomEvents() {
    $scope.show();
    String.prototype.replaceAll = function(s,r){return this.split(s).join(r)}
    var prospect = new Firebase(url);
    var exploration = new Firebase(url);
    var follow = new Firebase(url);
    var tender = new Firebase(url);
    var urlArray=[];
    urlArray=[prospect,exploration,follow,tender];
    var prpData=[];
    var expData=[];
    var followdata=[];
    var tenData=[];
    var j=0;
    var k=0;
    var l=0;
    var m=0;
    for(var i=0;i<4;i++){
    if(i==0)
        {
                urlArray[0].on('value', function (snapshot) {
                var quakes = [];
                snapshot.forEach(function (childSnapshot) {
                    quakes.push(childSnapshot.val());
                    prpData.push(quakes[j].PROP_SUB);
                    prpData.push((quakes[j].PROP_DT).replaceAll("-", ","));
                    j++;
                });
                     addEvent(prpData);
            });

        }
     else if(i==1)
        {
             urlArray[1].on('value', function (snapshot) {
                var quakes1 = [];
                snapshot.forEach(function (childSnapshot) {
                    quakes1.push(childSnapshot.val());
                    expData.push(quakes1[k].EXP_SUB);
                    expData.push((quakes1[k].EXP_DT).replaceAll("-", ","));
                    k++;
                });
                 addEvent(expData);
            });
        }
     else if(i==2)
        {
             urlArray[2].on('value', function (snapshot) {
                var quakes2 = [];
                snapshot.forEach(function (childSnapshot) {
                    quakes2.push(childSnapshot.val());
                    followdata.push(quakes2[l].FU_SUB);
                    followdata.push((quakes2[l].FU_DT).replaceAll("-", ","));
                    l++;
                });
                  addEvent(followdata);
            });
        }
     else if(i==3)
        {
             urlArray[3].on('value', function (snapshot) {
                var quakes3 = [];
                snapshot.forEach(function (childSnapshot) {
                quakes3.push(childSnapshot.val());
                tenData.push(quakes3[m].TEN_SUB);
                tenData.push((quakes3[m].TEN_SUB_DT).replaceAll("-", ","));
                    m++;
                });
                  addEvent(tenData);
            });
        }
    }

    var events = [];
    function addEvent(eventarray)
    {
        var startTime,endTime,tittle; 
         for(var l=0;l<=eventarray.length;l++)
            {
                if(l%2 != 0)
                    {
                        startTime = new Date(eventarray[l]);
                        endTime = new Date(startTime.getFullYear(),startTime.getMonth(),startTime.getDate()+1);
                        tittle=eventarray[l-1];
                    }
            events.push({
                            title: tittle,
                            startTime: startTime,
                            endTime: endTime,
                            allDay: true
                        });
            }
        $scope.hide();
    }
    return events;
 }

});

[chandan4871]

Above code is my controller i have four table in my firebase database i have extract the subject and date from the 4 tables and already bind them to calendar so where should i write the $scope.$broadcast('eventSourceChanged',$scope.eventSource); that the calendar will refresh automatically and display the event.please go through the above code and help me it will be great pleasure for me.

[twinssbc]

@chandan4871 Are your database call executed asynchronously? You need to call the broadcast method right after you made change to eventSource.

[cristhianbarros]

@chandan4871 I had the same problem. Because I needed to refresh the events when the function $scope.onViewTitleChanged was called. To resolve it I copy and paste whole code into the function $scope.onViewTitleChanged. Like that:

$scope.onViewTitleChanged = function (title) { dateWeekStart = new Date(title); $scope.titleMonth = months[dateWeekStart.getMonth()];

    strDateWeekStart = title;
    var eventsBD = [];
    if($scope.calendar.eventSource !== undefined) {

        var eventsCalendarBD = [];

        $http.get('url_api').then(function (response) {
            eventsBD = response.data;

            var startTime;
            var endTime;
            for (var i = 0; i < eventsBD.length; i++) {

                var eventArray = null;
                eventArray = eventsBD[i];

                var textStartDateTime = eventArray.start_date + " " + eventArray.start_hour;
                var textEndDateTime = eventArray.end_date + " " + eventArray.end_hour;

                startTime = new Date(textStartDateTime);
                endTime = new Date(textEndDateTime);

                eventsCalendarBD.push({
                    title: eventArray.subject,
                    startTime: startTime,
                    endTime: endTime,
                    allDay: false,
                    color: eventArray.room.color,
                    detail: eventArray
                });
            }

            $scope.$broadcast('eventSourceChanged', eventsCalendarBD);

        }, function (error) {
            console.log("Error");
        });
    }

[twinssbc]

@cristhianbarros rangeChanged method should be the most suitable one to use. In that method, you will get the startTime and endTime of a range.

$scope.rangeChanged = function (startTime, endTime) {
    Events.query({startTime: startTime, endTime: endTime}, function(events){
        $scope.eventSource=events;
    });
};

But in onViewTitleChanged, the only parameter is title. It seems you don't need to leverage the startTime and endTime parameter, because you are querying like this: $http.get('url_api'). I guess your backend just returns all the events. It's a bit wasted if you query a lot of events, but only display the events in a small range.

[vksingh225]

@chandan4871 Not sure how you bind data to the calendar. The event source change is watched at the variable level, if you directly modify the element in the event source, the refresh won't be triggered because of the performance consideration. You can check the README for more detail. To force refresh, you can manually broadcast the event.

$scope.$broadcast('eventSourceChanged',$scope.eventSource);

It is not working inside http calls.