RNBlocks - React Native Components
[BLOCKS]/Calendar
SYS.UNIT // INTERACTIVE-CALENDAR

Calendar

A touch-friendly monthly calendar with marked dates and range selection.

RUNTIME: 0.00 KB
STYLES: StyleSheet
PLATFORMS: iOS • Android • Web

// SYSTEM.STAGE

┌┐
SIM.ACTIVE
November 2026
Select date
Sun
Mon
Tue
Wed
Thu
Fri
Sat
└┘

Installation

Install the component and its peer dependencies automatically via the CLI:

pnpm dlx @rnblocks/cli add interactive-calendar

// SYS.USAGE

Drop this code into your screen or view:

interactive-calendar-example.tsx
1import { InteractiveCalendar } from "@/components/interactive-calendar";
2 
3export default function BookingScreen() {
4  return (
5    <InteractiveCalendar
6      theme="dark"
7      accentColor="#4F46E5"
8      showTodayButton={true}
9      onSelectDate={(selectedDate) => {
10        console.log("User picked date:", selectedDate.toISOString());
11      }}
12      markedDates={{
13        "2025-03-15": { marked: true, dotColor: "#10B981" },
14        "2025-03-22": { dots: [{ color: "#EF4444" }, { color: "#3B82F6" }] },
15      }}
16    />
17  );
18}

// SPEC.PROPS_API

Configurable interfaces for <InteractiveCalendar />

initialDate
Date

Initial calendar month and default selected day.

DEFAULT:new Date()
selectedDate
Date

Controlled selected date prop for controlled state management.

DEFAULT:undefined
theme
"dark" | "light"

Color theme mode for calendar card, month header, and grid cells.

DEFAULT:"dark"
accentColor
string

Color of the active selected day circle and event markers.

DEFAULT:"#4F46E5"
showTodayButton
boolean

Whether to render a quick 'Today' shortcut button in the header.

DEFAULT:true
markedDates
Record<string, MarkedDateConfig>

Map of ISO date keys (YYYY-MM-DD) to event dot badges or marking configs.

DEFAULT:undefined
onSelectDate
(date: Date) => void

Callback fired when any day in the month grid is selected.

DEFAULT:undefined

// PERFORMANCE_&_A11Y

Native touch gestures, screen reader attributes, and 60–120 FPS frame budgets:

Container declares accessibilityRole='grid' for assistive technology recognition.
Each day cell declares accessibilityRole='button' with descriptive date announcement.
Dynamic accessibilityState={{ selected: isSelected }} on active date.
Header controls declare accessible labels for 'Previous month', 'Next month', and 'Go to today'.
[PREV]Pie Chart
Floating Docker[NEXT]