React Calendar Component

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 | undefined | Callback for range selection | | events | DateEvents | {} | Object containing events for dates | | onEventsChange | (events: DateEvents) => void | undefined | Callback when events are modified | | dateFormat | "YMD" \\| "DMY" \\| "MDY" | "MDY" | Date display format |

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} />;
};