Previous and next month events

[nielvrom]

I'm wondering if there aren't any events are triggered when the next or previous button of month is pushed.

The problem now is that I have a click function in a directive but I can't use the received data from my directive in my main controller ...

[eduardonunesp]

I was search for something like that, but now I'm using the viewRender event

$scope.uiConfig = {
          calendar: {
            viewRender: function (view, element) {
                 // do your code here
            }
         }
};

[claudiotrindade]

Hi, i have a issue when click in prev or next month (change months). Fullcalendar not render the remote events. Render only the static events.

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$scope.events = [
    {title: 'All Day Event',start: new Date(y, m, 1)},
    {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
    {id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
    {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
    {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
    {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
];
$scope.eventSources = [$scope.events];
$http.get(ENV.apiEndpoint + '/events.json').then(function(res){
    angular.forEach(res.data, function ( value, key ) {
        $scope.events.push({
            id: value._id.$oid,
            title: value.title,
            start: new Date(value.start), 
            end:  new Date(value.end),
            color: value.color
        });
    });
});

Someone help me with this problem?

[emirdeliz]

I got around this issue with the below code. Before add new item in list, i remove all and insert again.

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

$scope.changeView = function (view, element) {
            uiCalendarConfig.calendars['myCalendar'].fullCalendar('removeEvents');
            uiCalendarConfig.calendars['myCalendar'].fullCalendar('addEventSource',$scope.activities);
        };

$scope.uiConfig = {
            calendar:{
                lang: 'pt-br',
                defaultTimedEventDuration: '01:00:00',
                slotDuration: '00:30:00',
                scrollTime:'08:00:00',
                handleWindowResize: true,
                height: $(window).height() - 200,
                defaultView: 'agendaWeek',
                header: {
                    left: 'prev, next today',
                    center: 'title',
                    right: 'month, agendaWeek, agendaDay'
                },
                editable: true,
                viewRender: $scope.changeView
            }
        };

[hardikpanseriya]

You need to put push stick: true into $scope.events array. Like:

$http.get(ENV.apiEndpoint + '/events.json').then(function(res){
    angular.forEach(res.data, function ( value, key ) {
        $scope.events.push({
            id: value._id.$oid,
            title: value.title,
            start: new Date(value.start), 
            end:  new Date(value.end),
            color: value.color,
            stick: true
        });
    });
});

[pbpraveen1988]

Hello

I want the number of month on prev/next change events.

[regalsingh]

@hardikpanseriya, It works for me :)

[VinuthaShreyas]

To load the data from the http services as in case of anagularJS, we can use the following method.The data loads from the service on click of next and prev buttons

$scope.uiConfig = {
        calendar: {
            height: 450,
            editable: true,
            header: {
                left: 'title',
                center: '',
                right: 'today prev,next'
            },
            eventClick: $scope.alertOnEventClick,
            eventDrop: $scope.alertOnDrop,
            eventResize: $scope.alertOnResize,
            eventRender: $scope.eventRender,
            viewRender: $scope.loadEvents
        }
    };      

$scope.loadEvents = function (view, element, $scope) { console.log("View Changed: ", view.visStart, view.visEnd, view.start, view.end); $scope.events = getEventsFromApi(view.start.format(), view.end.format()); }