Excuse my lack of experience as I pose my first question. Using FullCalendar 5.10.1, I am working on retrieving events dynamically associated with Festivals.
I have followed the 'events (as a json feed)' pattern from the documentation. When there is at least one event linked to the selected Festival, everything works smoothly and the calendar displays the event(s) correctly.
However, if the feed does not locate any events associated with the Festival selection, the failure callback triggers immediately. An error message 'Failure parsing JSON' appears in the Console. Dismissing the failure message loads an empty calendar as expected.
It's evident that I haven't properly handled the scenario where no events are found, but I'm unsure whether this should be addressed in the feed SQL or within the FullCalendar code.
This setup is running inside a Bootstrap tab. Some temporary code is included here to address a conflict issue with a vendor's theme by delaying the calendar load after setting a variable to the id of the calendar tab.
Admittedly, I may not have presented the code optimally here and possibly did not explain the issue thoroughly enough. Any guidance for this beginner would be greatly appreciated.
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var calendarButton = document.getElementById('calendarButton');
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
themeSystem: 'bootstrap',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
weekNumberCalculation: "ISO",
initialView: 'dayGridMonth',
initialDate: '2021-07-01',
eventDidMount: function(info) {
$(info.el).tooltip({
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
eventSources: [
{
url: '/DesktopModules/XModPro/Feed.aspx',
method: 'POST',
datatype: 'JSON',
extraParams: {
pid: '0',
xfd: 'Events_FullCalendar_FestivalID',
FestivalID: '[[FestivalID]]'
},
failure: function() {
alert('There was an error while fetching events!');
},
color: '#a1a535', // a non-ajax option
textColor: 'white' // a non-ajax option
}
]
});
calendarButton.addEventListener('click', e => {
setTimeout(() => {calendar.render()}, 1);
});
});
</script>
Feed SQL
<%@ Control Language="vb" AutoEventWireup="false" Inherits="KnowBetter.XModPro.FeedBase" %>
<%@ Register Assembly="KnowBetter.XModPro.Web.Controls" Namespace="KnowBetter.XModPro.Web.Controls" TagPrefix="xmod" %>
<xmod:masterview runat="server">
<xmod:JsonFeed runat="server">
<ListDataSource CommandText="SELECT
EventID AS 'id',
VenueID AS 'vid',
FestivalID,
EventTitle AS 'title',
EventDescription AS 'description',
EventStartTime AS 'start',
EventEndTime AS 'end'
FROM la360_Event
WHERE FestivalID = @FestivalID">
<Parameter Name = "FestivalID" value= '<%#FormData("FestivalID")%>' DataType="string" />
</ListDataSource>
</xmod:JsonFeed></xmod:masterview>