Shadcn.io is not affiliated with official shadcn/ui
React Weekly Calendar Planner Block
A weekly planner calendar with hourly time slots, event blocks spanning time ranges, and navigable day headers built with React, Next.js, shadcn/ui, and Tailwind CSS
Plan your week at a glance with this hourly time-slot planner. Event blocks span across hours with category-colored left borders, and day headers show date and event counts. Built with TypeScript, shadcn/ui Button components, and Tailwind CSS. Perfect for productivity apps, team planners, and scheduling dashboards.
React Weekly Calendar Planner Block preview
Installation
Related Components
Monthly View
Full month calendar grid
Agenda List
Chronological event list
Booking Slots
Appointment booking interface
Team Schedule
Team availability matrix
Event Details
Event detail card with RSVP
Availability Picker
Day/time availability selector
FAQ
Was this page helpful?
Sign in to leave feedback.
React Weather Forecast Calendar Block
A React 7-day weather forecast calendar block for Next.js with temperature, conditions, wind speed, and daily weather icons built with shadcn/ui and Tailwind CSS
React Year Overview Calendar Block
React 12-month year overview calendar block for Next.js with heat map style event density per day, month grids, color-coded intensity levels, and yearly statistics using shadcn/ui and Tailwind CSS