실제 데이터로 월별 달력을 만드는 방법

웹 페이지에서 달력을보고“어떻게 했습니까?”라고 스스로 생각한 적이 있습니까? 플러그인이나 심지어 내장 된 Google 캘린더를 사용하는 것은 당연한 일이지만 실제로 캘린더를 생각하는 것보다 훨씬 쉽습니다. 함께 하나를 만들어 보자!

Codesandbox에서 데모를 설정하여 목표를 볼 수 있습니다.

먼저 데모를 확인하십시오. 캘린더의 요구 사항 중 일부를 결정해 봅시다. 그것은 :

• 지정된 달의 달 그리드를 표시합니다
• 그리드가 항상 완료되도록 전달과 다음 달의 날짜를 보여줍니다.
• 현재 날짜를 나타냅니다
• 현재 선택된 달의 이름을 보여줍니다
• 전 달과 다음 달으로 이동하십시오
• 사용자가 한 번 클릭하여 현재 달으로 돌아갈 수 있도록합니다.

아, 그리고 우리는 그것을 단일 페이지 애플리케이션으로 구축하여 Day.js (초경량 유틸리티 라이브러리)에서 캘린더 날짜를 얻습니다.

작업을 단순화하기 위해 특정 프레임 워크를 선택하지 않습니다. 이 설정에서는 패키지 관리에 Parcel을 사용하여 Babel을 사용하여 코드를 작성하고 묶음 코드를 작성하고 프로젝트에서 유일한 종속성을 관리 할 수 ​​있습니다. 자세한 내용은 Codesandbox에서 Package.json 파일을 확인하십시오.

1 단계 : 기본 태그와 스타일로 시작합니다

캘린더의 기본 템플릿을 만드는 것으로 시작하겠습니다. 이것은 멋진 것이 필요하지 않습니다. 그러나 양식을 사용하지 않고 수행해야합니다.

우리는 마크 업을 3 개의 레이어로 간략하게 설명 할 수 있습니다.

• 캘린더 제목 섹션. 여기에는 현재 선택된 달과 몇 달 사이의 페이지 매김을 담당하는 요소가 표시됩니다.
• 캘린더 그리드 제목 섹션. 다시 말하지만, 우리는 테이블을 사용하지 않지만 요일 목록이 포함 된 헤더와 같습니다.
• 캘린더 그리드. 현재 달의 매일은 그리드의 정사각형으로 표시됩니다.

이것을 index.js라는 파일로 작성해 봅시다. 프로젝트 폴더의 SRC 폴더에 배치 할 수 있습니다. 프로젝트 루트 디렉토리에 INDEX.HTML 파일이있어 작업을 가져 오지만 기본 태그는 JavaScript 파일에 있습니다.

 document.getElementById ( "app"). innerhtml =`
<div>
  <div>
    2020 년 7 월
  </div>

  <div>
    오늘
    >
  </div>

  <ol>
    <li>몬</li>
    ...
    <li>해</li>
  </ol>

  <ol>
    <li>
      1
      ...
      29
    </li>
  </ol>
</div>
`;;

이 파일을 프로젝트의 루트 디렉토리에있는 index.html 파일로 가져 오겠습니다. 여기서 특별한 일은 없었습니다. 응용 프로그램에서 위치하고 Index.js 파일에 등록 된 요소가 포함 된 HTML 보일러 플레이트입니다.

 

  
    <meta charset="UTF-8">
    <title>소포 샌드 박스</title>
  
  
    <div id="app"></div>
    <script src="./src/index.js"></script>
  

이제 사용할 수있는 마커가 있었으므로 스타일을 조금씩 스타일링하여 시작으로 시각적으로 좋은 시각을 갖도록합시다. 구체적으로, 우리는 다음과 같습니다.

• Flexbox와 함께 위치 요소
• CSS 그리드를 사용하여 캘린더 프레임을 만듭니다
• 셀의 위치 라벨

먼저 index.js와 동일한 src 폴더에 새 Styles.css 파일을 만들어 다음에 넣으십시오.

 / * ... (CSS 코드는 위와 동일합니다) ... */

그리드 설정의 핵심 부분은 다음과 같습니다.

 . 주일,
.days-grid {
  / * 7 주 평일 및 일을위한 동일한 열 */
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (7, 1fr);
}

