A comprehensive, feature-rich calendar component for React applications with TypeScript support. Includes date selection, range selection, event management, and extensive customization options.

Installation

npm install @aniruddha1806/calendar

Features

📅 Single date and date range selection
📝 Event management with CRUD operations
🎨 Extensive styling customization (styles + classNames)
🌟 Highlighted dates with custom styling
📱 Responsive design with mobile support
🔒 Min/max date constraints
🌍 Multiple date format support (YMD, DMY, MDY)
♿ Full accessibility support
🎯 TypeScript support with complete type definitions
🪶 Zero external dependencies

Quick Start

import { Calendar } from '@aniruddha1806/calendar';

function App() {
  const handleDateChange = (date) => {
    console.log('Selected date:', date);
  };

  return (
    <div style={{ padding: '20px' }}>
      <Calendar
        label="Select Date"
        onChange={handleDateChange}
        todayButtonLabel="Today"
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`defaultDate`	`Date`	`new Date()`	Initial selected date
`minDate`	`Date`	`undefined`	Minimum selectable date
`maxDate`	`Date`	`undefined`	Maximum selectable date
`label`	`string`	`undefined`	Label text above the calendar input
`onChange`	`(date: Date) => void`	`undefined`	Callback when date is selected
`style`	`CSSProperties`	`undefined`	Inline styles for container
`className`	`string`	`undefined`	CSS class for container
`calendarStyle`	`CSSProperties`	`undefined`	Inline styles for calendar dropdown
`calendarClassName`	`string`	`undefined`	CSS class for calendar dropdown
`inputStyle`	`CSSProperties`	`undefined`	Inline styles for input button
`inputClassName`	`string`	`undefined`	CSS class for input button
`labelStyle`	`CSSProperties`	`undefined`	Inline styles for label
`labelClassName`	`string`	`undefined`	CSS class for label
`highlightedDates`	`HighlightedDate[]`	`[]`	Array of dates to highlight
`todayButtonLabel`	`string`	`undefined`	Label for today button (shows button if provided)
`range`	`boolean`	`false`	Enable date range selection
`defaultStartDate`	`Date`	`undefined`	Initial start date for range selection
`defaultEndDate`	`Date`	`undefined`	Initial end date for range selection
`onRangeChange`	`(start: Date \	null, end: Date \	null) => void`
`events`	`DateEvents`	`{}`	Object containing events for dates
`onEventsChange`	`(events: DateEvents) => void`	`undefined`	Callback when events are modified
`dateFormat`	`"YMD" \	"DMY" \	"MDY"`

Type Definitions

HighlightedDate

interface HighlightedDate {
  date: Date;
  style?: React.CSSProperties;
  className?: string;
}

CalendarEvent

interface CalendarEvent {
  id: string;
  note: string;
}

DateEvents

interface DateEvents {
  [dateKey: string]: CalendarEvent[];
}

Examples

Basic Date Selection

Simple calendar with date selection:

import { Calendar } from '@aniruddha1806/calendar';

function BasicCalendar() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <Calendar
      label="Choose Date"
      defaultDate={selectedDate}
      onChange={setSelectedDate}
      todayButtonLabel="Go to Today"
    />
  );
}

Date Range Selection

Enable range selection for booking systems:

import { Calendar } from '@aniruddha1806/calendar';

function DateRangePicker() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleRangeChange = (start, end) => {
    setStartDate(start);
    setEndDate(end);
    console.log('Range:', start, 'to', end);
  };

  return (
    <Calendar
      label="Select Date Range"
      range={true}
      onRangeChange={handleRangeChange}
      todayButtonLabel="Today"
    />
  );
}

With Event Management

Full event management with add/remove functionality:

import { useState } from 'react';
import { Calendar } from '@aniruddha1806/calendar';

