캘린더 위젯은 이벤트 관련 웹사이트에서 가장 중요한 구성 요소입니다. 사용자가 특정 요일이나 날짜의 일정이나 이벤트 정보를 볼 수 있도록 도와줍니다. 이 외에도 달력은 날짜 선택기, 이벤트 스케줄러 또는 범용 달력 위젯 프로젝트에서도 사용됩니다. 캘린더 위젯을 구현해야 하는 프로젝트를 진행 중이라면 잘 찾아오셨습니다. 지난 튜토리얼에서 우리는 배웠습니다.

이 튜토리얼에서는 HTML, CSS 및 JavaScript로 캘린더를 만드는 방법을 설명합니다.


필요에 따라 디자인할 수 있는 달력이 반드시 필요합니다. 따라서 프로젝트에 에셋을 추가하여 캘린더 위젯을 만드는 것뿐만 아니라 사용자 정의에 중점을 둘 것입니다. 기본적으로 이 캘린더 위젯은 순전히 JavaScript로 작성되었으므로 라이브러리나 플러그인이 필요하지 않습니다. 어쨌든 일정 탐색 키에 Font Awesome CSS를 사용합니다.

HTML을 시작하기 전에 아래에 제공된 데모 페이지를 확인하여 캘린더 작동 방식을 확인하는 것이 좋습니다. 원하는 대로 레이아웃, 현재 날짜, 비활성화된 날짜 및 다음/이전 버튼 탐색을 고도로 사용자 정의할 수 있습니다.

HTML 구조

HTML에서 기본 브라우저의 HTML 요소 서식을 지우려면 CSS 재설정을 로드합니다. 마찬가지로 웹 페이지의 헤드 태그에 다음 CDN 링크를 추가하여 Robotofonts and Font Awesome CSS(아이콘용)를 로드합니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />

달력을 동적으로 렌더링할 div 요소가 필요합니다. 따라서 클래스 이름이 "softcard"인 div 요소를 만들고, 다음/이전 버튼을 배치하고, 내부에 id가 "soft-btn"인 div 요소를 배치합니다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<div class="softcard">
  <div class="calendar-bar">
    <button class="prev soft-btn"><i class="fas fa-chevron-left"></i></button>
    <div class="current-month"></div>
    <button class="next soft-btn"><i class="fas fa-chevron-right"></i></button>
  </div>
  <div class="calendar">
    <div class="weekdays-name">
      <div class="days-name">Sa</div>
      <div class="days-name">Su</div>
      <div class="days-name">Mo</div>
      <div class="days-name">Tu</div>
      <div class="days-name">We</div>
      <div class="days-name">Th</div>
      <div class="days-name">Fr</div>
    </div>
    <div class="calendar-days"></div>
  </div>
  <div class="goto-buttons">
    <button type="button" class="btn prev-year">Prev Year</button>
    <button type="button" class="btn today">Today</button>
    <button type="button" class="btn next-year">Next Year</button>
  </div>
</div>

캘린더 위젯을 생성하려는 웹페이지/앱의 아무 곳에나 위의 HTML 구조를 배치할 수 있습니다.

캘린더용 CSS 스타일 만들기

HTML로 소프트 카드를 만든 후 이제 캘린더 레이아웃의 스타일을 지정할 차례입니다. 따라서 "calendar-bar"클래스를 선택하고 너비, 배경, 패딩 및 테두리 속성을 다음과 같이 정의합니다. 선택에 따라 사용자 지정 배경색을 설정할 수 있습니다.

<style>
* {
  margin: 0;  padding: 0;}

body {
  height: 100vh;  background: #ddd;  display: flex;  justify-content: center;
  align-items: center;  font-family: "Quicksand", sans-serif;  user-select: none;
}

