document.addEventListener('DOMContentLoaded', function() {
var myCalendar = (function () {
var canSubmit = false;
var showFilteredEvents = true;
var checkCalendarHeightTID;
var allEvents = {
startDate: '2025-04-14',
endDate: '2025-04-14',
currentView: $(window).width() < 767 ? 'listMonth' : 'dayGridMonth',
eventList: [],
start: function (date) {
if (date && (date !== undefined)) {
this.startDate = date;
$('.fc-custom-search #start-date').val(date);
} else {
return this.startDate;
}
},
end: function (date) {
if (date && (date !== undefined)) {
this.endDate = date;
$('.fc-custom-search #end-date').val(date);
} else {
return this.endDate;
}
},
view: function (view) {
if (view && (view !== undefined)) {
this.currentView = view;
$('.fc-custom-search #view').val(view);
} else {
var formView = $('.fc-custom-search #view').val();
if (formView && (formView !== undefined)) {
this.currentView = formView;
}
return this.currentView;
}
},
events: function (events) {
if (events && (events !== undefined)) {
this.eventList = events;
} else {
return this.eventList;
}
},
eventSearchText: function (event) {
var searchText = '';
searchText = searchText + event.title.toLowerCase() + ' ';
searchText = searchText + event.intro.toLowerCase() + ' ';
if (event.school != null && event.school.length > 0) {
for (var i = 0; i < event.school.length; i++) {
searchText = searchText + event.school[i].toLowerCase() + ' ';
}
}
return searchText;
},
filterBySchool: function (event) {
var schools = $('#school-list').val();
if (schools != null && schools.length == 1 && schools[0] == '') {
return true;
}
if (schools != null && schools.length > 0) {
if (event.school != null && event.school.length > 0) {
for (var i = 0; i < schools.length; i++) {
for (var j = 0; j < event.school.length; j++) {
if (schools[i] == event.school[j]) {
return true;
}
}
}
} else {
return false;
}
} else {
return true;
}
},
searchEvents: function (event) {
var query = $('#search-query').val().toLowerCase();
if (query != null && query.length > 0) {
var queryTerms = query.split(/[ ,]+/).filter(Boolean);
// "this." doesn't work for some reason I don't understand, so I use "allEvents." instead
var searchText = allEvents.eventSearchText(event);
for (var i = 0; i < queryTerms.length; i++) {
if (searchText.search(queryTerms[i]) < 0) {
return false;
}
}
return true;
} else {
return true;
}
},
filterEvents: function () {
toggleFilterButtons();
if (showFilteredEvents) {
var filteredEvents = this.events().filter(this.filterBySchool);
return filteredEvents.filter(this.searchEvents);
} else {
return this.events();
}
}
};
var showLoading = function () {
$('.fc-view')
.append($('
'))
.show();
}
var hideLoading = function () {
$('.fc-view .fc-loading').remove();
}
var adjustCalendarHeight = function () {
fullHeight = $('.fc-scroller .fc-day-grid').height();
if ($('.fc-scroller').height() < fullHeight) {
$('.fc-scroller').height(fullHeight);
}
checkCalendarHeightTID = window.setTimeout(adjustCalendarHeight, 1000);
}
let startDate;
let endDate;
const calendarEl = document.getElementById('calendar')
const calendar = new FullCalendar.Calendar(calendarEl, {
datesSet: function(dateInfo) {
startDate = (String(dateInfo.start.toISOString())).slice(0,10);
endDate = (String(dateInfo.end.toISOString())).slice(0,10);
calendar.refetchEvents();
},
scrollTime: '08:00:00',
editable: false,
nowIndicator: true,
initialView : allEvents.view(), // window.innerWidth < 767 ? 'listMonth' : 'dayGridMonth',
headerToolbar : {
start: 'today prev,next',
center: 'title',
end: 'dayGridWeek,dayGridMonth,timeGridDay,listMonth',
},
height: 'auto',
themeSystem : 'bootstrap',
eventColor: '#c4bfc0',
eventTextColor: 'black',
eventDisplay : 'block',
eventSources : [
{
events: function(info, successCallback, failureCallback) {
if (allEvents.start() != startDate || allEvents.end() != endDate) {
allEvents.start(startDate);
allEvents.end(endDate);
$.ajax({
url: 'https://engineering.purdue.edu/Engr/Academics/Academics-dev/Parents/coe-calendar-widget/scripts/pyGetCalendarEvents',
type: 'GET',
dataType: 'json',
cache: true,
data: {
start: startDate,
end: endDate,
},
success: function (events) {
allEvents.events(events);
successCallback(allEvents.filterEvents());
},
error: function () {
failureCallback('There was an error fetching the JSON events.');
}
});
} else {
successCallback(allEvents.filterEvents());
}
}
}
],
eventClick: function (event) {
if (event.url) {
window.open(event.url, '_blank');
return false;
}
},
eventDidMount: function(info) {
var originalLeave;
$(info.el).popover({
title: info.event.title,
placement: 'right',
content: () => {
let time = () => {
if (info.event.allDay == false) {
return (
'Time: ' + info.event.extendedProps.event_times.t_start.t_str + ' to ' + info.event.extendedProps.event_times.t_end.t_str + '
');
} else {
return ('Time: All Day
');
}
};
let intro = ('Intro: ' + (info.event.extendedProps.intro) + '
');
let location = () => {
if (info.event.extendedProps.location != 'undefined') {
return ('Location: ' + info.event.extendedProps.location + '
');
} else {
return ('Location: None Given
');
}
};
let schoolOrProgram = () => {
if (info.event.extendedProps.school != '') {
return 'School or Program: ' + info.event.extendedProps.school + '
';
} else {
return ('School or Program: Open' + '
');
}
};
let atc = () => {
if (info.event.allDay == false) {
return (
''
);
} else {
return (
''
);
};
}
return ( time() + intro + location() + schoolOrProgram() + atc() )
},
trigger: 'manual',
container: 'body',
html: true
}).on('mouseenter', function() {
var _this = this;
$(this).popover('show');
$('.popover').on('mouseleave', function() {
$(_this).popover('hide');
});
}).on('mouseleave', function() {
var _this = this;
setTimeout(function() {
if (!$('.popover:hover').length) {
$(_this).popover('hide');
}
}, 100); // Timeout for mouse to possibly move from event to popover
});
// Correct handling of Popover's manual triggering
$('.popover').off('mouseenter').on('mouseenter', function() {
if (originalLeave) {
clearTimeout(originalLeave);
}
});
},
})
calendar.render()
var refetchEvents = function () {
calendar.refetchEvents();
}
var showFilteredEvents = function () {
showFilteredEvents = true;
toggleFilterButtons();
refetchEvents();
}
var showAllEvents = function () {
showFilteredEvents = false;
toggleFilterButtons();
refetchEvents();
}
var toggleFilterButtons = function (show) {
if (showFilteredEvents) {
$('#show-filtered-events').addClass('fc-state-active');
$('#show-all-events').removeClass('fc-state-active');
} else {
$('#show-filtered-events').removeClass('fc-state-active');
$('#show-all-events').addClass('fc-state-active');
}
}
$('#school-list').change(function (event) {
refetchEvents();
event.preventDefault();
});
$('#search-query').change(function (event) {
refetchEvents();
// enable the following line to make the form submit only when the submit button is clicked
// event.preventDefault();
}).keyup(function () {
$(this).change();
});
$('.clear-search').click(function (event) {
// document.getElementById('fc-custom-search').reset();
$('#fc-custom-search option').prop("selected", false);
$('#search-query').val('');
// event.preventDefault();
// $('.search-results').remove();
// showFilteredEvents = false;
// toggleFilterButtons();
// refetchEvents();
});
$('#show-filtered-events').click(showFilteredEvents);
$('#show-all-events').click(showAllEvents);
return {
showFilteredEvents: showFilteredEvents,
showAllEvents: showAllEvents
};
})();
})