v3.1.0

액션

onClickDate()

Type: Function

Default: null

Options: onClickDate(self, event) => void | null

ts
new Calendar('#calendar', {
  onClickDate(self, event) {},
});

캘린더에서 특정 날짜를 클릭한 뒤 실행됩니다. 다음 파라미터를 받을 수 있습니다:

  • self - 초기화된 캘린더에 대한 참조;
  • event - 마우스 이벤트.

각 날짜 HTML 요소에는 YYYY-MM-DD 형식의 전체 날짜를 담은 data 속성이 포함되어 있습니다. 일, 월, 연도를 별도로 얻고 싶다면 표준 JS 메서드를 사용할 수 있습니다. 예: new Date('2022-11-07').getDate()7을 반환합니다.


onClickWeekDay()

Type: Function

Default: null

Options: onClickWeekDay(self, day, dateEls, event) => void | null

ts
new Calendar('#calendar', {
  onClickWeekDay(self, day, dateEls, event) {},
});

캘린더에서 요일을 클릭한 뒤 실행됩니다. 다음 파라미터를 받을 수 있습니다:

  • self - 초기화된 캘린더에 대한 참조;
  • day - 요일;
  • dateEls - 날짜 요소(HTML)의 배열;
  • event - 마우스 이벤트.

onClickWeekNumber()

Type: Function

Default: null

Options: onClickWeekNumber(self, number, year, dateEls, event) => void | null

ts
new Calendar('#calendar', {
  onClickWeekNumber(self, number, year, dateEls, event) {},
});

캘린더에서 주 번호를 클릭한 뒤 실행됩니다. 이 메서드가 동작하려면 enableWeekNumbers 파라미터가 true로 설정되어 있어야 합니다. 다음 파라미터를 받을 수 있습니다:

  • self - 초기화된 캘린더에 대한 참조;
  • number - 주 번호;
  • year - 해당 주의 연도;
  • dateEls - 날짜 요소(HTML)의 배열;
  • event - 마우스 이벤트.

onClickTitle()

Type: Function

Default: null

Options: onClickTitle(self, event) => void | null

ts
new Calendar('#calendar', {
  onClickTitle(self, event) {},
});

캘린더에서 월 또는 연도 제목을 클릭한 뒤 실행됩니다. 다음 파라미터를 받을 수 있습니다:

  • self - 초기화된 캘린더에 대한 참조;
  • event - 마우스 이벤트.

onClickMonth()

Type: Function

Default: null

Options: onClickMonth(self, event) => void | null

ts
new Calendar('#calendar', {
  onClickMonth(self, event) {},
});

캘린더에서 월을 선택한 뒤 실행됩니다. 다음 파라미터를 받을 수 있습니다:

  • self - 초기화된 캘린더에 대한 참조;
  • event - 마우스 이벤트.

onClickYear()

Type: Function

Default: null

Options: onClickYear(self, event) => void | null

ts
new Calendar('#calendar', {
  onClickYear(self, event) {},
});

캘린더에서 연도를 선택한 뒤 실행됩니다. 다음 파라미터를 받을 수 있습니다:

  • self - 초기화된 캘린더에 대한 참조;
  • event - 마우스 이벤트.

onClickArrow()

Type: Function

Default: null

Options: onClickArrow(self, event) => void | null

ts
new Calendar('#calendar', {
  onClickArrow(self, event) {},
});

캘린더에서 화살표를 클릭한 뒤 실행됩니다. 다음 파라미터를 받을 수 있습니다:

  • self - 초기화된 캘린더에 대한 참조;
  • event - 마우스 이벤트.

onChangeTime()

Type: Function

Default: null

Options: onChangeTime(self, event, isError) => void | null

ts
new Calendar('#calendar', {
  onChangeTime(self, event) {},
});

캘린더에서 시간이 변경된 뒤 실행됩니다. 다음 파라미터를 받을 수 있습니다:

  • self - 초기화된 캘린더에 대한 참조;
  • event - 변경 이벤트;
  • isError - 사용자가 잘못된 시간을 입력했으면 true를 반환합니다.

onChangeToInput()

Type: Function

Default: null

Options: onChangeToInput(self, event) => void | null

ts
new Calendar('#calendar', {
  onChangeToInput(self, event) {},
});

이 메서드가 동작하려면 inputMode 파라미터가 true로 설정되어 있어야 합니다. 캘린더에서 날짜를 클릭하거나 어떤 방식으로든 시간이 변경된 뒤 실행됩니다. 다음 파라미터를 받을 수 있습니다:

  • self - 초기화된 캘린더에 대한 참조;
  • event - 이벤트.

