feat(events): Add script to fetch and display Zoho calendar events
This commit introduces a new script that fetches and normalizes event data from Zoho Calendar using OAuth2. The script makes an API call to retrieve calendar events for the current month. The event data is then processed and formatted to be used by a Nunjucks template. Key Changes: - test(dummy-data): Created a dummy calendar and dummy events for development and testing. - feat(events): Added a new script to fetch event data from Zoho Calendar. - feat(oauth2): Implemented OAuth2 authentication for secure API access. - refactor(data): Normalized the fetched data payload for consistency. - feat(ui): Integrated the normalized data with a Nunjucks template to dynamically populate "event cards" on the community events page.
This commit is contained in:
@@ -1,90 +1,143 @@
|
||||
/* |--↓-↓-↓ Start Community.html ↓-↓-↓--| */
|
||||
#community-page {
|
||||
.community {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
width: 95vh;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
#community-page h1 {
|
||||
font-size: 1.6rem;
|
||||
background-color: #96baa0;
|
||||
border: solid #f7f7f7;
|
||||
h1 {
|
||||
display: block;
|
||||
font-size: 2.3rem;
|
||||
background-color: #f7f7f7;
|
||||
border: solid #96baa0;
|
||||
border-radius: 15px;
|
||||
width: 50vw;
|
||||
color: #f7f7f7;
|
||||
color: #014038;
|
||||
text-decoration: underline;
|
||||
text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */
|
||||
-0.5px -0.5px 1px #014038, /* Top-left base shadow */
|
||||
-0.5px 0.5px 1px #014038, /* Bottom-left base shadow */
|
||||
0.5px -0.5px 1px #014038; /* Top-right base shadow */
|
||||
padding: 5px 10px;
|
||||
padding: 5px 100px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#calendar-events-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.calendar iframe{
|
||||
width: 80vw;
|
||||
height: auto;
|
||||
width: 975px;
|
||||
height: 750px;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #bdd4da;
|
||||
border-radius: 15px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.upcoming-events {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.events {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #f0c06d;
|
||||
border: solid #014038;
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
width: 95vw;
|
||||
width: 80vw;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.events h2 {
|
||||
font-size: 1.875rem;
|
||||
text-align: center;
|
||||
text-shadow: 0.5px 0.5px .5px #014038, /* Bottom-right top shadow */
|
||||
-0.5px -0.5px .5px #014038, /* Top-left top shadow */
|
||||
-0.5px 0.5px .5px #014038, /* Bottom-left top shadow */
|
||||
0.5px -0.5px .5px #014038; /* Top-right top shadow */
|
||||
color: #f7f7f7;
|
||||
background-color: #96baa0;
|
||||
border: solid #f7f7f7;
|
||||
border-radius: 15px;
|
||||
padding: 10px 15px;
|
||||
width: 50vw;
|
||||
text-decoration: underline;
|
||||
font-weight: bold;
|
||||
font-size: 1.4rem;
|
||||
text-align: center;
|
||||
margin-left: 20vw;
|
||||
transform: translateY(-6vh);
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: fit-content;
|
||||
padding: 0 50px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.events h3 {
|
||||
background-color: #96baa080;
|
||||
border: solid #bdd4da;
|
||||
border-radius: 15px;
|
||||
padding: 5px 10px;
|
||||
width: 50vw;
|
||||
text-decoration: underline;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
.upcoming-events {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-left: 20vw;
|
||||
transform: translateY(-5vh);
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
background-color: #CADCD0;
|
||||
border: solid #014038;
|
||||
border-radius: 15px;
|
||||
padding: 0px 20px 10px 20px;
|
||||
width: 95%;
|
||||
margin-top: 20px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
|
||||
}
|
||||
|
||||
.events p {
|
||||
transform: translateY(-5vh);
|
||||
.zoho-event {
|
||||
background-color:#f7f7f7;
|
||||
border: solid #014038 2px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8);
|
||||
max-width: 1200px;
|
||||
|
||||
}
|
||||
|
||||
.zoho-event h3 {
|
||||
font-size: 1.875rem;
|
||||
text-align: center;
|
||||
text-shadow: 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */
|
||||
-0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */
|
||||
-0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */
|
||||
0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */
|
||||
color: #014038;
|
||||
background-color: #bdd4da;
|
||||
border: solid #f7f7f7;
|
||||
border-radius: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: fit-content;
|
||||
padding: 0 50px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.zoho-event p {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.display-date, .location, .add-events {
|
||||
font-weight: heavy;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1.3rem;
|
||||
width: 80%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.event-list ul {
|
||||
list-style-type: none;
|
||||
transform: translateY(-5vh);
|
||||
|
||||
}
|
||||
|
||||
.event-list li {
|
||||
|
||||
Reference in New Issue
Block a user