React Calendar Pro

A lightweight, customizable and fully featured React calendar component.

Features

• 🗓️ Month view calendar
• ✨ Date selection
• 🌍 Multi-language support
• 🎨 Customizable styles
• 📌 Event markers
• ↔️ Date range selection
• 🚀 TypeScript support

Installation

npm install react-calendar-pro
# or
yarn add react-calendar-pro

Usage

import React, { useState } from 'react';
import Calendar, { CalendarEvent } from 'react-calendar-pro';
import 'react-calendar-pro/dist/index.css'; // 引入样式

const App = () => {
  const [selectedDate, setSelectedDate] = useState(new Date());
  
  const events: CalendarEvent[] = [
    {
      id: '1',
      title: 'Team Meeting',
      date: new Date(new Date().getFullYear(), new Date().getMonth(), 15),
      color: '#3b82f6'
    },
    {
      id: '2',
      title: 'Product Launch',
      date: new Date(new Date().getFullYear(), new Date().getMonth(), 20),
      color: '#ef4444'
    }
  ];

  return (
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      <Calendar
        selectedDate={selectedDate}
        onDateSelect={setSelectedDate}
        events={events}
        locale="zh-CN"
        weekStart={1} // Monday
      />
    </div>
  );
};

export default App;

Props

| Prop | Type | Default | Description | |---------------------|----------------------------|-------------|------------------------------------------| | selectedDate | Date | new Date() | Currently selected date | | onDateSelect | (date: Date) => void | undefined | Callback when date is selected | | events | CalendarEvent[] | [] | Events to display on calendar | | locale | string | 'en-US' | Language and locale | | weekStart | 0 | 1 | ... | 6 | 0 (Sunday) | Start day of the week (0=Sun,1=Mon,...,6=Sat) | | className | string | '' | Custom class for the container | | showMonthNavigation | boolean | true | Show month navigation controls |

Customization

You can customize the styles with CSS variables:

:root {
  --calendar-primary-color: #3b82f6;
  --calendar-text-color: #1f2937;
  --calendar-border-color: #e5e7eb;
  --calendar-event-dot-size: 6px;
}

License

MIT © Your Name