2013-07-03 1 views
0

Я использую Angular-Ui-Calendar, и у меня есть 3 вида в моем календаре. Я добавил раскрывающийся список с списком пользователей над календарем. Поэтому моя цель - фильтровать отображаемые события на основе выбора выпадающего списка.Angular-Ui-Calendar: Фильтровать события в календаре на основе выпадающего списка

Я хочу применить логику фильтрации в своем календаре Angular-Ui. Позвольте мне рассказать о моем календаре

У меня есть календарь с 3 видами (AgendaDay, AgendaWeek и basicWeek), и я использую 2 источника для загрузки событий в свой календарь. Мой первый источник - «Задачи пользователей»
и второй источник «Встречи пользователей». Во-первых, я хочу загрузить только источник «Задача» для повестки дня Day и AgendaWeek, и когда пользователь переключит представления в календарь basicWeek, вы получите и покажите «Встреча» в basicWeek. Я столкнулся с проблемой, чтобы сделать это.

Во-вторых, у меня есть выпадающий список/выберите поле вне календаря, в котором есть список пользователей. Теперь я хочу отфильтровать эти источники (Task and Meetings) в соответствии с выбранными пользователями.

вот мой plunkr код

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

или

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

пожалуйста, дайте мне какое-то решение для этого.

+0

Вопросы должны демонстрировать минимальное понимание решаемой проблемы. Расскажите, что вы пытались сделать, почему это не сработало и как оно должно работать. – Stewie

+0

ok .. Я обновляю свой пост – user2518430

ответ

4

Наконец-то я получил решение, я решил проблему фильтра в угловом календаре.

Когда конечный пользователь выбирает пользователя из раскрывающегося списка (над календарем), он вызывает функцию onStaffSelect (userId) в контроллере.

/*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); 
+0

Его работа успешно для меня ... Я также буду обновлять ссылку plunkr позже. – user2518430

Смежные вопросы