설정
type
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새 소식
Type: Boolean | Object
Default: false
Options: true | false | { duration?: Number, easing?: String, slide?: Timing, fade?: Timing, collapse?: Timing }
Timing: { duration?: Number, easing?: String }
new Calendar('#calendar', {
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
Type: Number
Default: 2
Options: from 2 to 12
new Calendar('#calendar', {
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
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
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새 소식
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
enableCollapse: true,
});그리드 아래에 월을 한 주로 접거나 다시 펼치는 컨트롤을 추가합니다. 표시된 월에 속하는 첫 번째 선택 날짜가 있으면 그 날짜를 기준으로 하고, 없으면 해당 월에 속하는 오늘, 그마저 없으면 표시된 월의 1일을 기준으로 주를 정합니다. 마우스가 있는 기기에서는 셰브론으로, 터치 기기에서는 위아래로 끌 수 있는 그래버로 표시됩니다.
enableCollapse는 enableSwipe나 animation을 필요로 하지 않습니다. 접으면 type이 'week'로 바뀌므로 calendar.type으로 현재 상태를 알 수 있고, set({ type: 'week' })는 전환 없이 같은 결과를 냅니다. 이 옵션은 default와 week 유형에서만 지원되며, 다른 유형은 init()에서 오류를 발생시킵니다.enableSwipe새 소식
Type: Boolean
Default: false
Options: true | false
new Calendar('#calendar', {
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
Type: false | Number
Default: false
Options: false | 24 | 12
new Calendar('#calendar', {
selectionTimeMode: true,
});이 파라미터는 시간 선택을 활성화합니다. 숫자로 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
Type: String
Default: null
Options: 'hh:mm aa' | null
new Calendar('#calendar', {
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
Type: Number
Default: 0
Options: from 0 to 23
new Calendar('#calendar', {
timeMinHour: 0,
});이 파라미터는 선택 가능한 최소 시간을 지정합니다.
timeMaxHour
Type: Number
Default: 23
Options: from 0 to 23
new Calendar('#calendar', {
timeMaxHour: 23,
});이 파라미터는 선택 가능한 최대 시간을 지정합니다.
timeMinMinute
Type: Number
Default: 0
Options: from 0 to 59
new Calendar('#calendar', {
timeMinMinute: 0,
});이 파라미터는 선택 가능한 최소 분을 지정합니다.
timeMaxMinute
Type: Number
Default: 59
Options: from 0 to 59
new Calendar('#calendar', {
timeMaxMinute: 59,
});이 파라미터는 선택 가능한 최대 분을 지정합니다.
timeControls
Type: String
Default: 'all'
Options: 'all' | 'range'
new Calendar('#calendar', {
timeControls: 'all',
});이 파라미터는 시간 선택 방법을 정의합니다: 'all'(모든 방법) 또는 'range'(컨트롤러만).
timeStepHour
Type: Number
Default: 1
Options: from 1 to 23
new Calendar('#calendar', {
timeStepHour: 1,
});이 파라미터는 시간 컨트롤러의 단계(step)를 설정합니다.
timeStepMinute
Type: Number
Default: 1
Options: from 1 to 59
new Calendar('#calendar', {
timeStepMinute: 1,
});이 파라미터는 분 컨트롤러의 단계(step)를 설정합니다.
sanitizerHTML
Type: Function
Default: (html) => html
import DOMPurify from 'dompurify';
new Calendar('#calendar', {
sanitizerHTML: (html) => DOMPurify.sanitize(html),
});sanitizerHTML은 HTML 템플릿을 정제해 CSP에 안전하도록 만들 수 있습니다.