VIPCalendar

Beautiful React calendar components with holidays support for 100+ countries.

🌐 Demo Website: vipcalendar.me

Installation

npm install vipcalendar

Features

• 📅 Yearly, Half-year, Monthly, and Weekly calendar views
• 🎉 Public holidays for 100+ countries
• 🎨 20+ beautiful built-in themes (Classic, Cute, Nature, Cool)
• 🌍 Multi-language support (English, Chinese, Spanish, French, German, Japanese, Korean, etc.)
• 📱 Fully responsive design
• ⚛️ TypeScript support

Quick Start

import { 
  CalendarStyleProvider, 
  YearlyCalendar, 
  MonthlyCalendar,
  StyleSelector 
} from 'vipcalendar';

function App() {
  return (
    <CalendarStyleProvider>
      <StyleSelector lang="en" />
      <YearlyCalendar 
        year={2025} 
        countryCode="US" 
        holidays={[]} 
        onYearChange={(year) => console.log(year)}
        onMonthClick={(month) => console.log(month)}
        lang="en"
      />
    </CalendarStyleProvider>
  );
}

Components

| Component | Description | |-----------|-------------| | CalendarStyleProvider | Context provider for calendar styles | | YearlyCalendar | Full year view with 12 months | | HalfYearCalendar | 6-month view (H1: Jan-Jun, H2: Jul-Dec) | | MonthlyCalendar | Single month view | | WeeklyCalendar | Single week view | | StyleSelector | Theme picker dropdown | | HolidayList | Holiday list component |

Props

YearlyCalendar

| Prop | Type | Description | |------|------|-------------| | year | number | Year to display | | countryCode | string | Country code (e.g., 'US', 'CN') | | holidays | Holiday[] | Array of holiday objects | | onYearChange | (year: number) => void | Year change callback | | onMonthClick | (month: number) => void | Month click callback | | lang | string | Language code (default: 'en') |

MonthlyCalendar

| Prop | Type | Description | |------|------|-------------| | year | number | Year to display | | month | number | Month (0-11) | | countryCode | string | Country code | | holidaysMap | HolidaysByDate | Holidays grouped by date | | showNavigation | boolean | Show prev/next buttons | | lang | string | Language code |

Themes

20+ built-in themes organized in 4 categories:

• Classic: Default, Clean, Elegant, Minimal, Corporate
• Cute: Sakura, Candy, Ocean, Sunset, Mint
• Nature: Forest, Desert, Arctic, Tropical, Autumn
• Cool: Neon, Cyberpunk, Space, Retro, Monochrome

Peer Dependencies

{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0"
}

License

MIT

🌐 Website: vipcalendar.me

Deployment

This project is optimized for deployment on Vercel:

npm run build

License

MIT License