Skip to content

Commit

Permalink
calendar integration
Browse files Browse the repository at this point in the history
  • Loading branch information
trayburn committed Feb 3, 2024
1 parent 5505f12 commit 2e30511
Show file tree
Hide file tree
Showing 7 changed files with 147 additions and 22 deletions.
10 changes: 8 additions & 2 deletions _data/menu.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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: /
Expand All @@ -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
Expand Down
9 changes: 3 additions & 6 deletions _includes/framework/info.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ <h2>{{ heading }}</h2>
{% endfor %}
</ul>
{% endif %}
<div id="calendar" class="list-group"></div>
<script type="text/javascript" src="{{ '/assets/js/calendar-short.js' | relative_url }}"></script>
{% if buttons.list.size > 0 %}
<div class="info-buttons mt-2">
{% for button in buttons.list %}
Expand All @@ -43,11 +45,6 @@ <h2>{{ heading }}</h2>
</div>
</div>

<div class="col-12 {% if image and align == 'center' %}col-md-10 mt-3{% else %}col-md-6{% endif %} {% if align == 'left' %}order-2 mt-3 mt-md-0{% elsif align == 'right' %}order-1{% elsif align == 'center' %}{% endif %}">
{% if image %}
<img width="{% if align == 'center' %}1280{% else %}640{% endif %}" height="{% if align == 'center' %}720{% else %}360{% endif %}" alt="{{ heading }}" class="img-fluid" src="{{ image | relative_url }}"/>
{% endif %}
</div>


</div>
</div>
55 changes: 55 additions & 0 deletions assets/js/calendar-short.js
Original file line number Diff line number Diff line change
@@ -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 += `<div class="list-group-item">
<div class="d-flex w-100 justify-content-between">
<h2 class="mb-1">${el.name}</h5>
<small>in ${el.daysUntil} days</small>
</div>
<p class="mb-1 ${el.membersOnly ? "text-bg-warning" : "text-bg-success"}">${el.membersOnly ? "Members Only" : "Open To The Public"}</p>
<p class="mb-1">${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')}</p>
<small>${el.description}</small>
</div>`;
});
});

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);
});
}
55 changes: 55 additions & 0 deletions assets/js/calendar.js
Original file line number Diff line number Diff line change
@@ -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 += `<div class="list-group-item">
<div class="d-flex w-100 justify-content-between">
<h2 class="mb-1">${el.name}</h5>
<small>in ${el.daysUntil} days</small>
</div>
<p class="mb-1 ${el.membersOnly ? "text-bg-warning" : "text-bg-success"}">${el.membersOnly ? "Members Only" : "Open To The Public"}</p>
<p class="mb-1">${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')}</p>
<small>${el.description}</small>
</div>`;
});
});

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);
});
}
16 changes: 16 additions & 0 deletions pages/calendar.md
Original file line number Diff line number Diff line change
@@ -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
---

<div id="calendar" class="list-group"></div>

<script type="text/javascript" src="{{ '/assets/js/calendar.js' | relative_url }}"></script>
22 changes: 9 additions & 13 deletions pages/home.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion pages/visit.md
Original file line number Diff line number Diff line change
Expand Up @@ -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...
<div class="list-group">
Expand Down

0 comments on commit 2e30511

Please sign in to comment.