All blocks
Calendars

Calendars blocks.

Calendar surfaces for schedules, range selection, and planning.

Calendars

Calendar 01

A single-date calendar inside a scheduling card.

Calendar
Card
Button

Schedule a review

Choose a date for your project review.

blade 
<div class="flex min-h-[560px] items-center justify-center bg-muted/20 p-6">
    <april:card class="w-full max-w-md"><slot:title>Schedule a review</slot:title><slot:description>Choose a date for your project review.</slot:description><slot:content><april:calendar class="rounded-md border" mode="single" :selected="now()" /><div class="mt-5 flex justify-end gap-2"><april:button type="button" variant="outline">Cancel</april:button><april:button type="button">Continue</april:button></div></slot:content></april:card>
</div>

Calendars

Calendar 02

A planning surface with a calendar and an agenda for the selected day.

Calendar
Card
Badge

June 2026

Plan your team schedule.

Monday, June 8

3 meetings scheduled

09:00

Design review

Sofia Carter

11:30

Team standup

Product team

15:00

Customer call

Amelia Bell

blade 
<div class="bg-muted/20 p-4 md:p-8">
    <div class="mx-auto grid max-w-4xl gap-4 lg:grid-cols-[1fr_280px]">
        <april:card><slot:title>June 2026</slot:title><slot:description>Plan your team schedule.</slot:description><slot:content><april:calendar class="rounded-md border" mode="single" :selected="now()" /></slot:content></april:card>
        <april:card><slot:title>Monday, June 8</slot:title><slot:description>3 meetings scheduled</slot:description><slot:content class="space-y-4">@foreach ([['09:00', 'Design review', 'Sofia Carter'], ['11:30', 'Team standup', 'Product team'], ['15:00', 'Customer call', 'Amelia Bell']] as [$time, $event, $owner])<div class="border-l-2 border-primary pl-3"><p class="text-xs text-muted-foreground">{{$time}}</p><p class="text-sm font-medium">{{$event}}</p><p class="text-xs text-muted-foreground">{{$owner}}</p></div>@endforeach</slot:content></april:card>
    </div>
</div>

Calendars

Calendar 03

A multi-month calendar for selecting a date range.

Calendar
Card
Range

Choose your dates

Select a start and end date for your trip.

blade 
<div class="bg-muted/20 p-4 md:p-8">
    <div class="mx-auto max-w-4xl"><april:card><slot:title>Choose your dates</slot:title><slot:description>Select a start and end date for your trip.</slot:description><slot:content><div class="overflow-x-auto"><april:calendar class="min-w-[620px] rounded-md border" mode="range" :selected="now()" :number-of-months="2" /></div><div class="mt-5 flex justify-end"><april:button type="button">Apply dates</april:button></div></slot:content></april:card></div>
</div>

Calendars

Calendar 04

A calendar with a side panel for available appointment times.

Calendar
Card
Schedule

Book a meeting

Choose a day that works for you.

Available times

Monday, June 8

blade 
<div class="bg-muted/20 p-4 md:p-8">
    <div class="mx-auto grid max-w-5xl gap-4 lg:grid-cols-[1fr_260px]"><april:card><slot:title>Book a meeting</slot:title><slot:description>Choose a day that works for you.</slot:description><slot:content><april:calendar class="rounded-md border" mode="single" :selected="now()" /></slot:content></april:card><april:card><slot:title>Available times</slot:title><slot:description>Monday, June 8</slot:description><slot:content class="space-y-2">@foreach (['09:00 AM', '10:30 AM', '01:00 PM', '03:30 PM'] as $time)<april:button type="button" variant="outline" class="w-full">{{$time}}</april:button>@endforeach</slot:content></april:card></div>
</div>

Calendars

Calendar 05

A compact date picker paired with a task list for daily planning.

Calendar
Card
Tasks

Daily plan

Keep today’s priorities visible.

Monday, June 8

3 tasks
09:00Review project brief
11:30Team standup
15:00Write launch notes
blade 
<div class="flex min-h-[560px] items-center justify-center bg-muted/20 p-6"><april:card class="w-full max-w-2xl"><slot:title>Daily plan</slot:title><slot:description>Keep today’s priorities visible.</slot:description><slot:content class="grid gap-6 md:grid-cols-[260px_1fr]"><april:calendar class="rounded-md border" mode="single" :selected="now()" /><div class="space-y-4"><div class="flex items-center justify-between"><p class="font-medium">Monday, June 8</p><april:badge variant="secondary">3 tasks</april:badge></div>@foreach ([['09:00', 'Review project brief'], ['11:30', 'Team standup'], ['15:00', 'Write launch notes']] as [$time, $task])<div class="flex gap-3 border-b pb-3 text-sm"><span class="w-12 text-muted-foreground">{{$time}}</span><span>{{$task}}</span></div>@endforeach<april:button type="button" variant="outline" class="w-full"><x-lucide-plus class="mr-2 h-4 w-4" />Add task</april:button></div></slot:content></april:card></div>
</div>