접기

접기와 펼치기는 weeks가 담당합니다. motion 없이도 버튼을 누르면 즉시 전환됩니다. 드래그에는 weeks와 motion을 함께 등록하고, 전환 애니메이션에는 animation을 활성화하세요. motion만으로는 주간 보기가 포함되지 않습니다.

확장 기능이 없는 이전 버전에서 업그레이드할 때 기존 옵션과 콜백은 유지하세요. ESM에서는 weeks 확장을 이름으로 import하고 생성자에 extensions: [weeks]을 추가하세요. 확장 기능을 함수처럼 호출하지 않습니다. import하거나 등록하는 것만으로 기능이 활성화되지는 않습니다.

import { Calendar, weeks } from 'vanilla-calendar-pro';
 
new Calendar('#calendar', {
  extensions: [weeks],
  enableCollapse: true,
}).init();

enableCollapse는 그리드 아래에 컨트롤을 추가합니다. 누르면 월이 한 주로 접히고, 다시 누르면 펼쳐집니다. 이 옵션은 기본적으로 꺼져 있으며 enableSwipe나 animation 없이도 사용할 수 있습니다.

컨트롤은 기기에 맞춰 달라집니다. 마우스에서는 셰브론이고, 터치 화면에서는 위아래로 끌 수 있는 그래버가 되며 캘린더가 손가락을 그대로 따라옵니다. 천천히 끌 때는 전체 거리의 4분의 1을 넘어야 하며, 빠르게 튕기면 손을 뗄 때의 속도도 반영되므로 더 일찍 완료될 수 있습니다. 그 밖의 경우에는 원래대로 돌아갑니다.

표시된 월에 속하는 첫 번째 선택 날짜가 있으면 그 날짜를 기준으로 주를 정합니다. 없으면 해당 월에 속하는 오늘을 사용하고, 그마저 없으면 표시된 월의 1일을 기준으로 합니다.

접혀 있는 동안 화살표는 한 번에 한 주씩 이동합니다. 다시 펼치면 그 주를 둘러싼 월로 돌아갑니다.

타이밍

전환은 animation 옵션을 사용합니다. collapse 그룹에서 타이밍을 별도로 설정할 수 있습니다.

import { Calendar, weeks, motion } from 'vanilla-calendar-pro';
 
new Calendar('#calendar', {
  extensions: [weeks, motion],
  animation: { collapse: { duration: 450 } },
  enableCollapse: true,
});