매주 달력을 표시하는 데 도움이 필요합니다.
저는 일주일 동안만 표시되는 이벤트 달력이 필요한 프로젝트를 진행 중입니다. 또한 이전 주와 다음 주를 탐색할 수 있는 버튼이 있습니다. 월별 보기에 대한 코드를 작성한 자바스크립트 코드를 첨부했습니다(이벤트가 첨부되지 않음). 아래 코드를 약간 수정해야 하지만 프론트 엔드 개발의 초보자이기 때문에 요구 사항을 충족할 수 없습니다.
JS 코드:
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>
도움을 주시면 감사하겠습니다.
Reference
이 문제에 관하여(매주 달력을 표시하는 데 도움이 필요합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/elayarajasubramanian/need-help-to-show-a-calendar-on-a-weekly-basis-lo7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)