react-calendar-z

react-calendar-z

LIVE EXAMPLE

---

Description

• Calendar view, selected, small.
• Can be range date selected, read-only
• Support customize label (if need)
• Support to display the first day: monday or sunday // (checking with another day...)
• light, no use lib: momentjs, dayjs...

---

Preview

Usage

Install the package

npm install --save 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

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

    <Calendar
      value={date}
      onSelectedValue={setDate}
      // showToday={true}
      // showAnchor
      // i18nLabelWeek={labelWeekDays}
      // notBeforeTime={new Date()}           >=
      // notAfterTime={new Date(2022, 7, 12)} <=
      // show  => handle show hide (when hide => reset mode to weekview)
    />

---

props

see index.d.ts

props	type	description

  className?: string;
  todayClassName?: string;
  selectedClassName?: string;
  neighborMonthClassName?: string;
  labelMonthYearClassName?: string;
  width?: string | number;
  // height?: string | number; => if update height, please change line-height of cell
  labelNext?: string | React.ReactNode;
  labelBack?: string | React.ReactNode;
  weekStart?: "monday" | "sunday";
  notBeforeTime?: Date;             //   => for range time
  notAfterTime?: Date;              //   => for range time
  readOnly?: boolean;               // mode readOnly
  show?: boolean;                   // handle show by is
  showAnchor?: boolean;
  value?: Date;                     // selected value
  showToday?: boolean;              // default true
  fitMonthDay?: boolean;            // remove dispaly other month

  // set from name and short-name order by Sunday => Monday
  i18nLabelWeek?: IWeekLabel[];     // display customize label
  i18nLabelMonth?: string[];        // display customize label
  onSelectedValue?: (value: Date) => any;

  // customize format title
  formatTittleYearMonth?: (
    year: number,
    month: number,
    decadeData?: number[]
  ) => string | React.ReactNode;
  // => year/month !== -1 => modeview week
  // => year !== -1/month == -1 => modeview month
  // => decadeData !== underfined => modeview year

  // support customize format day
  formartDayValue?: (day: number) => string | React.ReactNode;

Note

Rewrite...and add more (checking...)

RUN

LIVE EXAMPLE

License

MIT