Full Calendar Script
Budget: $30 – $250 USD
Attempting to use Full Calendar 5.11 to display Multiple json feeds in calendar. Using this script as a template.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventSources: [
// your event source
{
url: 'https://gulfcoast.assp.org/wp-json/ee/v4.8.29/events',
format: 'json',
method: 'GET',
extraParams: {
custom_param1: 'something',
custom_param2: 'somethingelse'
},
failure: function() {
alert('there was an error while fetching events!');
}
},
{
url: 'https://kc.assp.org/wp-json/ee/v4.8.29/events',
format: 'json',
method: 'GET',
extraParams: {
custom_param1: 'something',
custom_param2: 'somethingelse'
},
failure: function() {
alert('there was an error while fetching events!');
}
}
// any other sources...
]
});
calendar.render();
});
Can see the json feed connects in the console.log, but cannot figure out what the extra parameters should be to display info in the calendar.
This script worked in Full Calendar 2.1.3 using a single ajax feed
events: function( start, end, timezone, callback ){
var objectdata = {
where: {
'Datetime.DTT_EVT_start': [
'>', start.format() + 'T00:00:00'
],
'Datetime.DTT_EVT_end': [
'<', end.format() + 'T00:00:00'
]
},
"include": 'Datetime.*'
};
$.ajax({
//url: 'https://kc.assp.org/wp-json/ee/v4.8.29/events',
url: 'https://gulfcoast.assp.org/wp-json/ee/v4.8.29/events',
dataType: 'json',
// crossDomain:true,
// mimeType:'json',
data: objectdata ,
success: function(doc) {
var events = [];
$(doc).each(function() {
//only add events to the calendar if they have a datetime (they all should)
if( this.datetimes[0] ){
events.push({
title: this.EVT_name,
url: this.link,
start: this.datetimes[0].DTT_EVT_start,// will be parsed
end: this.datetimes[0].DTT_EVT_end // will be parsed
});
}
});
callback(events);
},
error: function( xhr, status, error ) {
alert('error communicating with server ' + status );
}
});
},
Deliverables
Function and script to display multiple json feeds in single calendar using Full Calendar 5.11
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventSources: [
// your event source
{
url: 'https://gulfcoast.assp.org/wp-json/ee/v4.8.29/events',
format: 'json',
method: 'GET',
extraParams: {
custom_param1: 'something',
custom_param2: 'somethingelse'
},
failure: function() {
alert('there was an error while fetching events!');
}
},
{
url: 'https://kc.assp.org/wp-json/ee/v4.8.29/events',
format: 'json',
method: 'GET',
extraParams: {
custom_param1: 'something',
custom_param2: 'somethingelse'
},
failure: function() {
alert('there was an error while fetching events!');
}
}
// any other sources...
]
});
calendar.render();
});
Can see the json feed connects in the console.log, but cannot figure out what the extra parameters should be to display info in the calendar.
This script worked in Full Calendar 2.1.3 using a single ajax feed
events: function( start, end, timezone, callback ){
var objectdata = {
where: {
'Datetime.DTT_EVT_start': [
'>', start.format() + 'T00:00:00'
],
'Datetime.DTT_EVT_end': [
'<', end.format() + 'T00:00:00'
]
},
"include": 'Datetime.*'
};
$.ajax({
//url: 'https://kc.assp.org/wp-json/ee/v4.8.29/events',
url: 'https://gulfcoast.assp.org/wp-json/ee/v4.8.29/events',
dataType: 'json',
// crossDomain:true,
// mimeType:'json',
data: objectdata ,
success: function(doc) {
var events = [];
$(doc).each(function() {
//only add events to the calendar if they have a datetime (they all should)
if( this.datetimes[0] ){
events.push({
title: this.EVT_name,
url: this.link,
start: this.datetimes[0].DTT_EVT_start,// will be parsed
end: this.datetimes[0].DTT_EVT_end // will be parsed
});
}
});
callback(events);
},
error: function( xhr, status, error ) {
alert('error communicating with server ' + status );
}
});
},
Deliverables
Function and script to display multiple json feeds in single calendar using Full Calendar 5.11