Reputation: 135
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