onCreateDateRangeTooltip()

Type: Function

Default: null

Options: onCreateDateRangeTooltip(self, dateEl, tooltipEl, dateElBCR, mainElBCR) => void | null

ts
new Calendar('#calendar', {
  onCreateDateRangeTooltip(self, dateEl, tooltipEl, dateElBCR, mainElBCR) {},
});

날짜 범위 툴팁을 만들 수 있습니다. selectionDatesMode 파라미터가 'multiple-ranged'로 설정되어 있으면 날짜 클릭 및 호버 시 동작합니다. 다음 파라미터를 받을 수 있습니다:

  • self - 초기화된 캘린더에 대한 참조.
  • dateEl - 날짜 HTML 요소;
  • tooltipEl - 툴팁 HTML 요소;
  • dateElBCR - 날짜 HTML 요소의 위치 및 크기에 대한 정보 객체;
  • mainElBCR - 캘린더 메인 HTML 요소의 위치 및 크기에 대한 정보 객체.

onCreateDateEls()

Type: Function

Default: null

Options: onCreateDateEls(self, dateEl) => void | null

ts
new Calendar('#calendar', {
  onCreateDateEls(self, dateEl) {},
});

이 메서드는 캘린더 초기화 및 변경 시점에 실행됩니다. 각 날짜에 대한 정보에 접근할 수 있습니다. 다음 파라미터를 받을 수 있습니다:

  • self - 초기화된 캘린더에 대한 참조;
  • dateEl - 날짜 HTML 요소.

onCreateMonthEls()

Type: Function

Default: null

Options: onCreateMonthEls(self, monthEl) => void | null

ts
new Calendar('#calendar', {
  onCreateMonthEls(self, monthEl) {},
});

이 메서드는 캘린더 타입이 'month'로 설정되었을 때 실행됩니다. 사용자가 월 제목을 클릭하거나, type = 'month'로 초기화했을 때도 캘린더 타입이 'month'가 됩니다. 각 월에 대한 정보에 접근할 수 있습니다. 다음 파라미터를 받을 수 있습니다:

  • self - 초기화된 캘린더에 대한 참조;
  • monthEl - 월 HTML 요소.

onCreateYearEls()

Type: Function

Default: null

Options: onCreateYearEls(self, yearEl) => void | null

ts
new Calendar('#calendar', {
  onCreateYearEls(self, yearEl) {},
});

이 메서드는 캘린더 타입이 'year'로 설정되었을 때 실행됩니다. 사용자가 연도 제목을 클릭하거나, type = 'year'로 초기화했을 때도 캘린더 타입이 'year'가 됩니다. 각 연도에 대한 정보에 접근할 수 있습니다. 다음 파라미터를 받을 수 있습니다:

  • self - 초기화된 캘린더에 대한 참조;
  • yearEl - 연도 HTML 요소.

onInit()

Type: Function

Default: null

Options: onInit(self) => void | null

ts
new Calendar('#calendar', {
  onInit(self) {},
});

이 메서드는 캘린더 초기화 시 실행됩니다. inputMode 파라미터가 true인 경우, 캘린더가 처음 표시될 때 초기화되므로 그 시점에 실행됩니다.

  • self - 초기화된 캘린더에 대한 참조.

onUpdate()

Type: Function

Default: null

Options: onUpdate(self) => void | null

ts
new Calendar('#calendar', {
  onUpdate(self) {},
});

이 메서드는 .update() 메서드로 캘린더를 업데이트/리셋할 때 실행됩니다.

  • self - 초기화된 캘린더에 대한 참조.

onDestroy()

Type: Function

Default: null

Options: onDestroy(self) => void | null

ts
new Calendar('#calendar', {
  onDestroy(self) {},
});

이 메서드는 캘린더가 삭제될 때 실행됩니다.

  • self - 초기화된 캘린더에 대한 참조.

onShow()

Type: Function

Default: null

Options: onShow(self) => void | null

ts
new Calendar('#calendar', {
  onShow(self) {},
});

이 메서드는 캘린더가 사용자에게 표시될 때 실행되며, inputMode 파라미터가 true인 경우에만 동작합니다.

  • self - 초기화된 캘린더에 대한 참조.

onHide()

Type: Function

Default: null

Options: onHide(self) => void | null

ts
new Calendar('#calendar', {
  onHide(self) {},
});

이 메서드는 캘린더가 숨겨질 때 실행되며, inputMode 파라미터가 true인 경우에만 동작합니다.

  • self - 초기화된 캘린더에 대한 참조.