시작

달력을 설치할 때, 나는 많은 프로그램 라이브러리를 찾았지만, 월요일에 시작하는 것이 없고, 요구에 적합한 물건을 찾지 못했다.
라이브러리를 찾아도 스타일 조정이 쉬워요. 여러 가지 걱정이 있어서 결국 자기가 만들었어요. 그때는 어떻게 설치했나요.

구현 방법

대충 말하면 아래의 절차에 따라 설치한 것이다.자세한 내용은 다음을 수행합니다.

달력 목록 생성

지난달 표시된 날짜 생성

이달 날짜 생성

다음 달에 볼 수 있는 날짜 생성

달력 목록에 따른 데이터

지난달 표시된 날짜 생성

갑자기 죄송합니다. 여기가 가장 어려운 곳입니다.이곳을 통과할 수 있다면 그 다음은 쉬울 테니 힘내세요.

미리 알다

우선, 자주 사용하기 때문에 아래와 같이 최초의 날짜와 마지막 날짜를 얻을 수 있다는 것을 기억하시기 바랍니다.JavaScript의 Date형은 날짜 변경에서 의외로 변통 작용을 하여 범위 밖의 수치를 넣으면 전월로 거슬러 올라가거나 다음 달에 들어가서 계산할 수 있다.0이면 하루가 빨라서 지난달의 마지막 날이다.
이달 첫날: new Date(year, month)//day 없음(1 추가 가능)
지난달 마지막 날: new Date(year, month, 0)/day 더하기 0

위의 그림에도 getDay() 일요일에 대한 0은 시작되고 이후 월, 화, 물, 나무, 금, 흙의 순서에 따라 수치가 상승한다고 적혀 있다.그림은 화요일이어서 2로 돌아갑니다.
이 방법도python이 있는데, 비교적 일반적이라고 생각하기 때문에 바로 이것을 사용합니다.

채워야 할 일수 계산

여기서부터는 어렵지만 처음 나타난 요일을 고려해 지난달에 채워야 할 일수를 구한다.
우선 일요일부터 간단히 고려하면 이 경우 이달부터 구한 getDay() 수치는 직접 메워야 할 일수에 해당한다.화요일이면 2로 돌아가서 이틀을 기입하면 됩니다.
다음은 월요일부터 고려하겠습니다.하루를 벗어났기 때문에 아까의 예에 따라 하루를 채우면 된다.요일의 표현은 0, 1, 2로 표시하면 월요일은 1이다. 나는 이 수를 줄이면 구할 수 있다고 생각한다.구체적으로 시작 주 변수를 offset 로 설정하면 getDay() - offset 을 구할 수 있다.
화요일부터 똑같이 하면 수요일부터 생각해 달라고 부탁했기 때문이다.getDay() - offset로 계산하면 -1 잘 구할 수 없다.하지만 일주일이 늘어난 것을 감안하면 7을 더하면 결과는 6으로 바뀌어 채워야 할 일수를 잘 찾는다.
반대쪽 값으로 이동하여 설치%를 하면 잘 완성되고, (7 + getDay() - offset) % 7 모든 주에 대응할 수 있습니다.

총결산

요약하자면, 코드는 다음과 같다.
지난달 작성할 날짜 목록 생성

// 前月の日を埋める
const prevPaddingDays = (() => {
  const firstDay = (new Date(year, month)).getDay();
  // 埋める日数を求める（日曜日スタートがoffset:0で、月曜日からにする場合はoffset:1にする）
  const paddingDayCount = (firstDay + 7 - offset) % 7;
  const prevLastDate = (new Date(year, month, 0)).getDate();
  return _.range(prevLastDate - paddingDayCount + 1, prevLastDate + 1).map((day) => ({
    date: new Date(year, month - 1, day),
    day,
    isPrev: true,
    isNext: false,
  }));
})();

이달 날짜 생성

지난달에 작성해야 할 날짜를 요구하면 그 다음은 간단하다.
이번 달 마지막 날은 아까의 방법new Date(year, month + 1, 0)으로 알 수 있다.0의 경우 1월 전이므로 우선 +1을 주의하십시오.그 다음에 일수 목록만 하면 돼요.
이달 날짜 생성

// 今月の日にちリストを生成する
const currentDays = (() => {
  const lastDate = new Date(year, month + 1, 0);
  const currentDayCount = lastDate.getDate();
  return _.range(1, currentDayCount + 1).map((day) => ({
    date: new Date(year, month, day),
    day,
    isPrev: false,
    isNext: false,
  }));
})();

다음 달 표시 날짜 생성

다음 달 일수도 요일부터 계산할 수 있지만 다른 방법으로 조금 수월하다.
중요한 것은 마지막 날짜를 7의 배수로 채우면 되기 때문에 % 여수로 채워야 할 일수를 계산한다.
다음 달에 작성할 날짜 목록 생성

// 来月の日を埋める
const nextPaddingDays = (() => {
  const paddingDayCount = (42 - (prevPaddingDays.length + currentDays.length)) % 7;
  return _.range(1, paddingDayCount + 1).map((day) => ({
    date: new Date(year, month + 1, day),
    day,
    isPrev: false,
    isNext: true,
  }));
})();

달력 목록으로 정리

마지막으로 이 날짜 목록을 결합하면 완성된다.
grid로 표시할 때 1차원을 유지하는 것은 문제가 없지만 flexbox 등에서 실시할 때 2차원이 비교적 쉽기 때문에 여기서 2차원 목록으로 전환합니다.
달력 목록으로 정리

// 結合する
const flatCalendar = [
  ...prevPaddingDays,
  ...currentDays,
  ...nextPaddingDays,
];

// 2次元配列にして返す
return _.range(0, flatCalendar.length / 7).map((i) => {
  return flatCalendar.slice(i * 7, (i + 1) * 7);
});

달력 목록의 데이터에 의하면

나중에 표시만 하기 때문에 설명을 생략합니다.
마지막은 Vue.js가 설치한 샘플 코드를 게재했기 때문에 자세한 상황은 저쪽을 참조하십시오.

끝날 때

이상은 달력 설치 방법입니다.월요일부터 시작하는 달력을 만들어야 하기 때문에 곤란한 사람이 있다면 꼭 참고하세요.여기서도 수요일에 시작할 수 있어요(웃음).
See the Pen 달력 by wintyo ( @wintyo )
on CodePen .