.softcard {  width: 316px;  height: fit-content;
  background: -webkit-linear-gradient(to right, #f7b733, #fc4a1a);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #f7b733, #fc4a1a); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 20px;  box-shadow: 0px 0px 10px #000;
}

.calendar-bar {  display: flex;  justify-content: space-between;
  align-items: center;  padding: 20px;  padding-bottom: 15px;
  border-bottom: 19px;
}

.calendar-bar > .current-month {
  font-size: 20px;  font-weight: bold;  color: #ddd;
  background:#000;  padding:5px;  border-radius:10px;
}

.calendar-bar > [class$="soft-btn"] {
  width: 40px;  aspect-ratio: 1;  text-align: center;
  line-height: 40px;  font-size: 14px;  color: #000;
  background: #ddd;  border: none;  border-radius: 50%;
}

.weekdays-name,
.calendar-days {  display: flex;  flex-wrap: wrap;  padding-inline:18px;}
.weekdays-name {  padding-top: 12px;}

.calendar-days {  padding-bottom: 12px;}

.days-name,
[class$="-day"] {  width: 40px;  height: 40px;  color: #000;  text-align: center;
  line-height: 40px;  font-weight: 500;  font-size: 1rem;
}

.days-name {  color: #fff;  font-weight: 700;}

.current-day {
  background-color: #000;  color: #fff;
  border-radius: 50%;  font-weight: 700;  transition: 0.5s;  cursor: pointer;
}

.padding-day {
  color: #a5a5a5;  user-select: none;
}

.calendar-bar > [class$="soft-btn"]:hover,
.month-day:hover,
.btn:hover {
  border-radius:5px;  background-color:#f8f7fa;  color:#000;  border-radius:15px;
  transition: 0.1s;  cursor: pointer;

}

.calendar-bar > [class$="soft-btn"]:focus,
.month-day:focus,
.btn:focus {  border-radius:15px;  background-color: #000;  color: #ddd;
}

.goto-buttons {
  border-top: solid 2px yellow;  padding-block: 18px;  display: flex;
  justify-content: space-evenly;
}

.btn {
  background: #eee  border: none;  border-radius: 10px;
  padding: 11px 13px;  color:#000;  font-family: "Quicksand", sans-serif;
  font-weight: 600;  font-size: 0.9rem;  margin-right: 1px;  box-shadow: 0px 0px 0px #000;
}

</style>

자바스크립트 함수

이제 모든 것이 준비되었습니다. 마지막으로 달력 JavaScript 기능을 프로젝트에 추가하기만 하면 됩니다. 따라서 body 태그를 닫기 전에 script 태그 사이에 다음 코드를 추가합니다.

더 많은 기능을 추가해야 하는 경우 그에 따라 코드를 수정할 수 있습니다. 각 변수, 객체, 함수의 용도가 할당되어 있어 달력 함수가 하는 일을 쉽게 이해할 수 있습니다.

자바스크립트 코드:

var currentMonth = document.querySelector(".current-month");
var calendarDays = document.querySelector(".calendar-days");
var today = new Date();
var date = new Date();
currentMonth.textContent = date.toLocaleDateString("en-US", {month:'long', year:'numeric'});
today.setHours(0,0,0,0);
renderCalendar();
function renderCalendar(){
    const prevLastDay = new Date(date.getFullYear(),date.getMonth(),0).getDate();
    const totalMonthDay = new Date(date.getFullYear(),date.getMonth()+1,0).getDate();
    const startWeekDay = new Date(date.getFullYear(),date.getMonth(),1).getDay();
    calendarDays.innerHTML = "";
    let totalCalendarDay = 6 * 7;
    for (let i = 0; i < totalCalendarDay; i++) {
        let day = i-startWeekDay;
        if(i <= startWeekDay){
            // adding previous month days
            calendarDays.innerHTML += `<div class='padding-day'>${prevLastDay-i}</div>`;
        }else if(i <= startWeekDay+totalMonthDay){
            // adding this month days
            date.setDate(day);
            date.setHours(0,0,0,0);           
            let dayClass = date.getTime()===today.getTime() ? 'current-day' : 'month-day';
            calendarDays.innerHTML += `<div class='${dayClass}'>${day}</div>`;
        }else{
            // adding next month days
            calendarDays.innerHTML += `<div class='padding-day'>${day-totalMonthDay}</div>`;
        }    }}
document.querySelectorAll(".soft-btn").forEach(function (element) {
    element.addEventListener("click", function () {
        date = new Date(currentMonth.textContent);
        date.setMonth(date.getMonth() + (element.classList.contains("prev") ? -1 : 1));
        currentMonth.textContent = date.toLocaleDateString("en-US", {month:'long', year:'numeric'});
        renderCalendar();
    });});
document.querySelectorAll(".btn").forEach(function (element) {
    element.addEventListener("click", function () {
        let btnClass = element.classList;
        date = new Date(currentMonth.textContent);
        if(btnClass.contains("today"))
            date = new Date();
        else if(btnClass.contains("prev-year"))
            date = new Date(date.getFullYear()-1, 0, 1);
        else
            date = new Date(date.getFullYear()+1, 0, 1);
        currentMonth.textContent = date.toLocaleDateString("en-US", {month:'long', year:'numeric'});
        renderCalendar();
    });
});

이 기사를 통해 만드는 방법을 배웠기를 바랍니다. 어려운 점이 있으면 아래에서 논의하여 알려주십시오.
공식 웹사이트Create a Calendar in HTML and CSS에서 자세히 읽어보세요.

보기 위해DEMO

좋아요와 팔로우를 잊지 말고 더 멋진 튜토리얼을 배워보세요😉