CODEWITHSUNDEEP
angularjsfullcalendarangular-ui
Anil Kumar Pandey
Anil Kumar Pandey

Reputation: 1927

Angular-Ui-Calendar: Filter events in calendar based on dropdown selection

I am using Angular-Ui-Calendar and I have 3 views in my calendar. I added a dropdown with user list above the calendar. So my goal is to filter rendered events based on dropdown selection.

I want to apply filtration logic in my Angular-Ui calendar. Let me describe about my calendar

I have calendar with 3 views(agendaDay, agendaWeek and basicWeek) and I am using 2 sources for loading events in my calendar. My first source is "Users Tasks"
and second source "Users Meetings". Firstly I want to load only "Task" source for agendaDay and agendaWeek and when user switches views into basicWeek calendar will fetch and show "Meeting" in basicWeek. I am facing problem to do this.

Secondly I have a dropdown/select box outside the calendar which has users list. Now I want to filter those sources(Task and Meetings) according to selected users.

here is my plunkr code

http://embed.plnkr.co/qfzCSi/preview

or

http://plnkr.co/edit/qfzCSi?p=preview

please give me some solution for this.

Upvotes: 0

Views: 3899

Answers (1)

Anil Kumar Pandey
Anil Kumar Pandey

Reputation: 1927

Finally I got the solution, I solved the filter problem in angular-ui-calendar.

When the end user selects the user from the dropdown(above calendar) it calls "onStaffSelect(userId)" function in the controller. 

 /*on user select*/
$scope.onUserSelect = function(id){
    console.log("### onUserSelect is called "+id);
    if(id==1)
      $scope.events = [{title: 'Birthday Party',start: new Date(y, m, d + 1, 19,     0),end: new Date(y, m, d + 1, 22, 30),allDay: false, userId: 1}];
    };

 $scope.myCalendar.fullCalendar( 'removeEvents');
 $scope.myCalendar.fullCalendar( 'addEventSource', $scope.events);

Upvotes: 4

Related Questions