CODEWITHSUNDEEP
angularjsfullcalendarangular-ui
Mukun
Mukun

Reputation: 1816

angular-ui/ui-calendar change event source after render in Angular JS

I am trying to use angular-ui/ui-calendar( FullCalendar ) in my Angular Js app. I have select box which lists some items, based on the selcted item, my event source url need to be updated. So in controller, I do update it, but the calendar is still not using the updated URL and also I need the calendar to refresh/Render, once the source is changed. As per this link need to some remove and add event source. I am new to both Jquery and Angular so I would appreciate if any one can explain how I can do it in angular js.

some bits of my controller where i set the url source , but I think it is not the right way to do , and it is also not working.

$scope.locationId = 0
$scope.url = "./api/ev/event/calendarByLocationId?locationId=" + $scope.locationId;
$scope.eventSource = {
        url : $scope.url
    };

$scope.setURL = function(locationId) {
    $scope.locationId = locationId
    $scope.url = "./api/ev/event/calendarByLocationId?locationId=" + $scope.locationId;
    $scope.eventSource = {
        url : $scope.url
    };
    $scope.eventSources = [ $scope.eventSource ];
}

Upvotes: 0

Views: 5069

Answers (2)

Mukun
Mukun

Reputation: 1816

Without using refetchEvents, below code works for me. Once the new event source is added, Calendar automatically fetching the new data from new source.

// This function is called to change the event source. When
// ever user selects some source in the UI
$scope.setEventSource = function(locationId) {
// remove the event source.
uiCalendarConfig.calendars['myCalendar'].fullCalendar('removeEventSource', $scope.eventSource);
// Create the new event source url
$scope.eventSource = {url : "./api/ev/event/calendarByLocationId?locationId=" + locationId};
// add the new event source.
uiCalendarConfig.calendars['myCalendar'].fullCalendar('addEventSource', $scope.eventSource);
}

Upvotes: 2

Han
Han

Reputation: 758

I am figuring out on adding and removing events sources as well. There seems to be a problem.

But as temporarily, what I had was a REST url. Once updated, the data is updated. By then I made the program to refresh the event on the same url by triggerring this. This enables the url to be refreshed and grabbed from database again.

$scope.myCalendar.fullCalendar( 'refetchEvents' );

Which your HTML code should look like this:

<div class="calendar" ng-model="eventSources" calendar="myCalendar" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>

Hope this helps.

Upvotes: 1

Related Questions