function EventCalendar() {
  const [events, setEvents] = useState({
    '2024-1-15': [
      { id: '1', note: 'Team Meeting' },
      { id: '2', note: 'Project Deadline' }
    ],
    '2024-1-20': [
      { id: '3', note: 'Client Presentation' }
    ]
  });

  const handleEventsChange = (newEvents) => {
    setEvents(newEvents);
    console.log('Events updated:', newEvents);
  };

  return (
    <Calendar
      label="Event Calendar"
      events={events}
      onEventsChange={handleEventsChange}
      todayButtonLabel="Today"
    />
  );
}

Highlighted Dates

Highlight special dates with custom styling:

import { Calendar } from '@aniruddha1806/calendar';

function HighlightedCalendar() {
  const highlightedDates = [
    {
      date: new Date(2024, 0, 15), // January 15, 2024
      style: { backgroundColor: '#ff6b6b', color: 'white' },
      className: 'holiday'
    },
    {
      date: new Date(2024, 0, 25),
      style: { backgroundColor: '#4ecdc4', color: 'white' }
    }
  ];

  return (
    <Calendar
      label="Calendar with Highlights"
      highlightedDates={highlightedDates}
      onChange={(date) => console.log('Selected:', date)}
    />
  );
}

Custom Styled Calendar

Apply custom styling to match your design system:

import { Calendar } from '@aniruddha1806/calendar';

function CustomStyledCalendar() {
  return (
    <Calendar
      label="Custom Calendar"
      className="my-calendar"
      labelStyle={{
        fontSize: '18px',
        fontWeight: 'bold',
        color: '#2c3e50'
      }}
      inputStyle={{
        border: '2px solid #3498db',
        borderRadius: '8px',
        padding: '12px'
      }}
      calendarStyle={{
        border: '2px solid #3498db',
        borderRadius: '12px',
        boxShadow: '0 8px 25px rgba(52, 152, 219, 0.2)'
      }}
      todayButtonLabel="Today"
    />
  );
}

Date Constraints

Set minimum and maximum selectable dates:

import { Calendar } from '@aniruddha1806/calendar';

function ConstrainedCalendar() {
  const today = new Date();
  const maxDate = new Date();
  maxDate.setMonth(today.getMonth() + 3); // 3 months from now

  return (
    <Calendar
      label="Available Dates"
      minDate={today}
      maxDate={maxDate}
      onChange={(date) => console.log('Booked:', date)}
      todayButtonLabel="Today"
    />
  );
}

Different Date Formats

Support various date display formats:

import { Calendar } from '@aniruddha1806/calendar';

function FormattedCalendars() {
  return (
    <div style={{ display: 'grid', gap: '20px', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))' }}>
      <Calendar
        label="US Format (MM/DD/YYYY)"
        dateFormat="MDY"
        todayButtonLabel="Today"
      />
      
      <Calendar
        label="European Format (DD/MM/YYYY)"
        dateFormat="DMY"
        todayButtonLabel="Today"
      />
      
      <Calendar
        label="ISO Format (YYYY-MM-DD)"
        dateFormat="YMD"
        todayButtonLabel="Today"
      />
    </div>
  );
}

Booking System

Complete booking system with range selection and constraints:

import { useState } from 'react';
import { Calendar } from '@aniruddha1806/calendar';

