React-calendar-z NPM

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