Vanilla Javascript 및 CSS 격자를 사용하여 신속한 응답 달력 만들기

본문에서, 나는 vanilla Javascript와 CSS 격자 레이아웃 개발 달력을 어떻게 사용하는지 보여 주려고 한다.다음 코드 펜은 최종 코드를 보여 줍니다.
개별 <div> 요소가 포함된 HTML 페이지부터 시작합니다.

<div data-app="calendar-app"></div>

우리는 자바스크립트를 사용하여 우리의 달력을 구축하고 보여줄 것이다. <div>Javascript 파일에서, 우리는 먼저 한 달의 그룹과 일주일에 며칠의 그룹을 정의합니다.

var months = ['January','February','March','April','May','June','July','August','September','October','November','December']; 
var daysOfWeek = ['S','M','T','W','TH','F','SA'];

애플리케이션 수준state 객체 스토리지에 표시되는 month 및 year우리는 현재 월과 년도로 대상state을 초기화한다.

var state = {
  month: new Date().getMonth(),
  year: new Date().getFullYear()
}

이제 datesForGrid 함수를 봅시다. 이것은 우리 응용 프로그램에서 가장 중요한 함수입니다.우리는 year 과 month 을 매개 변수로 전달하고, 함수는 42개의 항목을 포함하는 그룹을 되돌려 주어진 연도와 월의 7x6 날짜 격자를 채운다.month는 0 인덱스입니다.
함수의 첫머리에 날짜 항목을 저장하기 위해 빈 dates 그룹을 설명합니다.

//month is 0-indexed
function datesForGrid(year, month) {
  var dates= [];
  ...
}

firstDay 스토리지 월별 시작 요일

...
//Date.getDay() method is 0-indexed.
var firstDay = new Date(year, month).getDay();
...

firstDay의 값이 2이면 월이 화요일부터 시작됩니다(일요일=0, 월요일=1 등).
이어서 우리는 한 달에 모두 며칠이 있는지 알아야 한다

...
var totalDaysInMonth = new Date(year, month + 1, 0).getDate();
...

month값을 1 증가시키고 0 함수에 Date()date 매개 변수로 전달함으로써 우리는 이달의 마지막 날짜를 얻어 이달의 총 일수를 얻을 수 있다.
우리는 또 지난달의 총 일수에 대해 흥미를 느낀다.

...
var totalDaysInPrevMonth = new Date(year, month, 0).getDate();
...

마찬가지로 month 함수에서date 매개 변수의 현재0 값과 Date()를 전달함으로써 우리는 지난달의 마지막 날을 얻었다.
이제 우리는 dates수조를 채우기 시작한다.
우선, 우리는 달력에 지난달의 몇 개의 날짜를 표시해야 하는지 검사한다.예를 들어 현재 월이 화요일부터 시작한다면, 우리는 지난달의 두 날짜, 즉 일요일과 월요일을 표시해야 한다.
우리는 우선 dates 수조에 지난달의 항목을 추가했다.

...
// Days from prev month to show in the grid
for(var i = 1; i <= firstDay; i++) {
  var prevMonthDate = totalDaysInPrevMonth - firstDay + i;
  var key = new Date(state.year, state.month -1, prevMonthDate).toLocaleString();    
  dates.push({key: key, date: prevMonthDate, monthClass:'prev'});
}
...

dates 수조의 한 항목은 하나의 대상이다.우리는 key 속성을 저장합니다. 이것은 날짜의 문자열 표시 형식이고, date 는 숫자의 날짜 값이며, monthClass:'prev' 지시 날짜는 지난달에 속합니다.var prevMonthDate = totalDaysInPrevMonth - firstDay + i 객체의 date 속성에 저장할 숫자 날짜 값을 계산합니다.
현재 달이 2020년 9월이라고 가정하면 마지막 달은 2020년 8월이다.이 경우totalDaysInPrevMonth = 31.
2020년 9월 1일이 화요일이기 때문에firstDay = 2.따라서 prevMonthDate의i = 1값은 31 - 2 + 1 = 30일 것이다.
따라서 2020년 9월dates수조의 앞의 두 항목은 다음과 같다.

//Example for September 2020
dates[0] = {key: '8/30/2020, 12:00:00 AM', date: 30, monthClass: 'prev'};
dates[1] = {key: '8/31/2020, 12:00:00 AM', date: 31, monthClass: 'prev'};

