From 2e30511389b53daf3b2fffc28e15e8e53a27a65d Mon Sep 17 00:00:00 2001 From: Tim Rayburn Date: Sat, 3 Feb 2024 10:39:53 -0600 Subject: [PATCH] calendar integration --- _data/menu.yml | 10 +++++-- _includes/framework/info.html | 9 ++---- assets/js/calendar-short.js | 55 +++++++++++++++++++++++++++++++++++ assets/js/calendar.js | 55 +++++++++++++++++++++++++++++++++++ pages/calendar.md | 16 ++++++++++ pages/home.md | 22 ++++++-------- pages/visit.md | 2 +- 7 files changed, 147 insertions(+), 22 deletions(-) create mode 100644 assets/js/calendar-short.js create mode 100644 assets/js/calendar.js create mode 100644 pages/calendar.md diff --git a/_data/menu.yml b/_data/menu.yml index 64cce0c..db99b77 100644 --- a/_data/menu.yml +++ b/_data/menu.yml @@ -31,9 +31,12 @@ main: - name: Visit The Lab url: /visit weight: 5 + - name: Calendar + url: /calendar + weight: 6 - name: Join Now url: https://join.thelab.ms - weight: 6 + weight: 7 footer_primary: - name: Home url: / @@ -51,9 +54,12 @@ footer_secondary: - name: About url: /about/ weight: 2 + - name: Calendar + url: /calendar + weight: 3 - name: Contact url: /contact/ - weight: 3 + weight: 4 footer_tertiary: - name: Join Now url: https://join.thelab.ms diff --git a/_includes/framework/info.html b/_includes/framework/info.html index f8a4dcd..ba408d0 100644 --- a/_includes/framework/info.html +++ b/_includes/framework/info.html @@ -24,6 +24,8 @@

{{ heading }}

{% endfor %} {% endif %} +
+ {% if buttons.list.size > 0 %}
{% for button in buttons.list %} @@ -43,11 +45,6 @@

{{ heading }}

