326 lines
7.6 KiB
Plaintext
326 lines
7.6 KiB
Plaintext
<script>
|
|
const training_eventsArr=[];
|
|
</script>
|
|
{% for training_event in training_events.available %}
|
|
{% for session in training_event.sessions %}
|
|
<script>
|
|
training_eventsArr.push("{{ session.day }}{{ session.month }}{{ session.year }}");
|
|
//console.log("{{ training_event.title }} {{ session.day }} {{ session.month }} {{ session.year }}" )
|
|
</script>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
|
|
|
|
|
|
<div class="calFrame">
|
|
<div class="container">
|
|
<div class="calendar">
|
|
<header>
|
|
<pre class="left">◀</pre>
|
|
|
|
<div class="header-display">
|
|
<p class="display">""</p>
|
|
</div>
|
|
|
|
<pre class="right">▶</pre>
|
|
|
|
</header>
|
|
|
|
<div class="week">
|
|
<div>Su</div>
|
|
<div>Mo</div>
|
|
<div>Tu</div>
|
|
<div>We</div>
|
|
<div>Th</div>
|
|
<div>Fr</div>
|
|
<div>Sa</div>
|
|
</div>
|
|
<div class="days"></div>
|
|
</div>
|
|
<div class="divToday">Today</div>
|
|
<!--<div class="display-selected">
|
|
<p class="selected"></p>
|
|
</div>-->
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/*variables*/
|
|
:root {
|
|
--white: #ffff;
|
|
--main: #3C228A;
|
|
--accent: #211D44;
|
|
--accent-2: #ebedf0;
|
|
}
|
|
|
|
/*styles*/
|
|
.divToday:hover {
|
|
cursor: pointer;
|
|
}
|
|
.divToday {
|
|
background-color: var(--accent);
|
|
color: var(--white);
|
|
font-weight: 700;
|
|
padding: 4px;
|
|
border-radius: 6px;
|
|
}
|
|
.calFrame {
|
|
background-color: var(--white);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: sans-serif;
|
|
}
|
|
.days {
|
|
height: 144px;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
background-color: var(--white);
|
|
border-radius: 35px;
|
|
border: 1px solid;
|
|
padding: 1em;
|
|
height: 265px;
|
|
width: 280px;
|
|
flex-wrap: nowrap;
|
|
flex-direction: column;
|
|
align-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
header {
|
|
margin: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
/* padding: 4px; */
|
|
width: 230px;
|
|
}
|
|
.header-display {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-display p {
|
|
color: var(--accent);
|
|
margin: 5px;
|
|
font-size: 1.2rem;
|
|
word-spacing: 0.5rem;
|
|
}
|
|
|
|
.left {
|
|
padding: 10px;
|
|
margin: 0;
|
|
cursor: unset;
|
|
font-size: 1.2rem;
|
|
color: var(--accent);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.right {
|
|
padding: 10px;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
font-size: 1.2rem;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.days, .week {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
margin: auto;
|
|
/* padding: 0px 20px; */
|
|
justify-content: space-between;
|
|
width: 210px;
|
|
}
|
|
.week div, .days div {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
border-radius: 100%;
|
|
}
|
|
.days div:hover {
|
|
background: var(--accent-2);
|
|
color: rgb(25, 25, 201);
|
|
cursor: pointer;
|
|
}
|
|
.week div {
|
|
opacity: 0.5;
|
|
}
|
|
.current-date {
|
|
background-color: var(--accent);
|
|
color: var(--white);
|
|
}
|
|
|
|
.has-event {
|
|
background-color: var(--main);
|
|
color: var(--white);
|
|
}
|
|
.display-selected {
|
|
margin-bottom: 10px;
|
|
padding: 20px 20px;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
const montharr = ["January","February","March","April","May","June","July","August","September","October","November","December"];
|
|
let display = document.querySelector(".display");
|
|
let days = document.querySelector(".days");
|
|
let previous = document.querySelector(".left");
|
|
let next = document.querySelector(".right");
|
|
let selected = document.querySelector(".selected");
|
|
let today = document.querySelector(".divToday");
|
|
|
|
let date = new Date();
|
|
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth();
|
|
|
|
// Main function to render Calendar
|
|
function displayCalendar() {
|
|
const firstDay = new Date(year, month, 1);
|
|
|
|
const lastDay = new Date(year, month + 1, 0);
|
|
|
|
const firstDayIndex = firstDay.getDay(); //4
|
|
|
|
const numberOfDays = lastDay.getDate(); //31
|
|
|
|
|
|
let formattedDate = montharr[firstDay.getMonth()]+" " +firstDay.getFullYear().toString();
|
|
|
|
display.innerHTML = `${formattedDate}`;
|
|
|
|
for (let x = 1; x <= firstDayIndex; x++) {
|
|
const div = document.createElement("div");
|
|
div.innerHTML += "";
|
|
|
|
days.appendChild(div);
|
|
}
|
|
//console.log("In Display " + month + " Year " + year);
|
|
for (let i = 1; i <= numberOfDays; i++) {
|
|
let div = document.createElement("div");
|
|
let currentDate = new Date(year, month, i);
|
|
|
|
div.dataset.date = currentDate.getDate().toString()+montharr[currentDate.getMonth()]+currentDate.getFullYear().toString();
|
|
|
|
|
|
div.innerHTML += i;
|
|
days.appendChild(div);
|
|
if (
|
|
currentDate.getFullYear() === new Date().getFullYear() &&
|
|
currentDate.getMonth() === new Date().getMonth() &&
|
|
currentDate.getDate() === new Date().getDate()
|
|
)
|
|
{
|
|
div.classList.add("current-date");
|
|
}
|
|
if (training_eventsArr.includes(div.dataset.date))
|
|
{
|
|
div.classList.add("has-event");
|
|
|
|
div.outerHTML="<a href='app/training_events' style='text-decoration: none;' target='_blank'>"+div.outerHTML+"</a>";
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// Call the function to display the calendar
|
|
displayCalendar();
|
|
|
|
//Today Event Listener
|
|
today.addEventListener("click", () => {
|
|
days.innerHTML = "";
|
|
date = new Date();
|
|
year = date.getFullYear();
|
|
month = date.getMonth();
|
|
document.querySelector(".left").style.color = "var(--accent)";
|
|
document.querySelector(".left").style.opacity="0.5";
|
|
document.querySelector(".left").style.cursor="unset";
|
|
displayCalendar();
|
|
|
|
});
|
|
|
|
|
|
//Previous Event Listener
|
|
previous.addEventListener("click", () => {
|
|
|
|
if ( year === new Date().getFullYear() && month === new Date().getMonth() )
|
|
{
|
|
|
|
return; //Skip the Previous if it is Current Month as thie is for Upcoming Events
|
|
}
|
|
days.innerHTML = "";
|
|
//selected.innerHTML = "";
|
|
//console.log("Before Pre set " + month + " Year " + year);
|
|
if (month < 0) {
|
|
month = 11;
|
|
year = year - 1;
|
|
}
|
|
|
|
month = month - 1;
|
|
date.setMonth(month);
|
|
displayCalendar();
|
|
//console.log("after Pre set " + month + " Year " + year);
|
|
|
|
//Disable Previous if the current Display Month is same as today Month as thie is for Upcoming Events
|
|
if (year === new Date().getFullYear() && month === new Date().getMonth() )
|
|
{
|
|
document.querySelector(".left").style.color = "var(--accent)";
|
|
document.querySelector(".left").style.opacity="0.5";
|
|
document.querySelector(".left").style.cursor="unset";
|
|
|
|
}
|
|
//displaySelected();
|
|
});
|
|
|
|
//Next Button event listener
|
|
next.addEventListener("click", () => {
|
|
days.innerHTML = "";
|
|
//selected.innerHTML = "";
|
|
//console.log("Before Next set " + month + " Year " + year);
|
|
if (month >= 11) {
|
|
month = -1;
|
|
year = year + 1;
|
|
}
|
|
|
|
month = month + 1;
|
|
date.setMonth(month);
|
|
|
|
displayCalendar();
|
|
//console.log("After Next set " + month + " Year " + year);
|
|
|
|
if ( year === new Date().getFullYear() && month+1 === new Date().getMonth()+1 )
|
|
{
|
|
|
|
document.querySelector(".left").style.color = "var(--accent)";
|
|
document.querySelector(".left").style.opacity="0.5";
|
|
document.querySelector(".left").style.cursor="unset";
|
|
|
|
}
|
|
else { //Enable Previous Buttom if the current display month is not currnet month
|
|
document.querySelector(".left").style.color = "var(--accent)";
|
|
document.querySelector(".left").style.opacity="100";
|
|
document.querySelector(".left").style.cursor="pointer";
|
|
|
|
}
|
|
// displaySelected();
|
|
});
|
|
|
|
//Currently not in Use
|
|
function displaySelected() {
|
|
const dayElements = document.querySelectorAll(".days div");
|
|
dayElements.forEach((day) => {
|
|
day.addEventListener("click", (e) => {
|
|
const selectedDate = e.target.dataset.date;
|
|
selected.innerHTML = `Selected Date : ${selectedDate}`;
|
|
});
|
|
});
|
|
}
|
|
displaySelected();
|
|
</script>
|