https://www.roundrocktexas.gov/wp-content/themes/astra-child/js/libcal-events.js?ver=1.0.0

1// LibCal API URL
2const url =
3  "https://corrdevstorage.blob.core.windows.net/lib-cal-events/libcalevents.json";
4
5// Function to format the date and time
6function formatDateTime(startStr, endStr) {
7  const startDate = new Date(startStr);
8  const endDate = new Date(endStr);
9
10  const options = { month: "long", day: "numeric" };
11  const date = startDate.toLocaleDateString("en-US", options);
12
13  const startTime = startDate.toLocaleTimeString([], {
14    hour: "2-digit",
15    minute: "2-digit",
16  });
17  const endTime = endDate.toLocaleTimeString([], {
18    hour: "2-digit",
19    minute: "2-digit",
20  });
21
22  return `${date} @ ${startTime} - ${endTime}`;
23}
24
25// Function to get current time in Central US Time Zone
26function getCentralTime() {
27  const now = new Date();
28  // Calculate the offset from UTC
29  const utcOffset = now.getTimezoneOffset(); // in minutes
30  const centralOffset = 6 * 60; // CST is UTC-6 hours, expressed in minutes
31  const centralDSTOffset = 5 * 60; // CDT is UTC-5 hours, expressed in minutes
32
33  // Adjust for Daylight Saving Time (DST)
34  const isDST = now
35    .toLocaleString("en-US", { timeZoneName: "short" })
36    .includes("CDT");
37  const offset = isDST ? centralDSTOffset : centralOffset;
38
39  // Calculate the central time
40  return new Date(now.getTime() + (utcOffset - offset) * 60 * 1000);
41}
42
43// Function to process each container
44function processContainer(container, data) {
45  const categoryValues = container.dataset.categories
46    ? container.dataset.categories.split(",").map((category) => category.trim())
47    : [];
48  const centralTime = getCentralTime();
49
50  // Filter events by categories and start time
51  const filteredEvents = data.events.filter((event) => {
52    const eventStartDate = new Date(event.start);
53    const categoryMatch =
54      categoryValues.length > 0
55        ? event.category.some((cat) => categoryValues.includes(cat.name))
56        : true;
57    return categoryMatch && eventStartDate >= centralTime;
58  });
59
60  // Get the first 5 events
61  const events = filteredEvents.slice(0, 5);
62
63  // Loop through the first 5 events
64  events.forEach((event) => {
65    // Format the date and time
66    const formattedDateTime = formatDateTime(event.start, event.end);
67
68    // Create a new div element for the event container
69    const eventContainer = document.createElement("div");
70    eventContainer.className = "libcal-event-container";
71
72    // Set the innerHTML of the event container
73    eventContainer.innerHTML = `
74      <div class="libcal-event-thumb">
75        <div class="libcal-month">${new Date(event.start)
76          .toLocaleString("en-US", { month: "short" })
77          .toUpperCase()}</div>
78        <div class="libcal-day">${new Date(event.start).getDate()}</div>
79      </div>
80      <div class="libcal-event-summary">
81        <div class="libcal-event-title">
82          <a href="${event.url.public}">${event.title}</a>
83        </div>
84        <div class="libcal-date">
85          ${formattedDateTime}
86        </div>
87      </div>
88    `;
89
90    // Append the event container to the events container
91    container.appendChild(eventContainer);
92  });
93}
94
95// Fetch data from LibCal API
96fetch(url)
97  .then((response) => response.json())
98  .then((data) => {
99    // Log the data to the console
100    // console.log(data);
101
102    // Get all containers where the events will be appended
103    const containers = document.querySelectorAll(".libcal-events-container");
104
105    // Process each container
106    containers.forEach((container) => processContainer(container, data));
107  })
108  .catch((error) => {
109    // Log the error to the console
110    console.error(error);
111  });