캘린더 그리드 제목과 캘린더 그리드 자체는 CSS 그리드를 사용하여 배치됩니다. 우리는 항상 일주일에 7 일이 있다는 것을 알고 있으므로 반복 () 함수를 사용하여 서로 7 열을 만들 수 있습니다. 또한 행이 일관되도록하기 위해 각 캘린더 날짜에 100px의 최소 높이를 선언했습니다.

이 스타일을 태그와 연결해야하므로 index.js 파일의 상단에 추가하겠습니다.

 import "./styles.css";

이것은 우리가 지금까지 가지고있는 것을 보는 좋은 중지 지점입니다.

데모보기 ### 2 단계 : 현재 달 캘린더 설정

템플릿에는 현재 정적 데이터 만 포함되어 있음을 알 수 있습니다. 이 달은 7 월으로 하드 코딩되며 날짜 숫자도 하드 코딩됩니다. 이것은 Day.js가 시작되는 곳입니다. 실제 캘린더 데이터를 사용하여 올바른 날짜에 날짜를 올바르게 배치하는 데 필요한 모든 데이터를 제공합니다. 이를 통해 한 달부터 시작 날짜부터 데이터를 표시하는 데 필요한 모든 날짜 형식 옵션까지 모든 것을 얻고 설정할 수 있습니다.

우리는 :

• 현재 달을 얻으십시오
• 날짜가 어디에 있는지 계산 (근무일)
• 전달과 다음 달 표시 날짜 계산
• 모든 날짜를 배열로 결합하십시오

먼저 Day.js를 가져 와서 모든 정적 HTML (선택된 달, 주중 및 날짜)을 삭제해야합니다. index.js 파일 바로 위의 가져 오기 스타일에 이것을 추가하여이를 수행합니다.

 "dayjs"에서 dayjs 가져 오기;

우리는 또한 Day.js 플러그인에 도움이 될 것입니다. 주중은 우리가 주 첫날을 설정하는 데 도움이됩니다. 어떤 사람들은 일주일에 일요일을 만드는 것을 좋아합니다. 다른 사람들은 월요일을 선호합니다. 도대체, 어떤 경우에는 금요일부터 의미가 있습니다. 우리는 월요일에 시작합니다.

주간 플러그인은 올해의 현재 주간의 숫자 값을 반환합니다. 1 년에 52 주가 있기 때문에 1 월 1 일부터 시작하는 주가 연중 첫 주 등이라고 말할 수 있습니다.

여기에 가져 오기 명령문 이후 Index.js에 추가 한 내용은 다음과 같습니다.

 Const Weekday = 요구 사항 ( "Dayjs/Plugin/Weekday");
const weekofyear = require ( "dayjs/plugin/weekofyear");

dayjs.extend (주중);
dayjs.extend (주간);

우리가 하드 코드 캘린더 값을 제거하면, 이것은 우리가 지금까지 index.js에서 가지고있는 것입니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

이제 상수를 설정합시다. 구체적으로, 우리는 요일 (예 : 월요일, 화요일, 수요일 등)을 건설하려고합니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

그런 다음 현재 연도를 얻고 yyyy 형식으로 설정하고 싶습니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

당사는 달력을로드시 출발점으로 현재 달을 설정하려고합니다. 여기서 M은 달을 숫자 값으로 형식화합니다 (예 : 1 월 1 일).

 // ... (JavaScript 코드는 위와 동일합니다) ...

