# Calender for event

> React Calendar Component for Events (Masterclasses & Bootcamps) This CalendarComponent is a fully functional React-based calendar UI that visually displays scheduled events like Masterclasses and Bootcamps, with an intuitive design, date navigation, and detailed event listing panel. Built with Tailwind CSS, Lucide Icons, and custom utilities (instead of libraries like date-fns), this component is responsive and user-friendly.  ✅ Key Features 1. Event Calendar View Displays a monthly calendar with:  Dynamic month navigation (<<, >> buttons).  Colored highlights for days with events.  💚 Green → Masterclass  💜 Purple → Bootcamp  Gradient → Both on same day  Today’s date is auto-highlighted with blue.  2. Event Sidebar On date selection, the right panel shows:  All events on the selected day.  Each event includes:  Event type (Masterclass / Bootcamp)  Title and time  A Join Meeting button (opens meeting link in new tab)  Graceful handling for days with no events  3. Navigation Users can move to the previous or next month using Chevron icons.  Events dynamically change based on the selected month/year.  4. Data Handling Uses a dummyEvents object structured as:  ts Copy Edit {   "yyyy-mm-dd": Event\[\] } Efficient date filtering using utility functions (no date-fns/dayjs).  5. Utility Functions Includes clean implementations of:  addMonths, addDays  startOfMonth, endOfMonth, startOfWeek, endOfWeek  formatDate, isSameDay, isSameMonth, isToday, isBefore  🧠 How it Works Matrix Generation:  getMonthMatrix() generates a 6x7 grid (weeks × days) to display dates for the current month including previous/next month's overlapping dates.  Event Detection:  getEventDatesForMonth() returns which days have masterclass or bootcamp events.  Event Display:  On day selection, events are shown with clickable links styled by type.  Meeting links are dynamically enabled or disabled.  🎨 Tech Stack Used React (Functional components + Hooks)  Tailwind CSS for styling  Lucide-react icons (ChevronLeft, ChevronRight, ExternalLink)  Custom date utilities (pure JS)  📂 Potential Use Cases Educational platforms (like cohort-based learning apps)  Internal company event schedulers  Webinars / Online workshop managers  Hybrid team meeting dashboards

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@uniquesonu/components/calender-for-event

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/calender-for-event?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt