Full Calendar

Full Calendar is a feature-rich calendar application built using React, TypeScript, and ShadCN UI components. It is designed to provide a customizable and interactive calendar experience suitable for personal scheduling or team collaboration.

Key Capabilities

• Multiple Views: Navigate through Day, Week, Month, Year, and Agenda views.
• Event Management: Full CRUD (Create, Read, Update, Delete) operations for events, including support for recurring events and metadata like title, description, and attendees.
• Interactivity: Supports drag-and-drop for moving events between time slots/dates and event resizing in day and week views.
• Customization: Features include color-coding for events, toggling between 24-hour and 12-hour time formats, and full dark mode support.
• Multi-User Support: Ability to filter events by user for collaborative environments.

You can install the calendar component directly into your project using the ShadCN CLI by pointing to the custom registry URL.

npx shadcn@latest add "https://calendar.jeraidi.dev/r/full-calendar.json"

To run the full repository locally for development, follow these steps:

1. Clone the repository:

   git clone https://github.com/yassir-jeraidi/full-calendar.git
   cd full-calendar

2. Install dependencies using pnpm:

   pnpm install

3. Start the development server:

   pnpm dev

4. Access the app at http://localhost:3000.

To add the Full Calendar component to your project, use the shadcn CLI to pull the component directly from the custom ShadCN UI registry. This will integrate the component and its dependencies into your local project structure.

npx shadcn@latest add "https://calendar.jeraidi.tech/r/full-calendar.json"

To use the calendar features, wrap your component tree with the CalendarProvider. This provider manages the global state for events, users, view settings, and filters. It also persists certain settings (like view and time format) to local storage automatically.

Props

• children: React nodes to be wrapped.
• users: An array of IUser objects.
• events: An array of IEvent objects.
• view (optional): The initial TCalendarView (e.g., 'day').
• badge (optional): The initial badgeVariant ('dot' or 'colored').

import { CalendarProvider } from '@/features/calendar/contexts/calendar-context';

function App() {
  const users = [...]; // IUser[]
  const events = [...]; // IEvent[]

  return (
    <CalendarProvider users={users} events={events} view="day" badge="colored">
      <YourCalendarComponents />
    </CalendarProvider>
  );
}

To enable drag-and-drop capabilities within your calendar application, you must wrap your component tree (or the specific calendar section) with the DndProvider. This provider manages the internal drag state and integrates with the useCalendar context to persist event updates.

Note: DndProvider relies on useCalendar being available in the context tree to perform the actual event updates via updateEvent.

import { DndProvider } from '@/features/calendar/contexts/dnd-context';
import { CalendarProvider } from '@/features/calendar/contexts/calendar-context';

function App() {
  return (
    <CalendarProvider>
      <DndProvider>
        <MyCalendar />
      </DndProvider>
    </CalendarProvider>
  );
}

After installation, import the Calendar component. It is recommended to wrap it in a Suspense boundary with a CalendarSkeleton to handle loading states during data fetching.

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>
  );
}

Once installed, you can use the Calendar component within your application. It is recommended to wrap the component in a Suspense boundary and provide a CalendarSkeleton as a fallback to handle loading states gracefully.

import React, { Suspense } from "react";
import { Calendar } from "@/components/calendar/calendar";
import { CalendarSkeleton } from "@/components/calendar/skeletons/calendar-skeleton";

export default function CalendarPage() {
  return (
    <Suspense fallback={<CalendarSkeleton />}>
      <Calendar />
    </Suspense>
  );
}

The eventSchema is a Zod schema used to validate event management form data. It ensures that all required fields are present and conform to the expected types and constraints. Use this schema to validate data before submitting event creation or update forms.

import { eventSchema } from './path-to-schemas';

const result = eventSchema.safeParse({
  title: "Meeting",
  description: "Project sync",
  startDate: new Date(),
  endDate: new Date(),
  color: "blue"
});

if (!result.success) {
  console.error(result.error.format());
}