Calendar View — Interactive UI Component

A fully interactive, accessible, and high-performance Calendar component built using React, TypeScript, Tailwind CSS, and Storybook, following the required assignment architecture.

Live Storybook

[Add your deployed Storybook URL here]

Installation & Setup

npm install
npm run dev
npm run storybook

Project Architecture

calendar-component/
├── README.md
├── package.json
├── tsconfig.json
├── tailwind.config.js
├── .storybook/
│ ├── main.ts
│ └── preview.ts
└── src/
├── components/
│ ├── Calendar/
│ │ ├── CalendarView.tsx
│ │ ├── CalendarView.types.ts
│ │ ├── CalendarView.stories.tsx
│ │ ├── MonthView.tsx
│ │ ├── WeekView.tsx
│ │ ├── CalendarCell.tsx
│ │ └── EventModal.tsx
│ └── primitives/
│ ├── Button.tsx
│ ├── Modal.tsx
│ └── Select.tsx
├── hooks/
│ ├── useCalendar.ts
│ └── useEventManager.ts
├── utils/
│ ├── date.utils.ts
│ └── event.utils.ts
└── styles/
└── globals.css

Features

• Month & Week Views
• Add / Edit / Delete Events
• Event Modal with validation
• Responsive design
• Keyboard accessibility (WCAG 2.1 AA)