Miranda
Miranda

Reputation: 135

getting new json feed after clicking previous and next button on FullCalendar

on my FullCalendar implementation, I am using ajax to get a Json feed to of the list of events. This works on the present month/year.

When I click the next/previous button I need to get a new Json feed of the list of events for the specified month/year. How do I change that? I have my onclick and my ajax call working but it is not populating the events.

Here is my code

    $(document).ready(function () {
    var events = [];
    var thisMonth = $('#thisMonth').html();
    var thisYear = $('#thisYear').html();
    var theMonth;
    var theYear;
    $.ajax({
        type: "GET",
        url: "/Home/GetEvents",
        success: function (data) {
            $.each(data, function (i, evt) {
                events.push({
                    title: evt.Title,
                    start: evt.Start,
                    id: evt.ID
                });
            });
            GenerateCalendar(events);
        }
    });
    $(document).on('click', '.fc-prev-button', function () {
    //$('.fc-prev-button').click(function () {
        alert('clicked previous');
        if (thisMonth == 1) {
            theMonth = 12;
            theYear = parseInt(thisYear) - 1;
        } else {
            theMonth = parseInt(thisMonth) - 1;
            theYear = thisYear;
        }
        alert(theMonth + '-' + theYear);
        
        $.ajax({
            type: "GET",
            data: {Month: thisMonth,Year: thisYear,Direction: 'prev'},
            url: "/Home/GetPrevNextEvents",
            success: function (data) {
                $.each(data, function (i, evt) {
                    events.push({
                        title: evt.Title,
                        start: evt.Start,
                        id: evt.ID
                    });
                    $('#thisMonth').html(theMonth);
                    $('#thisYear').html(theYear);
                });

                calendar.prev();
                calendar.events = events;
            }
        });
    });
    $(document).on('click', '.fc-next-button', function () {
    //$('.fc-next-button').click(function () {
        alert('clicked next');
        
        if (thisMonth == 12) {
            theMonth = 1;
            theYear = parseInt(thisYear) + 1;
        } else {
            theMonth = parseInt(thisMonth) + 1;
            theYear = thisYear;
        }
        alert(theMonth + '-' + theYear);
       
        $.ajax({
            type: "GET",
            data: {Month: thisMonth,Year: thisYear ,Direction: 'next'},
            url: "/Home/GetPrevNextEvents",
            success: function (data) {
                $.each(data, function (i, evt) {
                    events.push({
                        title: evt.Title,
                        start: evt.Start,
                        id: evt.ID
                    });
                    $('#thisMonth').html(theMonth);
                    $('#thisYear').html(theYear);
                });
                calendar.next();
                calendar.events = events;
            }
        });
    });
    
    function GenerateCalendar(events) {
        
        $('#calendar').fullCalendar('destroy');
        $('#calendar').fullCalendar({
            header: {
                right: 'next',
                center: 'title',
                left: 'prev'
            },
            theme: false,
            timezone: 'local',
            editable: true,
            defaultDate: '@string.Format("{0:yyyy-MM-dd}",thisDay)',
            allDaySlot: false,
            selectable: true,
            slotMinutes: 15,
            events: events,
            eventClick: function (calEvent) {
                window.location = '/MonthlyEvents/Details/' + calEvent.id;
            }

        });
    }
});

Upvotes: 0

Views: 331

Answers (0)

Related Questions