DEV Community

Elayaraja Subramanian
Elayaraja Subramanian

Posted on

Need help to show a calendar on a weekly basis

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();
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

I'd appreciate any help.

Top comments (0)