Tunnyein Calendar

A React calendar component library with responsive design, month navigation, day selection, and context-based state management.

Features

• Fully responsive calendar grid
• Shows previous, current, and next month days with dimmed colors
• Click on day cells to select dates
• Navigate between months and years with scalable arrow icons
• Customizable colors, font, and size
• Context-based state for selected date
• Receieve date object and able to convert any format
• Explicitly add closed dates in DD/MM/YY format

Installation

"# tun-nyein-calendar" 

npm install tun-nyein-calendar
# or
yarn add tun-nyein-calendar
# or
pnpm add tun-nyein-calendar


### Usage in components
1. Wrap your app with CalendarContextProvider

import React from "react";
import { CalendarGrid, useCalendarContext, CalendarContextProvider } from "tun-nyein-calendar";

export default function Home() {
  const {calendar} = useCalendarContext();   // calender object which contains date object prop

  return (
    <CalendarContextProvider>
      <div className="px-4">
        <CalendarGrid
          size="360px"            // width `&` height of the calendar
          color="#3ff3fe"       // text color
          bgColor="#a33a"       // calendar background
          cellColor="#000000"   // day cell text color
          cellBgColor="#ffffff" // day cell background color
          closedDates={
            [
              {date: '27/11/2025', reason: 'holiday'}, 
              {date: '28/11/2025', reason: 'another holiday'}
              ]
          }   '// closed dates (date formats must be DD/MM/YY)'
        />

        // startDate - you can convert startDate in any format using 'Intl'
        `<p>{calendar?.startDate && new Intl.DateTimeFormat('en-GB', {
          day: 'numeric',
          month: 'short',
          year: 'numeric'
        }).format(calendar.startDate)}</p>`    
        
        // endDate - you can convert endDate in any format using 'Intl'
         `<p>{calendar?.endDate && new Intl.DateTimeFormat('en-GB', {
          day: 'numeric',
          month: 'short',
          year: 'numeric'
        }).format(calendar.endDate)}</p>`  
      </div>
    </CalendarContextProvider>
  );
}

# Props
| Prop          | Type   | Default       | Description                      |
| ------------- | ------ | ------------- | -------------------------------- |
| `size`        | string | `"200px"`     | Width and height of the calendar |
| `color`       | string | `#000`        | Text color of the calendar       |
| `bgColor`     | string | `transparent` | Calendar background color        |
| `cellColor`   | string | `#000`        | Day cell text color              |
| `cellBgColor` | string | `transparent` | Day cell background color        |
| `closedDates` | array  | `[]`          | array of objects                 |

# Objects in closedDates
  | date: 'DD/MM/YY',
  | reason: 'string',
- Example: closedDates=[{date: 'DD/MM/YY', reason: 'public holiday'}, {...}]

# useCalendarContext
- Provides the selected date and setter function
const { calendar } = useCalendarContext();

- calendar.startDate                 -> currently selected start date (date object)
- calendar.endDate                   -> currently selected end date (date object)

## License
MIT © IMU <[email protected]>