Description

• Calendar view, selected, small.
• Support to display the first day of the week: monday, sunday, friday or saturday
• Can be range date selected. (limit date)
• Support customize label (if needed)
• Light, no use lib: momentjs, dayjs...
• Add full all classes for all dates
• Mode: showMonthYearSelection

Preview

Usage

Install the package

npm install react-calendar-z

Import the module in the place you want to use:

import "react-calendar-z/build/styles.css";
import Calendar from "react-calendar-z";

Snippet

    // 2022, aug 10
    const [date, setDate] = useState(new Date(2022, 7, 10));

    <Calendar
      value={date}
      onSelectedValue={setDate}
    />

props

see index.d.ts

| props | type | description | | --------------------------- | ------------------------------------------------------------------- | ----------------------------------------------- | | className | string | | | labelMonthYearClassName | string | | | weekClassName | string | | | width | string / number | | | height | string / number | | | labelNext | string / React.ReactNode | | | labelBack | string / React.ReactNode | | | weekStart | enum (sunday / monday / friday / saturday) | default: sunday | | fitMonthDay | boolean | false: display dates of other months | | show | boolean | | | showAnchor | boolean | | | value | Date | value selected DATE | | i18nLabelWeek | IWeekLabel[] / string[]: from sunday, monday... -> saturday | auto mapping with weekStart | | i18nLabelMonth | string[] | | | bookmarkDates | IBookmarkDate[] | add a class to bookmark | | onSelectedValue | (value: Date) => any | set selected value DATE | | onChangeView | (mode: TModeView) => any | | | onClickWeekLabel | (weekLabel: IWeekLabel) => any | | | formatTittleYearMonth | (year: number, month: number, decadeData?: number[]) | your format | | readOnly | boolean | | | neighborMonthClassName | string | the className of the date | | showToday | boolean | | | todayClassName | string | | | selectedClassName | string | | | formatDayValue | (day: number) => string / React.ReactNode | | | minYear | number | default: currentYear - 100 | | maxYear | number | default: currentYear + 100 | | notBeforeTime | Date | default: undefined | | notAfterTime | Date | default: undefined | | minimumDayCanLargeThanToday | boolean | false | | showMonthYearSelection | boolean | false: display selection month year | | showNextBack | boolean | false: display next back | | rightNextBack | boolean | display position next back | | showFooter | boolean | show footer (selection date and clear status) | | showXClose | boolean | button clear status | | xCloseIcon | string / React.ReactNode | customize x-close | | formatSelectedDate | (date: Date) => string / React.ReactNode | format in footer (default MMM DD, yyyy) |

Note

xCloseIcon: When you press x to close, it will display the currently selected date again.


IWeekLabel {
  name: string; // custom label
  shortName: string; // custom short name => display name || name
  ...
}

IBookmarkDate {
  date: date; // date bookmark
  className: string; // class bookmark
  ...
}

// describe
formatTittleYearMonth: function(year: number, month: number, decadeData?: number[]) => {
  // you can set display title calendar
}

// describe
formatDayValue: function(day: number) => {
  // you can set format date
}

// describe
`minYear` | `maxYear`: Limited years can be displayed/selected
`notBeforeTime` | `notAfterTime`: Selectable date limit

// describe
`notBeforeTime` takes precedence over `minYear`
`notAfterTime` takes precedence over `maxYear`
=> we cannot select data before or after the specified data

// describe
double click title to change mode view

// weekStart: normore: see https://en.wikipedia.org/wiki/Week
`monday`, `sunday`, `friday` or `saturday` > v2.3.1

RUN

LIVE EXAMPLE

License

MIT