다음에 우리는 그 달의 항목으로 dates수조를 채운다.

...
// Days of the current month to show in the grid
var today = new Date();
for(var i = 1; i <= totalDaysInMonth; i++) {
  var key = new Date(state.year, state.month, i).toLocaleString();
  if(i === today.getDate() && state.month === today.getMonth() && state.year === today.getFullYear()) {
    dates.push({key: key, date: i, monthClass: 'current', todayClass: 'today'});
  } else{ 
    dates.push({key: key, date: i, monthClass: 'current'});
  }
}
...

오늘 날짜에 사용할 추가 속성todayClass:'today'을 추가했습니다.
따라서 2020년 9월 1일dates 어레이는 다음과 같습니다.

//Example for September 2020
...
dates[2] = {key: '9/1/2020, 12:00:00 AM', date: 1, monthClass: 'current', todayClass:'current'};
dates[3] = {key: '9/2/2020, 12:00:00 AM', date: 2, monthClass: 'current'};
...

표시할 달의 모든 항목을 추가한 후, 격자에 남은 공간이 있는지 확인합니다.만약 dates 수조의 크기가 42보다 작다면, 우리는 dates 수조에 다음 달의 날짜를 입력합니다.

...
var gridsize = 42;
// If there is space left over in the grid, then show the dates for the next month
if(dates.length < gridsize) {
  var count = gridsize - dates.length;
  for(var i = 1; i <= count; i++) {
    var key = new Date(state.year, state.month + 1, i).toLocaleString();
    dates.push({key: key, date: i, monthClass:'next'});
  }
}
...

render() 함수는 웹 페이지에 달력을 보여주는 것을 책임진다.

function render() {  
  var calendarApp = document.querySelector('[data-app=calendar-app]');
  // Building the calendar app HTML from the data
  calendarApp.innerHTML = `
    <div class="calendar-nav">
      <button id="prev-month">Previous</button>
      <h2>${months[state.month]} ${state.year}</h2>
      <button id="next-month">Next</button>
    </div>
    <div class='calendar-grid'>
      ${ daysOfWeek.map(day => `<div>${day}</div>` ).join('') }
      ${ datesForGrid(state.year, state.month).map(date => `<div id="${date.key}" class="${date.monthClass} ${date.todayClass ? date.todayClass : ''}">${date.date}</div>`).join('') }
    </div>
  `;
}

.calendar-grid css 클래스는 달력에 간단한 격자 레이아웃을 정의합니다.각 메쉬 셀은 하나입니다<div>.다음은 HTML 렌더링의 예입니다.

<div class='calendar-nav'>
  <button id="prev-month">Previous</button>
  <h2>September 2020</h2>
  <button id="next-month">Next</button>
</div>
<div class='calendar-grid'>
  ...
  <div id="8/31/2020, 12:00:00 AM" class="prev">31<div>
  <div id="9/1/2020, 12:00:00 AM" class="current today">1<div>
  <div id="9/2/2020, 12:00:00 AM" class="current">2<div>
  <div id="9/3/2020, 12:00:00 AM" class="current">3<div>
  ...
  <div id="10/1/2020, 12:00:00 AM" class="next">1<div> 
  ...
</div>

showCalendar() 함수는 주요한 입구점이다.그것은 숫자 매개 변수prevNextIndicator가 필요하다.

//valid prevNextIndicator values
-1 = previous month
0 = current month
1 = next month

showCalendar() 함수는 state의 값 설정prevNextIndicator 변수에 따라 render() 함수를 호출한다

function showCalendar(prevNextIndicator) {
  var date = new Date(state.year, state.month + prevNextIndicator);
  //Update the state
  state.year = date.getFullYear();
  state.month = date.getMonth();  
  render();
}

// Show the current month by default
showCalendar(0);

마지막으로 이전 (<) 및 다음 (>) 단추를 위한 이벤트 탐지기를 추가합니다.

document.addEventListener('click', function(ev) {
  if(ev.target.id === 'prev-month') {
    showCalendar(-1);
  }
  if(ev.target.id === 'next-month') {
    showCalendar(1);
  }
});

이것은 우리의 달력이다.100줄의 자바스크립트 코드와 몇 줄의 CSS를 사용하지 않고 기능이 모두 갖추어진 달력을 만들었습니다.