All that Walmart work and they can't even launch tomorrow.... finished up the work for the Basic/3P user groups. Was then told these learners need to be able to buy courses, which isn't possible with their current configuration. Backing up the files to git anyway, just in case.
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,325 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user