Ecme - The Ultimate Next & TypeScript Web Template

Calendar

Calendar component is used for categorize content with a keyword.

Basic

Basic usage of Calendar.

Range

RangeCalendar have similar behavior with Calendar, but it able to select start and end date.

Custom render

You can render custom day elements or apply styles & className to days with these dayStyle, dayClassName & renderDay props.

Disabled certain date

Disabled part of dates by using disabledDate prop callback.

Disable out of period date

Setting minDate & maxDate props to limit available date within a period.

Multiple date view

Calender or RangeCalendar can have mutiple date view by setting dateViewCount more than 1.

Multiple selection

Calendar component allow multiple dates selection by setting multipleSelection props

API

Calendar

Prop	Description	Type	Default
dateViewCount	Amount of date view display in picker	`number`	`1`
dayClassName	Apply className to days based on argument	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string`	-
dayStyle	Apply style to days based on argument	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties`	-
defaultMonth	Default month for uncontrolled DatePickerRange	`Date`	-
defaultView	Default DatePickerRange view	`'date'` \| `'month'` \| `'year'`	`'date'`
disabledDate	Specify the date that cannot be selected	`(date: Date) => boolean`	-
disableOutOfMonth	Whether to disable days that out of given month	`boolean`	`false`
enableHeaderLabel	Whether to disable header label to trigger view change	`boolean`	`true`
firstDayOfWeek	First day of week	`'sunday'` \| `'monday'`	`'monday'`
hideOutOfMonthDates	Whether to hide days that out of given month	`boolean`	`false`
hideWeekdays	Whether to hide week days	`boolean`	`false`
isDateFirstInRange	Highlight date as first in a range	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean`	-
isDateInRange	Highlight date in a range	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean`	-
isDateLastInRange	Highlight date as last in a range	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean`	-
labelFormat	Seperator between date display on input	`string`	`'~'`
locale	DatePickerRange locale	`dayjs locale`	`en`
lockView	Whether to lock the year or month selection on change	`boolean`	`false`
maxDate	Maximum date to select	`Date`	-
minDate	Minimum date to select	`Date`	-
monthLabelFormat	Month label format	`string`	`'YYYY'`
onChange	Callback when date is selected	`function(date: Date)`	-
onDayMouseEnter	Callback when date is hovered	`function(date: Date)`	-
paginateBy	Paginate by count of view	`number`	`dateViewCount` \| `1`
preventFocus	Prevent focusing upon click	`boolean`	`false`
range	Highlight given date range	`[Date \| null, Date \| null]`	-
renderDay	Render custome day element based on the given params	`(date: Date) => ReactNode`	`false`
value	Value of calender (Controlled)	`Date`	-
weekdayLabelFormat	Format for weekday display	`string`	`'dd'`
weekendDays	Indicate the days of weekend	`number[]`	`[0, 6]`
yearLabelFormat	Year label format	`string`	`'YYYY'`

RangeCalendar

Prop	Description	Type	Default
dateViewCount	Amount of date view display in picker	`number`	`1`
dayClassName	Apply className to days based on argument	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string`	-
dayStyle	Apply style to days based on argument	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties`	-
defaultMonth	Default month for uncontrolled DatePickerRange	`Date`	-
defaultView	Default DatePickerRange view	`'date'` \| `'month'` \| `'year'`	`'date'`
disabledDate	Specify the date that cannot be selected	`(date: Date) => boolean`	-
disableOutOfMonth	Whether to disable days that out of given month	`boolean`	`false`
enableHeaderLabel	Whether to disable header label to trigger view change	`boolean`	`true`
firstDayOfWeek	First day of week	`'sunday'` \| `'monday'`	`'monday'`
hideOutOfMonthDates	Whether to hide days that out of given month	`boolean`	`false`
hideWeekdays	Whether to hide week days	`boolean`	`false`
isDateFirstInRange	Highlight date as first in a range	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean`	-
isDateInRange	Highlight date in a range	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean`	-
isDateLastInRange	Highlight date as last in a range	`(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean`	-
labelFormat	Seperator between date display on input	`string`	`'~'`
locale	DatePickerRange locale	`dayjs locale`	`en`
lockView	Whether to lock the year or month selection on change	`boolean`	`false`
maxDate	Maximum date to select	`Date`	-
minDate	Minimum date to select	`Date`	-
monthLabelFormat	Month label format	`string`	`'YYYY'`
onChange	Callback when date is selected	`function(date: Date)`	-
onDayMouseEnter	Callback when date is hovered	`function(date: Date)`	-
paginateBy	Paginate by count of view	`number`	`dateViewCount` \| `1`
preventFocus	Prevent focusing upon click	`boolean`	`false`
range	Highlight given date range	`[Date \| null, Date \| null]`	-
renderDay	Render custome day element based on the given params	`(date: Date) => ReactNode`	`false`
singleDate	Only one date can be selected	`boolean`	`false`
value	Value of calender (Controlled)	`[Date \| null, Date \| null]`	-
weekdayLabelFormat	Format for weekday display	`string`	`'dd'`
weekendDays	Indicate the days of weekend	`number[]`	`[0, 6]`
yearLabelFormat	Year label format	`string`	`'YYYY'`

Prop

Description

Type

Default

dateViewCount

Amount of date view display in picker

number

1

dayClassName

Apply className to days based on argument

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string

dayStyle

Apply style to days based on argument

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties

defaultMonth

Default month for uncontrolled DatePickerRange

Date

defaultView

Default DatePickerRange view

'date' | 'month' | 'year'

'date'

disabledDate

Specify the date that cannot be selected

(date: Date) => boolean

disableOutOfMonth

Whether to disable days that out of given month

boolean

false

enableHeaderLabel

Whether to disable header label to trigger view change

boolean

true

firstDayOfWeek

First day of week

'sunday' | 'monday'

'monday'

hideOutOfMonthDates

Whether to hide days that out of given month

boolean

false

hideWeekdays

Whether to hide week days

boolean

false

isDateFirstInRange

Highlight date as first in a range

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean

isDateInRange

Highlight date in a range

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean

isDateLastInRange

Highlight date as last in a range

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean

labelFormat

Seperator between date display on input

string

'~'

locale

DatePickerRange locale

dayjs locale

en

lockView

Whether to lock the year or month selection on change

boolean

false

maxDate

Maximum date to select

Date

minDate

Minimum date to select

Date

monthLabelFormat

Month label format

string

'YYYY'

onChange

Callback when date is selected

function(date: Date)

onDayMouseEnter

Callback when date is hovered

function(date: Date)

paginateBy

Paginate by count of view

number

dateViewCount | 1

preventFocus

Prevent focusing upon click

boolean

false

range

Highlight given date range

[Date | null, Date | null]

renderDay

Render custome day element based on the given params

(date: Date) => ReactNode

false

value

Value of calender (Controlled)

Date

weekdayLabelFormat

Format for weekday display

string

'dd'

weekendDays

Indicate the days of weekend

number[]

[0, 6]

yearLabelFormat

Year label format

string

'YYYY'

Prop

Description

Type

Default

dateViewCount

Amount of date view display in picker

number

1

dayClassName

Apply className to days based on argument

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => string

dayStyle

Apply style to days based on argument

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => CSSProperties

defaultMonth

Default month for uncontrolled DatePickerRange

Date

defaultView

Default DatePickerRange view

'date' | 'month' | 'year'

'date'

disabledDate

Specify the date that cannot be selected

(date: Date) => boolean

disableOutOfMonth

Whether to disable days that out of given month

boolean

false

enableHeaderLabel

Whether to disable header label to trigger view change

boolean

true

firstDayOfWeek

First day of week

'sunday' | 'monday'

'monday'

hideOutOfMonthDates

Whether to hide days that out of given month

boolean

false

hideWeekdays

Whether to hide week days

boolean

false

isDateFirstInRange

Highlight date as first in a range

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean

isDateInRange

Highlight date in a range

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean

isDateLastInRange

Highlight date as last in a range

(date: Date, modifiers: {disabled: boolean, weekend: boolean, selectedInRange: boolean, selected: boolean, inRange: boolean, firstInRange: boolean, lastInRange: boolean, outOfMonth: boolean}) => boolean

labelFormat

Seperator between date display on input

string

'~'

locale

DatePickerRange locale

dayjs locale

en

lockView

Whether to lock the year or month selection on change

boolean

false

maxDate

Maximum date to select

Date

minDate

Minimum date to select

Date

monthLabelFormat

Month label format

string

'YYYY'

onChange

Callback when date is selected

function(date: Date)

onDayMouseEnter

Callback when date is hovered

function(date: Date)

paginateBy

Paginate by count of view

number

dateViewCount | 1

preventFocus

Prevent focusing upon click

boolean

false

range

Highlight given date range

[Date | null, Date | null]

renderDay

Render custome day element based on the given params

(date: Date) => ReactNode

false

singleDate

Only one date can be selected

boolean

false

value

Value of calender (Controlled)

[Date | null, Date | null]

weekdayLabelFormat

Format for weekday display

string

'dd'

weekendDays

Indicate the days of weekend

number[]

[0, 6]

yearLabelFormat

Year label format

string

'YYYY'

Mo	Tu	We	Th	Fr	Sa	Su

Mo	Tu	We	Th	Fr	Sa	Su

Mo	Tu	We	Th	Fr	Sa	Su

Mo	Tu	We	Th	Fr	Sa	Su

Mo	Tu	We	Th	Fr	Sa	Su