Loading repository data…
Loading repository data…
yassir-jeraidi / repository
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.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
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.
Live Demo: https://calendar.jeraidi.dev
Use your preferred package manager to install the calendar component directly from the custom ShadCN UI registry:
npx shadcn@latest add "https://calendar.jeraidi.dev/r/full-calendar.json"
Import and use the Calendar component in your page:
import React, { Suspense } from "react";
import { Calendar } from "@/features/calendar/calendar";
import { CalendarSkeleton } from "@/features/calendar/skeletons/calendar-skeleton";
export default function CalendarPage() {
return (
<Suspense fallback={<CalendarSkeleton />}>
<Calendar />
</Suspense>
);
}
Here's an overview of the important files and directories in the project:
src/
├── features/
│ └── calendar/
│ ├── calendar.tsx # Main entry point component. Fetches data and wraps the app in providers.
│ ├── contexts/
│ │ ├── calendar-context.tsx # Core state management (events, users, view state, filters).
│ │ └── dnd-context.tsx # Drag-and-drop context provider.
│ ├── header/
│ │ └── calendar-header.tsx # Top navigation bar (view switcher, date nav, filters).
│ ├── views/ # Contains specific view components (Day, Week, Month, Year, Agenda).
│ ├── calendar-body.tsx # Renders the active view based on current state.
│ ├── helpers.ts # Core utility functions for date manipulation and calendar logic.
│ ├── hooks.ts # Custom hooks for calendar logic.
│ └── types.ts # TypeScript definitions for events, users, and views.
The project is architected around a central context provider that manages the state of the calendar. Here is the high-level flow:
Initialization:
Calendar component (src/components/calendar/calendar.tsx) serves as the entry point.CalendarProvider.State Management:
CalendarContext holds the application state, including the current view (Day, Week, Month, etc.), selected date, list of events, and active filters.localStorage to persist user preferences such as the preferred view, time format (12h/24h), and badge styles.Rendering Logic:
CalendarHeader allows users to navigate dates, switch views, and apply filters.CalendarBody listens to the view state from the context and dynamically renders the appropriate view component (e.g., MonthView, WeekView).Interactions:
DndProvider wraps the calendar to enable drag-and-drop functionality for events. When an event is moved, the context updates the event's start and end times.addEvent, updateEvent, and removeEvent in the context handle CRUD operations, ensuring the UI stays in sync with the data.To run the project locally, follow these steps:
Clone the repository:
git clone https://github.com/yassir-jeraidi/full-calendar.git
cd full-calendar
Install dependencies:
pnpm install
Start the development server:
pnpm dev
Open the application:
Open http://localhost:3000 in your browser to view the application.
MIT License - see LICENSE file for details.