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
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.
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
Events dynamically change based on the selected month/year.
ts Copy Edit { "yyyy-mm-dd": Event[] } Efficient date filtering using utility functions (no date-fns/dayjs).
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
import CalendarComponent from "@/components/ui/calender-for-event";
export default function DemoOne() {
return <CalendarComponent />;
}