function BookingSystem() {
  const [checkIn, setCheckIn] = useState(null);
  const [checkOut, setCheckOut] = useState(null);
  const [bookedDates] = useState([
    new Date(2024, 0, 10),
    new Date(2024, 0, 11),
    new Date(2024, 0, 12),
    new Date(2024, 0, 20),
    new Date(2024, 0, 21)
  ]);

  const highlightedDates = bookedDates.map(date => ({
    date,
    style: { backgroundColor: '#ff6b6b', color: 'white' },
    className: 'booked-date'
  }));

  const handleRangeChange = (start, end) => {
    setCheckIn(start);
    setCheckOut(end);
    
    if (start && end) {
      console.log(`Booking from \${start.toDateString()} to \${end.toDateString()}`);
    }
  };

  const today = new Date();
  const maxDate = new Date();
  maxDate.setFullYear(today.getFullYear() + 1);

  return (
    <div style={{ maxWidth: '400px', margin: '0 auto' }}>
      <Calendar
        label="Select Check-in and Check-out Dates"
        range={true}
        minDate={today}
        maxDate={maxDate}
        highlightedDates={highlightedDates}
        onRangeChange={handleRangeChange}
        todayButtonLabel="Today"
        calendarStyle={{
          border: '1px solid #e0e0e0',
          borderRadius: '8px',
          boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
        }}
      />
      
      {checkIn && checkOut && (
        <div style={{ 
          marginTop: '20px', 
          padding: '15px', 
          backgroundColor: '#f8f9fa', 
          borderRadius: '8px' 
        }}>
          <h4>Booking Summary</h4>
          <p><strong>Check-in:</strong> {checkIn.toDateString()}</p>
          <p><strong>Check-out:</strong> {checkOut.toDateString()}</p>
          <p><strong>Duration:</strong> {Math.ceil((checkOut - checkIn) / (1000 * 60 * 60 * 24))} nights</p>
        </div>
      )}
    </div>
  );
}

Project Management Calendar

Calendar with events and milestones:

import { useState } from 'react';
import { Calendar } from '@aniruddha1806/calendar';

function ProjectCalendar() {
  const [events, setEvents] = useState({
    '2024-1-15': [
      { id: '1', note: 'Sprint Planning' },
      { id: '2', note: 'Design Review' }
    ],
    '2024-1-22': [
      { id: '3', note: 'Sprint Demo' }
    ],
    '2024-1-30': [
      { id: '4', note: 'Project Milestone' }
    ]
  });

  const milestones = [
    {
      date: new Date(2024, 0, 30),
      style: { backgroundColor: '#ffd700', color: '#000', fontWeight: 'bold' },
      className: 'milestone'
    }
  ];

  return (
    <div style={{ maxWidth: '500px' }}>
      <Calendar
        label="Project Timeline"
        events={events}
        onEventsChange={setEvents}
        highlightedDates={milestones}
        todayButtonLabel="Today"
        calendarStyle={{
          width: '100%',
          border: '2px solid #007bff',
          borderRadius: '10px'
        }}
      />
      
      <div style={{ marginTop: '20px', fontSize: '14px', color: '#666' }}>
        <p>📅 Click on any date to add events</p>
        <p>⭐ Yellow dates are project milestones</p>
        <p>🔵 Blue dots indicate scheduled events</p>
      </div>
    </div>
  );
}

TypeScript Usage

The component provides full TypeScript support:

import { Calendar, CalendarProps, DateEvents, HighlightedDate } from '@aniruddha1806/calendar';

interface AppProps {
  initialDate?: Date;
}

const App: React.FC<AppProps> = ({ initialDate = new Date() }) => {
  const [selectedDate, setSelectedDate] = useState<Date>(initialDate);
  const [events, setEvents] = useState<DateEvents>({});

  const highlightedDates: HighlightedDate[] = [
    {
      date: new Date(2024, 0, 15),
      style: { backgroundColor: '#ff6b6b', color: 'white' }
    }
  ];

  const handleDateChange = (date: Date): void => {
    setSelectedDate(date);
    console.log('Selected:', date);
  };

  const handleEventsChange = (newEvents: DateEvents): void => {
    setEvents(newEvents);
  };

  const calendarProps: CalendarProps = {
    label: "Select Date",
    defaultDate: selectedDate,
    onChange: handleDateChange,
    events,
    onEventsChange: handleEventsChange,
    highlightedDates,
    todayButtonLabel: "Today",
    dateFormat: "MDY"
  };

  return <Calendar {...calendarProps} />;
};

FAQs

What is @aniruddha1806/calendar?

Is @aniruddha1806/calendar well maintained?

Package last updated on 05 Jun 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@aniruddha1806/calendar

React Calendar Component