Give it a star if you like this project! ⭐
A feature-rich calendar application built with React, TypeScript, and ShadCN UI components. This project provides a customizable and interactive calendar experience with multiple views, event management, and a modern UI.
https://medium.com/@yaceeer/building-a-full-featured-calendar-application-with-react-e249b3084b23
- Description: Displays a full year with mini-calendars for each month.
- Implementation:
- Component:
CalendarYearView - Uses
date-fnsfor date calculations andframer-motionfor animations. - Each month shows days with event indicators (dots); clicking a day with events opens a dialog with event details.
- Days without events are non-clickable.
- Component:
- Description: Toggleable agenda mode to display events in a list format.
- Implementation:
- Integrated in
CalendarHeaderwith a toggle button (<LayoutList />or<CalendarRange />). - Context:
useCalendarprovidesisAgendaModeandtoggleAgendaMode. - When enabled, it modifies the week/day view to show events as a list (implementation pending in week/day views).
- Integrated in
- Description: Switch between 24-hour and 12-hour (AM/PM) time display.
- Implementation:
- Context:
useCalendarprovidesuse24HourFormatandtoggleTimeFormat. - Components:
CalendarHeader: Toggle button (12or24with<Clock />).CalendarWeekView: Hours column usesformat(..., use24HourFormat ? "HH:00" : "h a").CalendarDayView: Hours column and "Happening now" section useuse24HourFormat ? "HH:mm" : "hh:mm a".
- Fully responsive to user preference across all views.
- Context:
- Description: Drag events to reschedule them within the week/day views.
- Implementation:
- Component:
DroppableAreawraps time slots inCalendarWeekViewandCalendarDayView. - Uses a DnD library (assumed to be
@dnd-kit/coreor similar) for drag functionality. - Time slots (every 30 minutes) accept drops and trigger
AddEditEventDialogfor new events.
- Component:
- Description: Toggle between light and dark themes.
- Implementation:
- Component:
ModeToggle(ShadCN component) inCalendarHeader. - Uses Tailwind CSS dark mode classes (
dark:prefix) throughout components. - Fully compatible with all ShadCN components and custom styles.
- Component:
- Description: UI built entirely with ShadCN components for consistency and ease of styling.
- Implementation:
- Components used:
Button,Toggle,Dialog,ScrollArea,DayPicker,Select,Input,Textarea, etc. - Custom components (e.g.,
EventBullet,CalendarTimeline) styled with Tailwind CSS to match ShadCN aesthetics.
- Components used:
- Description: Filter events by their assigned colors.
- Implementation:
- Component:
FilterEventsinCalendarHeader. - Uses
useCalendarcontext (selectedColors,filterEventsBySelectedColors). - Dropdown menu with color options; clicking a color toggles its inclusion without closing the menu (
onSelectwithe.preventDefault()).
- Component:
- Description: View detailed event information in a dialog.
- Implementation:
- Component:
EventListDialog. - Triggered from
CalendarYearView(days with events), shows event title, time, and color-coded bullet. - Supports "dot" and "colored" variants for event representation.
- Component:
- Description: Full CRUD operations for events.
- Implementation:
- Component:
AddEditEventDialog.- Create: Opens with empty form; submits to
addEventfromuseCalendar. - Update: Opens with pre-filled event data; submits to
editEvent. - Delete: (Assumed to be implemented elsewhere, e.g., within the dialog or event list; requires
deleteEventin context).
- Create: Opens with empty form; submits to
- Form validation with
zodviaeventSchema.ts. - Integrated in week/day views via
DroppableAreaand in header via "Add Event" button.
- Component:
- Description: Fully responsive layout for all views.
- Implementation:
- Uses Tailwind CSS for responsive design.
- Media queries and utility classes ensure proper display on various screen sizes.
- Components adapt to different viewports (e.g.,
CalendarYearViewstacks months on smaller screens).
- Description: Smooth transitions and animations for UI interactions.
- Implementation:
- Uses
framer-motionfor animations. - Components like
CalendarYearView,CalendarWeekView, andAddEditEventDialogutilize motion variants for entrance/exit animations. - Animations enhance user experience without overwhelming the interface.
- Uses
-
Clone the repository:
git clone https://github.com/yassir-jeraidi/full-calendar cd calendar-app -
Install dependencies:
npm install
-
Run the application:
npm run dev
- Switch Views: Use the header buttons (Day, Week, Month, Year) to change views.
- Toggle Time Format: Click the "12/24" button in the header.
- Filter Events: Use the filter dropdown to show/hide events by color.
- Add Event: Click "Add Event" in the header or a time slot in week/day views.
- Edit Event: Click an existing event to open the edit dialog.
- View Details: In year view, click a day with events to see details.
- Dark Mode: Toggle via the mode switch in the header.
- React: Core library
- TypeScript: Type safety
- ShadCN UI: UI components
- date-fns: Date manipulation
- framer-motion: Animations
- zod: Schema validation
- react-hook-form: Form handling
- Fork the repository.
- Create a feature branch (
git checkout -b feature/new-feature). - Commit changes (
git commit -m "Add new feature"). - Push to the branch (
git push origin feature/new-feature). - Open a pull request.