-
- {% if image %} - {{ heading }} - {% endif %} -
- + diff --git a/assets/js/calendar-short.js b/assets/js/calendar-short.js new file mode 100644 index 0000000..1c68e94 --- /dev/null +++ b/assets/js/calendar-short.js @@ -0,0 +1,55 @@ +fetchCalendarData().then(data => { + var e = document.getElementById("calendar"); + e.innerHTML = e.innerHTML || ""; + var locale = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; + data.slice(0,3).forEach(el => { + e.innerHTML += `
+
+

${el.name}

+ in ${el.daysUntil} days +
+

${el.membersOnly ? "Members Only" : "Open To The Public"}

+

${el.start.toLocaleDateString("en-us",locale)} from ${String(el.start.getHours()).padStart(2,'0')}:${String(el.start.getMinutes()).padStart(2,'0')} until ${String(el.end.getHours()).padStart(2,'0')}:${String(el.end.getMinutes()).padStart(2,'0')}

+ ${el.description} +
`; + }); +}); + +async function fetchCalendarData() { + // Define the API URL + const apiUrl = 'https://profile.thelab.ms/api/events'; + + // Make a GET request + return fetch(apiUrl) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + var now = new Date(Date.now()); + var today = new Date(now.getFullYear(),now.getMonth(),now.getDate()); + data.forEach(element => { + var start = new Date(element.start * 1000); + var end = new Date(element.end * 1000); + var durationDay = new Date(start.getFullYear(),start.getMonth(), start.getDate()); + var diffTime = Math.abs(durationDay - today); + var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); + element.start = start; + element.end = end; + element.daysUntil = diffDays; + }); + data = data.sort((a,b) => { + if (a.daysUntil > b.daysUntil) return 1; + else if (b.daysUntil > a.daysUntil) return -1; + else if (a.name > b.name) return -1; + else if (b.name > a.name) return 1; + return 0; + }); + return data; + }) + .catch(error => { + console.error('Error:', error); + }); + } \ No newline at end of file diff --git a/assets/js/calendar.js b/assets/js/calendar.js new file mode 100644 index 0000000..49d62d9 --- /dev/null +++ b/assets/js/calendar.js @@ -0,0 +1,55 @@ +fetchCalendarData().then(data => { + var e = document.getElementById("calendar"); + e.innerHTML = e.innerHTML || ""; + var locale = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; + data.forEach(el => { + e.innerHTML += `
+
+

${el.name}

+ in ${el.daysUntil} days +
+

${el.membersOnly ? "Members Only" : "Open To The Public"}

+

${el.start.toLocaleDateString("en-us",locale)} from ${String(el.start.getHours()).padStart(2,'0')}:${String(el.start.getMinutes()).padStart(2,'0')} until ${String(el.end.getHours()).padStart(2,'0')}:${String(el.end.getMinutes()).padStart(2,'0')}

+ ${el.description} +
`; + }); +}); + +async function fetchCalendarData() { + // Define the API URL + const apiUrl = 'https://profile.thelab.ms/api/events'; + + // Make a GET request + return fetch(apiUrl) + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + var now = new Date(Date.now()); + var today = new Date(now.getFullYear(),now.getMonth(),now.getDate()); + data.forEach(element => { + var start = new Date(element.start * 1000); + var end = new Date(element.end * 1000); + var durationDay = new Date(start.getFullYear(),start.getMonth(), start.getDate()); + var diffTime = Math.abs(durationDay - today); + var diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); + element.start = start; + element.end = end; + element.daysUntil = diffDays; + }); + data = data.sort((a,b) => { + if (a.daysUntil > b.daysUntil) return 1; + else if (b.daysUntil > a.daysUntil) return -1; + else if (a.name > b.name) return -1; + else if (b.name > a.name) return 1; + return 0; + }); + return data; + }) + .catch(error => { + console.error('Error:', error); + }); + } \ No newline at end of file diff --git a/pages/calendar.md b/pages/calendar.md new file mode 100644 index 0000000..bc5f09f --- /dev/null +++ b/pages/calendar.md @@ -0,0 +1,16 @@ +--- +layout: basic +title: "Calendar" +date: 2018-11-28T15:15:34+10:00 +header_transparent: false +permalink: "/calendar/" +description: "Upcoming Events" +hero: + enabled: false + buttons: + enabled: false +--- + +
+ + \ No newline at end of file diff --git a/pages/home.md b/pages/home.md index 0e236be..5270fcd 100644 --- a/pages/home.md +++ b/pages/home.md @@ -83,23 +83,19 @@ projects: prevent_click: false outro: - enabled: false - align: center + enabled: true + align: right image: false - heading: Get Started Today - sub_heading: "Save time and money using this premium Jekyll theme." - features: - enabled: false - list: - - text: "Free Quote" - fa_icon: "fas fa-envelope-open-text" + heading: Next Few Events buttons: - enabled: true list: - - text: "Contact Us" - url: "/contact" + - text: "View The Full Calendar" + url: "/calendar" external: false - size: "large" + fa_icon: false + size: large # "small", "normal", "large" + outline: false + style: "light" # "light", "dark", "primary" posts: enabled: false diff --git a/pages/visit.md b/pages/visit.md index 36afa84..09929a2 100644 --- a/pages/visit.md +++ b/pages/visit.md @@ -19,7 +19,7 @@ All visitors, whether taking a class or maintain a regular membership, must comp ## Visting Us -We are open every Tuesday evening starting at 7pm for visitors to come to the lab, tour the facilities, and meet the leadership team. If that timing does not work with your schedule then [join our Discord Server](https://discord.thelab.ms/) and ask in the General channel about setting up another time. +We are open every Tuesday evening starting at 7pm for visitors to come to the lab, tour the facilities, and meet the leadership team. If that timing does not work with your schedule then [join our Discord Server](https://discord.thelab.ms/) and ask in the General channel about setting up another time. You can see all of our upcoming events [on our Calendar](/calendar). ### Until then...