react-calendar-z

react-calendar-z

LIVE EXAMPLE

---

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