View changing on fullcalendar doesn't work

问题

I'm facing this nightmare since many days and I still cannot figure what I'm missing to make the changeView event work.

What am I doing? I'm programmatically trying to make the calendar's view changed. How? Searching for fullcalendar by his id within the controller and setting the new view.

Lots of guides/threads tell many ways but the more comprehensible I got was the following:

That's my HTML code (it's the whole HTML page):

<div class="container">
  <div id="eventsCalendar" ui-calendar="main.uiConfig.calendar" class="span8 calendar" ng-model="main.eventSources">
  </div>
</div>

This's how to get the calendar, setting the new view within the controller:

angular.element('#eventsCalendar').fullCalendar('changeView', 'agendaView');

It looks fine, no errors and angular got the calendar (yay!!!). Amazing! No "calendar-related-dependencies" injected, a very simple and short way... That's awesome! Set a function with that line of code but nothing happened and the calendar still be in the month view (holy damn... back to the drawing board...)

Some threads for the ui-calendar (maybe something similar to fullcalendar?) tells to inject uiCalendarConfig as controller's dependency, declaring the calendar="myCalendar" attribute in HTML declaration and calling uiCalendarConfig.calendars.myCalendar... the result was: uiCalendarConfig is empty... I'm confused.

Does anyone ever get the changeView work properly? How could I do that? I'm sure I'm missing something stupid... I can feel it!

Any help will be appreciated.

回答1:

<div calendar="eventsCalendar" ui-calendar="main.uiConfig.calendar" class="span8 calendar" ng-model="main.eventSources">

To change the calendar view, use this function

$scope.changeView = function(view) {
   uiCalendarConfig.calendars["eventsCalendar"].fullCalendar('changeView',view);
};

call the function as below

 $scope.changeView('month'); //or
 $scope.changeView('agendaDay'); //or
 $scope.changeView('agendaWeek'); //or

回答2:

Unfortunately, there does not seem to be an onload callback. However, this is what I came up with for my app

    // watcher for on load
    var calendarOnLoad = null;
    var calendarOnLoadCallbacks = [];

    $scope.changeView = function(view) {

        if(uiCalendarConfig.calendars.eventsCalendar) {
            // already initiated or beat the race condition, great!
           uiCalendarConfig.calendars.eventsCalendar.fullCalendar('changeView',view);
        }
        else {
            // calendar is undefined. watch for onload
            if(!calendarOnLoad) {
                calendarOnLoad = $scope.$watch(function () {
                    // prevent type error which breaks the app
                    try {
                        return uiCalendarConfig.calendars.eventsCalendar;
                    } catch (err) {
                        return null;
                    }
                }, function (calendar) {
                    // uiCalendarConfig.calendars.eventsCalendar is now initiated
                    if(calendar) {
                        calendarOnLoad(); // clear watcher since calendar exists
                        // call all the callbacks queued
                        calendarOnLoadCallbacks.forEach(function (fn) {
                            fn(calendar);
                        });
                    }
                });
            }

            // run this calendarOnLoadCallbacks queue once calendar is initiated
            calendarOnLoadCallbacks.push(function(calendar) {
                calendar.fullCalendar('changeView',view);
            });

        }
    }


    $scope.changeView('agendaWeek');
    $scope.changeView('month');
    $scope.changeView('agendaDay');

I hope this helps.

来源：https://stackoverflow.com/questions/37616106/view-changing-on-fullcalendar-doesnt-work

标签

angularjs

fullcalendar