자바스크립트로 달력관련 뭔가를 만들고자 할때 자주 사용하는 방법연구

우리가 흔히 보는 달력 형상의 솔루션들은 그 날짜를 계산하고 다루는 과정을 잘 이해해야 만들 수 있습니다.

코드를 작성하고 나름 그 동작을 설명하지요.

자바스크립트 코드를 활용해서 날짜라는 객체를 만든다면 그 것을 다루는 기술을 다루면 절반은 해낸 것으로 생각됩니다.

  {{ 
  var date = date || new Date(),
      month = date.getMonth(), 
      year = date.getFullYear(), 
      first = new Date(year, month, 1), 
      last = new Date(year, month + 1, 0),
      startingDay = first.getDay(), 
      thedate = new Date(year, month, 1 - startingDay),
      dayclass = lastmonthcss,
      today = new Date(),
      i, j; 
  if (mode === 'week') {
    thedate = new Date(date);
    thedate.setDate(date.getDate() - date.getDay());
    first = new Date(thedate);
    last = new Date(thedate);
    last.setDate(last.getDate()+6);
  } else if (mode === 'day') {
    thedate = new Date(date);
    first = new Date(thedate);
    last = new Date(thedate);
    last.setDate(thedate.getDate() + 1);
  }
  
  }}

 

위의 생성인자에 대한 설명을 참고해서 다음의 코멘트를 달 수 있습니다.

위의 코드는 JavaScript를 사용하여 달력을 생성하는 과정에 필요한 변수들을 설정하고 있습니다.

주어진 날짜에 기반하여 특정 달에 대한 정보를 계산하며, 일주일 혹은 하루에 대한 정보를 계산하는 경우도 고려하고 있습니다.

자세한 설명은 다음과 같습니다:

- `var date = date || new Date()`: 주어진 date 변수가 존재하면 date 변수를 사용하고, 그렇지 않으면 현재 날짜와 시간을 나타내는 새로운 Date 객체를 생성합니다.

- `month = date.getMonth()`: 월을 나타내는 0부터 11까지의 정수를 반환합니다.

즉, 1월은 0, 2월은 1, ..., 12월은 11을 반환합니다.

- `year = date.getFullYear()`: 4자리 연도를 반환합니다.

- `first = new Date(year, month, 1)`: 그 달의 첫 날을 나타내는 Date 객체를 생성합니다.

- `last = new Date(year, month + 1, 0)`: 그 달의 마지막 날을 나타내는 Date 객체를 생성합니다.

- `startingDay = first.getDay()`: 그 달의 첫 날의 요일을 반환합니다.
0은 일요일, 1은 월요일, ..., 6은 토요일을 나타냅니다.

- `thedate = new Date(year, month, 1 - startingDay)`: 달력에서 표시해야 할 첫 번째 날짜를 계산합니다.

달력의 첫 주에서 이전 달의 일부를 표시해야 하는 경우를 고려하고 있습니다.

- `dayclass = lastmonthcss`: 초기에는 이전 달의 날짜를 표시하는 CSS 클래스를 설정합니다.

- `today = new Date()`: 현재 날짜와 시간을 나타내는 새로운 Date 객체를 생성합니다.

이후 코드는 'week' 모드와 'day' 모드를 확인하여 `thedate`, `first`, `last` 변수를 다시 설정하는 부분입니다.

각각 주와 일 단위의 달력을 보여줄 때 필요한 날짜 정보를 계산하고 있습니다.

'week' 모드에서는 시작 요일을 주어진 날짜로, 마지막 요일을 주어진 날짜로부터 6일 뒤로 설정합니다.

'day' 모드에서는 시작 요일과 마지막 요일을 모두 주어진 날짜로 설정합니다.

이를 통해 주 또는 일 단위의 달력을 생성할 수 있습니다.