https://www.cascadia.edu/_resources/js/calendar.js

1function initCalendarEvents(getFeedurl, getfeedLimit) {
2	// Get the feedUrl and feedLimit from your webpage
3	var feedUrl = `${getFeedurl}`; // Replace with the actual feed URL
4	var feedLimit = `${getfeedLimit}`; // Replace with the desired feed limit
5
6	$(document).ready(function () {
7		fetchCalendarEvents(feedUrl, feedLimit);
8	});
9}
10
11
12function fetchCalendarEvents(feedUrl, feedLimit) {
13	var combinedUrl = `${feedUrl}`;
14
15	$.ajax({
16		url: combinedUrl,
17		dataType: "xml",
18		success: function (data) {
19			var events = $(data).find(`item:lt(${feedLimit})`);
20			if (events.length === 0) {
21				//$("h1").text("Calendar Feed not available");
22				//$("p").text("Events are not available at the moment.");
23				showError();
24			} else {
25				events.each(function () {
26					var title = $(this).find("title").text();
27					var location = $(this).find("cal\\:location").text();
28					var startString = $(this).find("cal\\:start").text();
29                    var startDate = stringToDate(startString); // convert to Date Object
30					var	endString = $(this).find("cal\\:end").text();
31                    var endDate = stringToDate(endString); // convert to Date Object
32					var eventUrl = $(this).find("link").text().replace("null", "events-calendar/") || "";  // Extract the <link> element
33
34					var monthNumber = startDate.getMonth();
35                   	var monthString = getMonthString(monthNumber);
36
37					// Check if cal:start and cal:end contain time
38					var hasTime = startString.includes("T") && endString.includes("T");
39
40					var startDay = startDate.getDate();
41                    var endDay = endDate.getDate();
42					
43					// If event is recurring or lasts for multiple days display current day	
44					var dayRange = (startDay !== endDay) ? new Date().getDate() : startDay;
45    
46					// Display the time range
47                    var timeRange = hasTime ? (`${formatTime(startDate)} - ${formatTime(endDate)}`) : `All Day`;
48
49					var eventHtml = `
50						<div class="col-12 col-md-6 d-flex">
51							<div class="calendar-events-block w-100">
52								<div class="date-wrap" style="color:#132b6c !important;">
53									<span class="date">${dayRange}</span>
54									<span class="month">${monthString}</span>
55								</div>
56								<div class="event-details">
57									<h3><a href="${eventUrl}">${title}</a></h3>
58									<ul class="event-details">
59										<li class="date-time">
60											<span><img src="/_resources/images/icons/calendar.svg" alt="Calendar Icon" />${timeRange}</span>											
61										</li>
62										<li><img src="/_resources/images/icons/location.svg" alt="location Icon" class="me-2"/>${location}</li>
63									</ul>
64								</div>
65							</div>
66						</div>`;	
67					$(".calendar-events-blocks").append(eventHtml);
68				});
69			}
70		},
71		error: function () {
72			//$("p").text("Events are not available at the moment.");	    
73			showError();
74		}
75	});
76}
77
78function getMonthString(monthNumber) {
79	const months = [
80		"January", "February", "March", "April", "May", "June", "July",

81		"August", "September", "October", "November", "December"
82	];
83	return months[monthNumber];
84}
85function stringToDate(string) {
86            if (!string.includes("T")) { // if time is included in string
87               string = string.replace(/-/g, '\/') // change format from 24-01-01 to 24/01/01 to use the JS Date object (or else it converts to UTC)	
88            } 
89                return new Date(string);
90        } 
91
92function formatTime (date) {
93            return date.toLocaleTimeString('en-US', {timeStyle: 'short'})
94        }
95
96// Function to show the error message
97function showError() {
98  var errorMessage = document.getElementById("error-message");
99  errorMessage.style.display = "block"; // Set the display style to "block"
100  errorMessage.textContent = "Events are not available at the moment.";
101}