달력 그리드 타이틀을 요일에 계속 채우자. 먼저, 우리는 올바른 요소 (#일주일)를 얻은 다음 주중 배열을 루프하고 배열의 각 항목에 대한 목록 항목 요소를 만들고 각 항목의 이름을 설정합니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

3 단계 : 캘린더 그리드를 만듭니다

매우 간단하지만 이제 캘린더 그리드를 사용하기 때문에 진짜 재미가 시작됩니다. 일시 중지하고 올바르게 수행하기 위해 우리가 실제로해야 할 일에 대해 생각합시다.

먼저, 날짜 번호가 올바른 근무일 열에 떨어지기를 원합니다. 예를 들어, 2020 년 7 월 1 일은 수요일입니다. 날짜 번호가 시작되는 곳입니다.

한 달의 첫날이 수요일이라면, 이는 첫 주 월요일과 화요일에 이용 가능한 그리드 품목이 있음을 의미합니다. 달의 마지막 날은 금요일 7 월 31 일입니다. 이것은 지난주의 토요일과 일요일이 비어질 것임을 의미합니다. 캘린더 그리드가 항상 완료되도록 전달 날짜와 다음 달의 주요 날짜 로이 날짜를 채우고 싶습니다.

현재 달의 날짜를 만듭니다

현재 달의 날짜를 그리드에 추가하려면 현재 달에 며칠이 있는지 알아야합니다. Daysinmonth 메소드를 사용하여 DaySinmonth 방법을 사용하여 얻을 수 있습니다. 이를위한 도우미 방법을 만들어 봅시다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

우리가 이것을 알 때, 우리는 빈 길이 배열을 만듭니다. 현재 달의 일수와 같습니다. 그런 다음 배열을 맵핑하고 각 배열의 날짜 개체를 만듭니다. 우리가 만든 객체에는 임의의 구조가 있으므로 원하는 경우 추가 속성을 추가 할 수 있습니다.

이 예에서는 특정 날짜가 현재 날짜인지 확인하는 데 사용되는 날짜 속성이 필요합니다. 우리는 또한 레이블 역할을하는 Dayof Month 속성 (예 : 1, 2, 3 등)을 반환합니다. IsCurrentMonth는 날짜가 현재 달의 달 안에 있는지 여부를 확인합니다. 그것이 현재 달 이외의 경우, 우리는 사람들이 현재 달의 범위를 벗어난다는 것을 알 수 있도록 스타일을 지정할 것입니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

전 달 날짜를 캘린더 그리드에 추가

전 달에 전달 날짜가 ​​표시 되려면 선택한 달의 첫날이 어떤 요일을 확인해야합니다. 이곳에서 Day.js의 주중 플러그인을 사용할 수 있습니다. 이를위한 도우미 방법을 만들어 봅시다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

그런 다음이를 바탕으로 전달의 마지막 월요일이 어느 날을 확인해야합니다. 우리는이 값이 현재 달의 며칠 동안 며칠을 표시 해야하는지 알기 위해이 값이 필요합니다. 우리는 현재 달의 첫날부터 근무일의 가치를 빼서 그것을 얻을 수 있습니다. 예를 들어, 한 달의 첫날이 수요일이면 전달의 마지막 월요일을 얻기 위해 3 일을 빼야합니다. 이 값을 사용하면 전달의 마지막 월요일부터 그 달의 마지막 날부터 시작하는 데이트 객체를 만들 수 있습니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

다음 달 날짜를 캘린더 그리드에 추가하십시오

이제 현재 달의 그리드를 채우기 위해 다음 달부터 가져와야 할 날짜를 계산하도록합시다. 다행히도 우리는 지난 달 계산을 위해 방금 만든 것과 동일한 도우미 방법을 사용할 수 있습니다. 차이점은 다음 달에 해당 일의 날 가치를 7에서 빼서 며칠 동안 표시해야 할 일을 계산한다는 것입니다.

예를 들어, 한 달의 마지막 날이 토요일 인 경우 다음 달 (일요일)에서 필요한 날짜 배열을 구성하기 위해 7에서 1 일을 빼야합니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

좋아, 우리는 필요한 모든 필요한 날을 만드는 방법을 알고, 방금 만든 방법을 사용한 다음 모든 날을 전달 및 다음 달의 패딩 날짜를 포함하여 현재 달에 표시하려는 모든 일을 포함하는 단일 배열로 병합합시다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

다음은 INDEX.JS로 구성한 모든 것입니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

데모보기 ### 4 단계 : 캘린더 날짜 표시

자, 캘린더의 기본 마커가 있으므로 현재 달 날짜에 대한 데이터를 표시해야하며, 비어있는 그리드 품목을 채우기 위해 전달 및 다음 달의 날짜를 표시해야합니다. 이제 날짜를 캘린더에 첨부해야합니다!

우리는 이미 캘린더 그리드 #캘린더 데이 용 컨테이너가 있습니다. 요소를 얻자.

 // ... (JavaScript 코드는 위와 동일합니다) ...

이제 캘린더보기에 날짜를 첨부하는 함수를 만들어 봅시다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

우리는 전 달과 다음 달의 날짜를 확인하여 현재 달의 날짜와 구별하기 위해 수업을 추가 할 수 있습니다.

 // ... (CSS 코드는 위와 동일합니다) ...

그게 다야! 우리의 캘린더는 이제 우리가 원하는 방식으로 표시되어야합니다.

데모보기 ### 5 단계 : 현재 달을 선택하십시오

우리가 지금까지 가지고있는 것은 꽤 좋지만, 우리는 사용자가 현재 달부터 시작하여 한 달을 앞뒤로 페이지에 올릴 수 있기를 원합니다. 우리는 이미 대부분의 논리를 가지고 있으므로 실제로해야 할 일은 날짜 계산을 다시 실행하고 업데이트 된 데이터로 캘린더를 다시 인쇄하는 페이징 버튼에 클릭 리스너를 추가하는 것입니다.

시작하기 전에 현재 달, 전 달 및 다음 달의 날짜 변수를 정의하여 코드 전체에서 참조 할 수 있도록하겠습니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

이제 달력 날짜를 다시 계산하고 다른 달까지 페이징 할 때 캘린더를 다시 렌더링하는 메소드를 만들어 봅시다. 우리는 기능을 CreateCalendar라고 부를 것입니다. 이 방법에서는 생후 및 월의 두 가지 속성을 수락하며이를 기반으로 한 캘린더는 페이지를 다시로드하지 않고 새 데이터로 다시 렌더링됩니다.

이 메소드는 제목 컨텐츠를 대체하여 항상 선택한 달 레이블을 표시합니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

그런 다음 캘린더 날짜 컨테이너를 얻고 기존 날짜를 삭제합니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

캘린더를 지우면 이전에 만든 방법을 사용하여 표시 해야하는 새 날짜가 계산됩니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

마지막으로 날짜 요소를 매일 첨부합니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

기존 캘린더를 지우는 removealldayElements 메소드도 누락 된 논리적 부분도 있습니다. 이 방법은 첫 번째 캘린더 날짜 요소를 사용하여 삭제하고 다른 요소로 대체합니다. 거기에서 모든 요소가 삭제 될 때까지 논리를 루프합니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

이제 달을 바꾸고 싶을 때 해당 논리를 재사용 할 수 있습니다. 구성 요소에 대한 정적 템플릿을 만들 때 첫 번째 단계를 상기하십시오. 우리는이 요소를 추가했습니다.

 // ... (HTML 코드는 위와 동일합니다) ...

이것들은 몇 달 사이의 페이지 매김 통제입니다. 이를 변경하려면 현재 선택된 달을 저장해야합니다. 그것이 무엇인지 추적하고 초기 가치를 이번 달에 설정하는 변수를 만들어 봅시다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

이제 선택기가 작동하려면 JavaScript가 필요합니다. 읽기 쉽게 읽을 수 있도록 InitmonthSelectors라는 다른 메소드를 만들고 논리를 남겨 둡니다. 이 메소드는 이벤트 리스너를 선택기 요소에 추가합니다. 클릭 이벤트에 대해 듣고 선택된 Month의 값을 새로 선택한 달의 이름으로 업데이트 한 다음 올바른 연도 및 월 값으로 CreateCalendar 메소드를 실행합니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

그게 다야! 우리 달력이 준비되었습니다. 이것이 좋지만, 현재 날짜를 표시하여 나머지와 눈에 띄도록 더 나을 수 있습니다. 이것은 어렵지 않아야합니다. 우리는 이미 현재 달 이외의 날짜 스타일을 설정하고 있으므로 비슷한 일을하겠습니다.

우리는 오늘으로 설정된 변수를 만들 것입니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

그런 다음 부록 방법에서는 현재 달 이외의 날짜가있는 클래스를 적용 할 때 요소가 오늘의 날짜인지 확인하기 위해 다른 수표를 추가해야합니다. 그렇다면 요소에 클래스를 추가합니다.

 // ... (JavaScript 코드는 위와 동일합니다) ...

이제 우리는 스타일을 설정할 수 있습니다!

 // ... (CSS 코드는 위와 동일합니다) ...

봐, 우리는 끝났어! 최종 데모를 확인하여 모든 것의 조합을 확인하십시오.

데모를보십시오

위 내용은 실제 데이터로 월별 달력을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!