#039; S가 월간 캘린더를 제공하자

이 vue.js 전원 월별 캘린더 자습서는 재사용 가능한 캘린더 구성 요소를 구축하는 것을 보여줍니다. 명확성과 간결함에 중점을두고 과정을 세분화합시다. 원본 텍스트는 매우 상세 했으므로이 버전은보다 간소화 된 설명을 목표로합니다.

이 튜토리얼은 플러그인이나 외부 캘린더의 복잡성을 피하고 월별 캘린더보기를 위해 vue.js 구성 요소를 만드는 방법을 보여줍니다. 목표는 Lightweight Day.js Library의 단일 페이지 응용 프로그램을 가져 오는 캘린더 데이터입니다. 주요 기능은 다음과 같습니다.

• 월보기 그리드 표시 현재 달의 날.
• 이전 및 다음 달의 날을 포함한 전체 그리드 디스플레이.
• 현재 날짜 강조 표시.
• 선택된 달 이름의 표시.
• 이전/다음 달 탐색.
• 이번 달까지 빠른 탐색을위한 "오늘"버튼.

1 단계 : 기본 마크 업 (Calendarmonth.vue)

캘린더 구조는 헤더 (월 및 내비게이션 제어 표시), 평일 헤더 및 메인 캘린더 그리드의 세 부분으로 나뉩니다. 이것은 기본 템플릿으로 표시됩니다.

<template>
  <div>
    <div>
      <calendar-date-indicator :selected-date="selectedDate"></calendar-date-indicator>
      <calendar-date-selector :current-date="today" :selected-date="selectedDate"></calendar-date-selector>
    </div>
    <calendar-weekdays></calendar-weekdays>
    <ol>
      <calendar-month-day-item v-for="day in days" :key="day.date" :day="day" :is-today="day.date === today" :is-current-month="day.isCurrentMonth"></calendar-month-day-item>
    </ol>
  </div>
</template>

2 단계 : 헤더 구성 요소

두 구성 요소는 헤더를 관리합니다.

• CalendardAteIndicator : Day.js 형식을 사용하여 선택한 달을 표시합니다.
• CalendardatesEcelector : 이전, 현재 및 다음 달으로 탐색하기위한 버튼을 제공합니다. 상위 구성 요소에서 선택한 날짜를 업데이트하기 위해 이벤트를 제출합니다.

3 단계 : 캘린더 그리드 구성 요소

두 개의 구성 요소가 그리드를 처리합니다.

• 달력 주간 : 주중의 약식 이름 (월, tue 등)을 표시합니다.
• CalendarMonthdayItem : 그리드에서 하루를 나타내며 현재 날짜를 강조합니다.

4 단계 : 달력 데이터 생성

핵심 논리는 day.js를 사용하여 캘린더 데이터를 동적으로 생성하는 것입니다. 여기에는 다음이 포함됩니다.

• 선택된 달의 일 수 결정.
• 그리드를 채우는 데 필요한 이전 및 다음 달의 날을 계산합니다.
• 요즘 렌더링을 위해 단일 배열로 결합합니다.

Day.js 플러그인 ( weekday 및 weekOfYear )은 일주일의 시작 일을 결정하고 그리드 내에 날짜를 올바르게 배치하는 데 사용됩니다. 이 계산에는 월의 첫 번째와 마지막 날의 주중을 결정하여 인접한 달의 선도 및 후행 일을 올바르게 추가합니다.

이 간소화 된 설명은 주요 구성 요소 및 상호 작용에 중점을 둔 캘린더 구성에 대한 높은 수준의 개요를 제공합니다. 원래 튜토리얼의 자세한 코드 스 니펫은 간결하게 응축되어 있습니다. 전체 코드 구현은 원본을 참조하십시오.

위 내용은 #039; S가 월간 캘린더를 제공하자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!