https://github.com/yevhenns/bme-calendar

NPM package
https://github.com/yevhenns/bme-calendar

react-typescript

Last synced: about 2 months ago
JSON representation

NPM package

• Host: GitHub
• URL: https://github.com/yevhenns/bme-calendar
• Owner: Yevhenns
• License: mit
• Created: 2025-03-25T08:50:52.000Z (about 2 months ago)
• Default Branch: master
• Last Pushed: 2025-04-01T09:33:54.000Z (about 2 months ago)
• Last Synced: 2025-04-01T10:30:30.549Z (about 2 months ago)
• Topics: react-typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/bme-calendar
• Size: 186 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Calendar

Developed for [Book My Event](https://evently-book.vercel.app/).

[Examples](https://bme-calendar-examples.vercel.app/)

## Instalation

```bash

npm i bme-calendar

```

## Usage

Import styles

```tsx

import "bme-calendar/style.css";

```

Date Picker 24x24px

```tsx

import { useState } from "react";

import { Calendar } from "bme-calendar";

import "bme-calendar/style.css";

function App() {

  const [day, setDay] = useState();

  return (

    <>

      
Календар

      

      
Дата: {day}

    >

  );

}


export default App;

```



  



Date Range Picker 24x24px

```tsx

import { useState } from "react";

import { Calendar } from "bme-calendar";

import "bme-calendar/style.css";

function App() {

  const [range, setRange] = useState();

  return (

    <>

      
Діапазон дат

      

      


        
Список дат:

        


          {range?.map((item) => {

            return 
{item}
;

          })}

        

      

    >

  );

}


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"):

```tsx

```