Full Calendar Component Shadcn/ui

This is a fully functional calendar built with the popular shadcn/ui component library.

It provides various view modes (day, week, month, year), keyboard shortcuts, and a clean, customizable interface to help developers easily display and manage events within their applications.

GitHub Repo

Demo

Features

🗓️ Multiple View Modes: Toggle between day, week, month, and year views for flexible event display.

⏱️ Built-in Controls: Provides convenient controls for navigating dates, jumping to today’s date, and switching between view modes.

⌨️ Keyboard Navigation: Use keyboard shortcuts for quick and efficient calendar interaction.

⚙️ Customizable Events: Style events with different colors and easily manage event data.

Use Cases

Project Management Dashboard: Integrate the calendar to visualize project timelines, deadlines, and milestones. Imagine displaying tasks assigned to team members, color-coded by project, offering a clear overview of project progress.
Booking System: Implement the calendar in a booking application to display availability and allow users to select booking slots. A hotel reservation system, for instance, could utilize this component to showcase room availability and facilitate bookings.
Personal Productivity Tool: Create a personal task management application where users can schedule events, set reminders, and track their daily, weekly, or monthly activities.
Event Management Platform: Develop an event platform that showcases upcoming events, allows users to register, and provides detailed event information.

Installation

1. Install required dependencies:

   pnpm add date-fns react-hotkeys-hook

2. Copy the components/ui/full-calendar.tsx file from the source repository into your project.

Usage

import { Calendar } from './components/ui/full-calendar'; // Adjust path as needed
<Calendar
  events={[
    {
      id: '1',
      start: new Date('2024-08-26T09:30:00Z'),
      end: new Date('2024-08-26T14:30:00Z'),
      title: 'Meeting with John',
      color: 'pink',
    },
    {
      id: '2',
      start: new Date('2024-08-26T10:00:00Z'),
      end: new Date('2024-08-26T10:30:00Z'),
      title: 'Project Review',
      color: 'blue',
    },
  ]}
>
  {/* Calendar content as provided in the input */}
</Calendar>

Related Resources

shadcn/ui: The official repository for the shadcn/ui component library. https://ui.shadcn.com/
date-fns: A modern JavaScript date utility library. https://date-fns.org/
react-hotkeys-hook: A React hook for using keyboard shortcuts. https://github.com/JohannesKlauss/react-hotkeys-hook