Hi techies,
I am working on a project which needs a calendar of events to be shown only for a week. Also, there will be buttons to navigate to previous weeks and next weeks. I have attached the javascript code which I wrote code for the monthly view (without any events attached to it). I need to make a few tweaks to the below code but since I am a beginner to the front-end devlopment, I can't able to fulfill the requirement.
JS Code:
const date = new Date();
const loadCalendar = () => {
date.setDate(1);
const monthDays = document.querySelector('.dashboard__calendar-dates');
const lastDay = new Date(date.getFullYear(), date.getMonth()+1,0).getDate();
const prevDay = new Date(date.getFullYear(), date.getMonth(),0).getDate();
const firstDayIndex = date.getDay();
const lastDayIndex = new Date(date.getFullYear(), date.getMonth()+1,0).getDay();
const nextDays = 7 - lastDayIndex-1;
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
const daysName = [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
];
const dayNumber = new Date();
document.querySelector('.dashboard__calendar-h4-edit').innerHTML = months[date.getMonth()]+` <span id="year">`+date.getFullYear()+`<span>`;
let days = "";
for (let x = firstDayIndex; x>0; x--){
days += `<p id="dashboard__calendar-prevdays">${prevDay-x+1}</p>`;
}
for (let i=1; i<=lastDay; i++){
if(i===new Date().getDate()&& date.getMonth()=== new Date().getMonth()){
days += `<p class="active">${i}</p>`;
}else{
days += `<p>${i}</p>`;
monthDays.innerHTML = days;
}
}
for (let j=1; j<=nextDays; j++){
days += `<p id="dashboard__calendar-nextdays">${j}</p>`;
monthDays.innerHTML = days;
}
}
loadCalendar();
HTML:
<div class="dashboard__calendar-edit">
<div class="dashboard__calendar-container">
<div class="dashboard__calendar-layout">
<div class="dashboard__calendar-top">
<h4 class="dashboard__calendar-h4-edit"></h4>
<div class="dashboard__calendar-buttons">
<a href="#" class="dashboard__calendar-prev-btn"><i class="fas fa-chevron-left"></i></a>
<a href="#" class="dashboard__calendar-next-btn"><i class="fas fa-chevron-right"></i></a>
</div>
</div>
<div class="dashboard__calendar-data">
<div class="dashboard__calendar-days dashboard__calendar-daysname">
<p>Sun</p>
<p>Mon</p>
<p>Tue</p>
<p>Wed</p>
<p>Thu</p>
<p>Fri</p>
<p>Sat</p>
</div>
<div class="dashboard__calendar-days dashboard__calendar-dates">
</div>
</div>
</div>
</div>
</div>
I'd appreciate any help.
Top comments (0)