설정
extensions새 소식
Type: readonly CalendarExtension[]
Default: []
motion은 애니메이션과 제스처를 제공합니다. time은 12/24시간 선택기를 제공합니다. annotations는 날짜 팝업, 스타일 modifier와 범위 툴팁을 제공합니다. weeks는 주간 보기, 접기, 주 번호와 요일/주 번호 클릭 콜백을 제공합니다. months는 여러 달을 함께 표시하고 탐색합니다. ESM 번들러는 import하고 등록하지 않은 확장을 제거할 수 있습니다.
import { Calendar, motion, time, annotations } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/styles/index.css';
const calendar = new Calendar('#calendar', {
extensions: [motion, time, annotations],
animation: true,
selectionTimeMode: 24,
popups: { '2026-09-21': { html: 'Event' } },
});
calendar.init();확장 기능 목록은 인스턴스 생성 시 결정됩니다. 나중에 set() 또는 update()로 활성화할 모듈도 미리 등록하세요. 이 메서드는 기존 옵션을 변경하지만 모듈을 추가하거나 제거하지 않습니다. 같은 설정 객체나 확장 배열을 여러 캘린더에서 재사용해도 각 인스턴스의 상태는 독립적입니다. 필요한 확장 없이 기능을 활성화하면 init(), set() 또는 update()가 명확한 오류를 발생시킵니다. 비활성 설정과 콜백만으로는 모듈이 필요하지 않습니다.
입력 필드 캘린더, 날짜 및 범위 선택, 월/연도 선택은 코어에 유지됩니다. 기본 요일 제목에는 확장이 필요하지 않습니다. 일반 <script> / CommonJS 전체 빌드는 다섯 확장을 자동 등록합니다. CSS import는 바뀌지 않습니다.
type
ESM에서 type: 'multiple'에는 months, type: 'week'에는 weeks가 필요합니다. 나중에 set()으로 전환하는 경우에도 생성자에서 미리 등록하세요.
Type: String
Default: 'default'
Options: 'default' | 'multiple' | 'month' | 'year' | 'week'
new Calendar('#calendar', {
type: 'default',
});type 파라미터는 표시될 캘린더 타입을 정의합니다. week 타입은 한 달 전체가 아니라 한 주만 보여 줍니다. 단독으로 사용하거나 enableCollapse와 함께 사용해 방문자가 월 보기와 주 보기를 전환하게 할 수 있습니다.
inputMode
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
inputMode: true,
});inputMode 파라미터는 첫 번째 파라미터로 전달된 mainElement가 캘린더 래퍼가 아니라 입력 필드임을 나타냅니다.
openOnFocus
Type: Boolean | Function
Default: true
Options: true | false | () => false
new Calendar('#calendar', {
openOnFocus: false,
// or with a callback
openOnFocus: (self) => !self.context.isShowInInputMode,
});openOnFocus가 true이거나 콜백이 true를 반환하면 입력 필드에 포커스가 들어올 때 캘린더가 열립니다. 이 동작을 제어하고 자체 포커스 핸들러를 구현하려면 false 또는 콜백을 사용하세요.
positionToInput
Type: String
Default: 'left'
Options: 'auto' | 'center' | 'left' | 'right' | ['bottom' | 'top', 'center' | 'left' | 'right']
new Calendar('#calendar', {
positionToInput: 'auto',
// positionToInput: ['bottom', 'center'],
});캘린더가 inputMode 파라미터로 초기화된 경우, 이 파라미터는 입력 필드에 대한 캘린더 위치를 정의합니다.
positionToInput은 'left', 'center', 'right' 중 하나의 문자열 또는 [Y축, X축] 배열을 받습니다. Y축은 'bottom' 또는 'top', X축은 'left', 'center', 'right' 중 하나가 될 수 있습니다.
Y축이 지정되지 않으면 기본값 'bottom'이 사용됩니다.
positionToInput: 'auto'를 사용하면 뷰포트의 사용 가능한 공간을 기반으로 최적의 위치를 자동 계산합니다.
이 옵션은 4방향의 여유 공간을 계산한 뒤 기본 위치인 입력 필드 아래에 먼저 표시하려고 시도합니다.
아래 공간이 부족하면 다른 최적의 위치를 평가합니다.
animation새 소식
확장 기능이 없는 이전 버전에서 업그레이드할 때 기존 옵션과 콜백은 유지하세요. ESM에서는 motion을 이름으로 import하고 생성자에 extensions: [motion]을 추가하세요. 확장 기능을 함수처럼 호출하지 않습니다. import하거나 등록하는 것만으로 기능이 활성화되지는 않습니다.
Type: Boolean | Object
Default: false
Options: true | false | { duration?: Number, easing?: String, slide?: Timing, fade?: Timing, collapse?: Timing }
Timing: { duration?: Number, easing?: String }
import { Calendar, motion } from 'vanilla-calendar-pro';
new Calendar('#calendar', {
extensions: [motion],
animation: true,
// animation: { duration: 400, easing: 'ease-out' },
// animation: { slide: { duration: 400 }, fade: { duration: 120 }, collapse: { duration: 300 } },
});뷰 전환에 애니메이션을 적용합니다. 화살표 탐색과 enableSwipe는 가로 슬라이드를 사용하고, 월·연도 선택 화면은 크로스페이드되며, enableCollapse는 월과 주 사이에서 캘린더 높이를 애니메이션합니다.
기본값은 전환마다 다릅니다. 슬라이드는 250ms, 크로스페이드는 150ms, 접기는 300ms이며 이징은 모두 cubic-bezier(0.4, 0, 0.2, 1)입니다. 객체를 전달하면 원하는 값을 덮어씁니다. duration은 밀리초 단위이며 easing에는 CSS easing 함수를 사용할 수 있습니다. 최상위 값은 모든 전환에 적용되고, slide(화살표와 enableSwipe), fade(선택 화면), collapse(enableCollapse) 아래에 중첩하면 해당 그룹에만 적용됩니다. 중첩된 값이 최상위 값보다 우선합니다.
방문자가 prefers-reduced-motion: reduce로 모션 최소화를 요청한 경우 정착 애니메이션은 실행되지 않습니다. 제스처는 계속 포인터를 따라가지만, 손을 떼면 즉시
완료되거나 되돌아갑니다.
기본값이 false인 것은 하위 호환성을 위해서입니다. 이 옵션은 나중에 추가되었고, 켜면 슬라이드와 크로스페이드 중 DOM 조회 결과가 달라집니다. 사라지는 내용은 inert가 지정된 [data-vc-ghost] 레이어 안에 남아 있어 날짜 요소가 잠시 두 번 존재할 수 있습니다. 직접 작성한 코드에서 날짜 요소를 조회한다면 이 레이어를 제외하세요. 접기는 고스트 레이어를 만들지 않습니다.
firstWeekday
Type: Number
Default: 1
Options: from 0 to 6
new Calendar('#calendar', {
firstWeekday: 1,
});이 파라미터는 주의 시작 요일을 설정합니다. 0~6 사이의 숫자를 지정하며, 숫자는 요일 식별자를 의미합니다. JS 표준에 따라 요일은 0부터 시작하며 0은 일요일입니다.
monthsToSwitch
Type: Number
Default: 1
Options: from 1 to 12
new Calendar('#calendar', {
monthsToSwitch: 1,
});monthsToSwitch 파라미터는 전환할 월의 개수를 제어합니다.
monthsToSwitch가 1보다 크면, 월 선택(month picker) 화면에서도 현재 선택된 월로부터 monthsToSwitch 간격으로 도달 가능한 월만 선택할 수 있으며, 나머지
월은 비활성화되어 표시됩니다. 이는 설정된 이동 간격과 내비게이션을 일관되게 유지하기 위한 것입니다(특히 type: 'multiple'에서 displayMonthsCount와 함께
사용할 때, 여러 개의 표시된 월을 서로 동기화된 상태로 유지하는 데 중요합니다).
themeAttrDetect
Type: String | false
Default: 'html[data-theme]'
Options: string | false
new Calendar('#calendar', {
themeAttrDetect: 'html[data-theme]',
});캘린더가 사이트 테마를 자동으로 추적하고 적용하도록 하려면, CSS 셀렉터 형태의 문자열 값을 전달할 수 있습니다.
대괄호는 테마 이름이 들어 있는 속성을 의미합니다.
기본적으로 data-theme 속성이 있는 html 태그를 추적하지만, 예를 들어 클래스 이름으로 테마를 설정하는 경우 'html[class]'처럼 다른 속성과 태그로 설정할 수 있습니다.
false로 설정하면 테마는 사용자 시스템 또는 selectedTheme 파라미터에 의해 결정됩니다.
locale
Type: String
Default: 'en'
Options: Language label | Array<locale>
new Calendar('#calendar', {
locale: 'en',
// Or specify an object for your labels
// locale: {
// months: {
// long: [],
// short: [],
// },
// weekday: {
// long: [],
// short: [],
// }
// },
});이 파라미터는 캘린더의 언어 로컬라이징을 설정합니다.
BCP 47
에 따른 언어 태그를 지정하거나, 월/요일 이름 배열을 제공할 수 있습니다. 자세한 내용은 여기를 참고하세요.
dateToday
Type: Date object
Default: 'today'
Options: Date | number | 'YYYY-MM-DD' | 'today'
new Calendar('#calendar', {
dateToday: 'today',
});dateToday 파라미터는 캘린더에서 오늘로 간주할 날짜를 정의합니다.
dateMin
Type: String
Default: '1970-01-01'
Options: Date | number | 'YYYY-MM-DD' | 'today'
new Calendar('#calendar', {
dateMin: '1970-01-01',
});dateMin 파라미터는 캘린더에서 허용되는 최소 날짜를 설정하며, 이 날짜보다 이전은 허용되지 않습니다.
dateMax
Type: String
Default: '2470-12-31'
Options: Date | number | 'YYYY-MM-DD' | 'today'
new Calendar('#calendar', {
dateMax: '2470-12-31',
});dateMax 파라미터는 캘린더에서 허용되는 최대 날짜를 설정하며, 이 날짜보다 이후는 허용되지 않습니다.
displayDateMin
Type: String
Default: '1970-01-01'
Options: Date | number | 'YYYY-MM-DD' | 'today'
new Calendar('#calendar', {
displayDateMin: '2022-07-01',
});이 파라미터는 사용자가 선택할 수 있는 최소 날짜를 설정합니다. 지정된 날짜보다 이전 날짜는 비활성화되어 선택할 수 없습니다.
displayDateMin과 displayDateMax는 범위 밖의 날짜를 비활성화하지만, dateMin과 dateMax는 아예 생성하지 않는다는 점에 유의하세요..set()에서 displayDateMin에 null을 전달하면 기본값으로 명시적으로 재설정됩니다. undefined를 전달하면(예: 해당 속성을 생략하면) 현재 값이 변경되지 않고
유지됩니다.
displayDateMax
Type: String
Default: '2470-12-31'
Options: Date | number | 'YYYY-MM-DD' | 'today'
new Calendar('#calendar', {
displayDateMax: '2024-07-01',
});이 파라미터는 사용자가 선택할 수 있는 최대 날짜를 설정합니다. 지정된 날짜보다 이후 날짜는 비활성화되어 선택할 수 없습니다.
displayDateMin과 displayDateMax는 범위 밖의 날짜를 비활성화하지만, dateMin과 dateMax는 아예 생성하지 않는다는 점에 유의하세요..set()에서 displayDateMax에 null을 전달하면 기본값으로 명시적으로 재설정됩니다. undefined를 전달하면(예: 해당 속성을 생략하면) 현재 값이 변경되지 않고
유지됩니다.
displayDatesOutside
Type: Boolean
Default: true
Options: true | false
new Calendar('#calendar', {
displayDatesOutside: false,
});이 파라미터로 이전/다음 달의 날짜를 표시할지 여부를 결정할 수 있습니다.
displayDisabledDates
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
displayDisabledDates: false,
});이 파라미터는 비활성 날짜를 포함한 모든 날짜를 표시할지 여부를 결정합니다.
displayMonthsCount
ESM 마이그레이션: 기존 옵션과 콜백을 유지하고 vanilla-calendar-pro에서 months 확장을 import한 뒤 생성자의 extensions: [months] 배열에 추가하세요. 함수처럼 호출하지 않습니다.
Type: Number
Default: 2
Options: from 2 to 12
import { Calendar, months } from 'vanilla-calendar-pro';
new Calendar('#calendar', {
extensions: [months],
type: 'multiple',
displayMonthsCount: 2,
});displayMonthsCount 파라미터는 캘린더 타입이 'multiple'일 때 표시되는 월 수를 정의합니다.
disableDates
Type: String[] | Number[] | Date[]
Default: null
Options: ['YYYY-MM-DD'] | [Number] | [Date] | null
new Calendar('#calendar', {
disableDates: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
});이 파라미터는 지정한 날짜를 범위와 무관하게 비활성화할 수 있습니다.
disableAllDates
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
disableAllDates: true,
});이 파라미터는 모든 날짜를 비활성화하며, enableDates와 함께 사용할 때 유용합니다.
disableDatesPast
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
disableDatesPast: true,
});이 파라미터는 과거의 모든 날짜를 비활성화합니다.
disableDatesGaps
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
disableDatesGaps: true,
});이 파라미터는 비활성 날짜가 포함된 범위 안에서의 날짜 선택을 막습니다. selectionDatesMode가 'multiple-ranged'로 설정된 경우에만 동작합니다.
disableWeekdays
Type: Number
Default: []
Options: from 0 to 6
new Calendar('#calendar', {
disableWeekdays: [0, 6],
});이 파라미터는 특정 요일을 비활성화할 수 있습니다. 0~6의 숫자를 가진 배열을 지정하며, 숫자는 요일 식별자를 의미합니다. JS 표준에 따라 요일은 0부터 시작하며 0은 일요일입니다.
disableToday
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
disableToday: true,
});이 파라미터로 오늘 날짜 선택을 비활성화할 수 있습니다.
enableDates
Type: String[] | Number[] | Date[]
Default: null
Options: ['YYYY-MM-DD'] | [Number] | [Date] | null
new Calendar('#calendar', {
enableDates: ['2022-08-11:2022-08-16', '2022-08-20', 1722152977141, new Date()],
});이 파라미터는 범위와 비활성 날짜 설정과 무관하게 지정한 날짜를 활성화할 수 있습니다.
enableEdgeDatesOnly
Type: Boolean
Default: true
Options: true | false
new Calendar('#calendar', {
enableEdgeDatesOnly: true,
});이 파라미터는 사용자가 선택한 날짜 중 시작/종료 날짜만 가져오고, 중간 날짜를 무시하도록 합니다. selectionDatesMode가 'multiple-ranged'로 설정된 경우에만 동작합니다.
enableDateToggle
Type: Boolean | Function
Default: true
Options: true | false | () => false
new Calendar('#calendar', {
enableDateToggle: false,
// or with a callback
enableDateToggle: (self) => new Date(self.selectedDates[0]) < new Date(),
});enableDateToggle이 true이거나 콜백이 true를 반환하면, 이미 선택된 날짜를 다시 클릭했을 때 선택이 해제됩니다.
enableWeekNumbers
ESM 마이그레이션: 기존 옵션과 콜백을 유지하고 vanilla-calendar-pro에서 weeks 확장을 import한 뒤 생성자의 extensions: [weeks] 배열에 추가하세요. 함수처럼 호출하지 않습니다.
Type: Boolean
Default: false
Options: true | false
import { Calendar, weeks } from 'vanilla-calendar-pro';
new Calendar('#calendar', {
extensions: [weeks],
enableWeekNumbers: true,
});이 파라미터로 연중 주 번호 표시 여부를 결정할 수 있습니다.
enableMonthChangeOnDayClick
Type: Boolean
Default: true
Options: true | false
new Calendar('#calendar', {
enableMonthChangeOnDayClick: false,
});이 파라미터로 이전/다음 달의 날짜를 클릭했을 때 월이 전환될지 여부를 결정할 수 있습니다.
enableJumpToSelectedDate
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
enableJumpToSelectedDate: true,
selectedDates: ['2018-05-02'],
});이 옵션이 활성화되어 있고 하나 이상의 선택된 날짜가 지정되었지만 selectedMonth와 selectedYear를 지정하지 않았다면, 캘린더는 첫 번째 선택된 날짜로 이동합니다. false로 설정하면 캘린더는 항상 현재 월/연도로 열립니다.
selectedMonth와 selectedYear가 지정된 경우에는 영향을 주지 않습니다.enableCollapse새 소식
확장 기능이 없는 이전 버전에서 업그레이드할 때 기존 옵션과 콜백은 유지하세요. ESM에서는 weeks 확장을 이름으로 import하고 생성자에 extensions: [weeks]을 추가하세요. 확장 기능을 함수처럼 호출하지 않습니다. import하거나 등록하는 것만으로 기능이 활성화되지는 않습니다.
Type: Boolean
Default: false
Options: true | false
import { Calendar, weeks } from 'vanilla-calendar-pro';
new Calendar('#calendar', {
extensions: [weeks],
enableCollapse: true,
});그리드 아래에 월을 한 주로 접거나 다시 펼치는 컨트롤을 추가합니다. 표시된 월에 속하는 첫 번째 선택 날짜가 있으면 그 날짜를 기준으로 하고, 없으면 해당 월에 속하는 오늘, 그마저 없으면 표시된 월의 1일을 기준으로 주를 정합니다. 마우스가 있는 기기에서는 셰브론으로, 터치 기기에서는 위아래로 끌 수 있는 그래버로 표시됩니다.
enableCollapse는 enableSwipe나 animation을 필요로 하지 않습니다. 접으면 type이 'week'로 바뀌므로 calendar.type으로 현재 상태를 알 수 있고, set({ type: 'week' })는 전환 없이 같은 결과를 냅니다. 이 옵션은 default와 week 유형에서만 지원되며, 다른 유형은 init()에서 오류를 발생시킵니다.접기와 펼치기는 weeks가 담당합니다. motion 없이도 버튼을 누르면 즉시 전환됩니다. 드래그에는 weeks와 motion을 함께 등록하고, 전환 애니메이션에는 animation을 활성화하세요. motion만으로는 주간 보기가 포함되지 않습니다.
enableSwipe새 소식
확장 기능이 없는 이전 버전에서 업그레이드할 때 기존 옵션과 콜백은 유지하세요. ESM에서는 motion을 이름으로 import하고 생성자에 extensions: [motion]을 추가하세요. 확장 기능을 함수처럼 호출하지 않습니다. import하거나 등록하는 것만으로 기능이 활성화되지는 않습니다.
Type: Boolean
Default: false
Options: true | false
import { Calendar, motion } from 'vanilla-calendar-pro';
new Calendar('#calendar', {
extensions: [motion],
enableSwipe: true,
});화살표로 이동할 수 있는 모든 뷰(default, multiple, week, 연도 목록)에서 캘린더 콘텐츠를 옆으로 끌어 다음 또는 이전 기간으로 이동할 수 있게 합니다. 이웃한 기간은 포인터를 따라가며, 손을 뗄 때의 거리와 속도에 따라 제자리에 자리 잡거나 원래대로 돌아갑니다.
enableSwipe는 enableCollapse나 animation을 필요로 하지 않으며, 애니메이션이 없으면 손을 뗄 때 즉시 정착합니다. 캘린더 위에서의 세로 스크롤은 페이지에
맡깁니다. 스와이프는 해당 화살표가 보일 때만 가능하므로 dateMin, dateMax와 탐색 제한을 따릅니다. 끌기를 끝낸 위치의 날짜는 선택되지 않습니다.
selectionDatesMode
Type: String | false
Default: 'single'
Options: 'single' | 'multiple' | 'multiple-ranged' | false
new Calendar('#calendar', {
selectionDatesMode: 'single',
});이 파라미터는 단일/다중 날짜 선택을 허용할지, 혹은 날짜 선택을 완전히 비활성화할지 결정합니다.
selectionMonthsMode
Type: Boolean
Default: true
Options: true | false | 'only-arrows'
new Calendar('#calendar', {
selectionMonthsMode: false,
});이 파라미터는 월 선택을 비활성화하거나, 화살표로만 월 전환을 허용하거나, 어떤 방식으로든 월 전환을 허용할지 결정합니다.
selectionYearsMode
Type: Boolean
Default: true
Options: true | false | 'only-arrows'
new Calendar('#calendar', {
selectionYearsMode: false,
});이 파라미터는 연도 선택을 비활성화하거나, 화살표로만 연도 전환을 허용하거나, 어떤 방식으로든 연도 전환을 허용할지 결정합니다.
selectionTimeMode
확장 기능이 없는 이전 버전에서 업그레이드할 때 기존 옵션과 콜백은 유지하세요. ESM에서는 time을 이름으로 import하고 생성자에 extensions: [time]을 추가하세요. 확장 기능을 함수처럼 호출하지 않습니다. import하거나 등록하는 것만으로 기능이 활성화되지는 않습니다.
Type: false | Number
Default: false
Options: false | 24 | 12
import { Calendar, time } from 'vanilla-calendar-pro';
new Calendar('#calendar', {
extensions: [time],
selectionTimeMode: 24,
});이 파라미터는 시간 선택을 활성화합니다. 숫자로 24시간 또는 12시간 형식을 지정할 수도 있습니다.
selectedDates
Type: String[] | Number[] | Date[]
Default: null
Options: ['YYYY-MM-DD'] | [Number] | [Date] | null
new Calendar('#calendar', {
selectedDates: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
});이 파라미터는 캘린더 초기화 시 선택될 날짜 목록을 지정할 수 있습니다.
selectedMonth
Type: Number
Default: null
Options: from 0 to 11 | null
new Calendar('#calendar', {
selectedMonth: 0,
});이 파라미터는 캘린더 초기화 시 표시될 월을 정의합니다. JS 표준에 따라 월은 0~11로 번호가 매겨집니다. 첫 번째 선택된 날짜로 이동하려면 enableJumpToSelectedDate를 참고하세요.
selectedYear
Type: Number
Default: null
Options: Number (YYYY) | null
new Calendar('#calendar', {
selectedYear: 2022,
});이 파라미터는 캘린더 초기화 시 표시될 연도를 정의합니다. 첫 번째 선택된 날짜로 이동하려면 enableJumpToSelectedDate를 참고하세요.
selectedHolidays
Type: String[] | Number[] | Date[]
Default: null
Options: ['YYYY-MM-DD'] | [Number] | [Date] | null
new Calendar('#calendar', {
selectedHolidays: ['2022-08-10:2022-08-15', '2022-08-20', 1722152977141, new Date()],
});이 파라미터는 공휴일로 간주될 날짜를 지정하며, 스타일링을 위한 추가 data 속성이 부여됩니다.
selectedWeekends
Type: Number
Default: [0, 6]
Options: number[0-6]
new Calendar('#calendar', {
selectedWeekends: [0, 6],
});이 파라미터는 주말 요일을 지정할 수 있습니다. 0~6의 숫자 배열을 지정하며, 숫자는 요일 식별자를 의미합니다. JS 표준에 따라 요일은 0부터 시작하며 0은 일요일입니다.
selectedTime
ESM: 생성자의 extensions 배열에 time을 등록해야 합니다. 이 옵션과 값은 기존 Calendar 설정에 그대로 둡니다.
Type: String
Default: null
Options: 'hh:mm aa' | null
import { Calendar, time } from 'vanilla-calendar-pro';
new Calendar('#calendar', {
extensions: [time],
selectedTime: '03:44 AM',
});이 파라미터는 캘린더 초기화 시 표시될 시간을 설정합니다. 시간은 'hh:mm aa' 형식이며, 'aa'는 AM/PM 표시입니다. 24시간 형식을 사용할 때는 'aa' 표시가 필요 없습니다.
selectedTheme
Type: String
Default: 'system'
Options: string (custom theme) | 'light' | 'dark' | 'system'
new Calendar('#calendar', {
selectedTheme: 'system',
});이 파라미터는 캘린더의 테마를 정의합니다. 기본적으로 테마는 사용자의 시스템 또는 사이트 설정에 따라 결정됩니다.
timeMinHour
ESM: 생성자의 extensions 배열에 time을 등록해야 합니다. 이 옵션과 값은 기존 Calendar 설정에 그대로 둡니다.
Type: Number
Default: 0
Options: from 0 to 23
import { Calendar, time } from 'vanilla-calendar-pro';
new Calendar('#calendar', {
extensions: [time],
timeMinHour: 0,
});이 파라미터는 선택 가능한 최소 시간을 지정합니다.
timeMaxHour
ESM: 생성자의 extensions 배열에 time을 등록해야 합니다. 이 옵션과 값은 기존 Calendar 설정에 그대로 둡니다.
Type: Number
Default: 23
Options: from 0 to 23
import { Calendar, time } from 'vanilla-calendar-pro';
new Calendar('#calendar', {
extensions: [time],
timeMaxHour: 23,
});이 파라미터는 선택 가능한 최대 시간을 지정합니다.
timeMinMinute
ESM: 생성자의 extensions 배열에 time을 등록해야 합니다. 이 옵션과 값은 기존 Calendar 설정에 그대로 둡니다.
Type: Number
Default: 0
Options: from 0 to 59
import { Calendar, time } from 'vanilla-calendar-pro';
new Calendar('#calendar', {
extensions: [time],
timeMinMinute: 0,
});이 파라미터는 선택 가능한 최소 분을 지정합니다.
timeMaxMinute
ESM: 생성자의 extensions 배열에 time을 등록해야 합니다. 이 옵션과 값은 기존 Calendar 설정에 그대로 둡니다.
Type: Number
Default: 59
Options: from 0 to 59
import { Calendar, time } from 'vanilla-calendar-pro';
new Calendar('#calendar', {
extensions: [time],
timeMaxMinute: 59,
});이 파라미터는 선택 가능한 최대 분을 지정합니다.
timeControls
ESM: 생성자의 extensions 배열에 time을 등록해야 합니다. 이 옵션과 값은 기존 Calendar 설정에 그대로 둡니다.
Type: String
Default: 'all'
Options: 'all' | 'range'
import { Calendar, time } from 'vanilla-calendar-pro';
new Calendar('#calendar', {
extensions: [time],
timeControls: 'all',
});이 파라미터는 시간 선택 방법을 정의합니다: 'all'(모든 방법) 또는 'range'(컨트롤러만).
timeStepHour
ESM: 생성자의 extensions 배열에 time을 등록해야 합니다. 이 옵션과 값은 기존 Calendar 설정에 그대로 둡니다.
Type: Number
Default: 1
Options: from 1 to 23
import { Calendar, time } from 'vanilla-calendar-pro';
new Calendar('#calendar', {
extensions: [time],
timeStepHour: 1,
});이 파라미터는 시간 컨트롤러의 단계(step)를 설정합니다.
timeStepMinute
ESM: 생성자의 extensions 배열에 time을 등록해야 합니다. 이 옵션과 값은 기존 Calendar 설정에 그대로 둡니다.
Type: Number
Default: 1
Options: from 1 to 59
import { Calendar, time } from 'vanilla-calendar-pro';
new Calendar('#calendar', {
extensions: [time],
timeStepMinute: 1,
});이 파라미터는 분 컨트롤러의 단계(step)를 설정합니다.
sanitizerHTML
Type: Function
Default: (html) => html
import DOMPurify from 'dompurify';
new Calendar('#calendar', {
sanitizerHTML: (html) => DOMPurify.sanitize(html),
});sanitizerHTML은 layouts, popups.html, onCreateDateRangeTooltip에서 제공하는 HTML을 처리합니다. 기본 구현은 문자열을 그대로 반환하며 캘린더에는 HTML 정제기가 내장되어 있지 않습니다. 신뢰할 수 있는 마크업만 사용하거나 외부 콘텐츠를 렌더링하기 전에 DOMPurify처럼 유지 관리되는 정제기를 설정하세요. 이 콜백은 앱의 Content Security Policy를 설정하지 않습니다. labels와 styles는 HTML이 아닌 일반 텍스트와 CSS 클래스 이름으로 처리됩니다.