Calendar

Developed for Book My Event.

Examples

Instalation

npm i bme-calendar

Usage

Import styles

import "bme-calendar/style.css";

Date Picker 24x24px

import { useState } from "react";
import { Calendar } from "bme-calendar";
import "bme-calendar/style.css";

function App() {
  const [day, setDay] = useState<string>();

  return (
    <>
      <h2>Календар</h2>
      <Calendar setDay={setDay} />
      <p>Дата: {day}</p>
    </>
  );
}

export default App;

Date Range Picker 24x24px

import { useState } from "react";
import { Calendar } from "bme-calendar";
import "bme-calendar/style.css";

function App() {
  const [range, setRange] = useState<string[]>();

  return (
    <>
      <h2>Діапазон дат</h2>
      <Calendar type="range" setRange={setRange} range={range} />
      <div>
        <p>Список дат:</p>
        <ul>
          {range?.map((item) => {
            return <li key={item}>{item}</li>;
          })}
        </ul>
      </div>
    </>
  );
}

export default App;

The current day is outlined.

The default type is Date Picker (type="calendar").

The default cell size is 24x24px (daySize="desktop").

To receive a 40x32px cell, add props to the Calendar (daySize="mobile"):

<Calendar setDay={setDay} daySize="mobile" />

API

| Prop | Type | Default | Description | | ---------- | --------------------------- | ------------ | -------------------------------------------------- | | type | "calendar" | "range" | "calendar" | Calendar mode: single date or date range | | setDay | (day: string) => void | — | Callback for setting the selected date | | setRange | (range: string[]) => void | — | Callback for setting the selected date range | | range | string[] | — | Array of selected dates (used with type="range") | | daySize | "desktop" | "mobile" | "desktop" | Cell size: desktop = 24×24px, mobile = 40×32px |