@atom-design-mog/calendar

A customizable and elegant Calendar Component for React Native, built on top of react-native-calendars and styled for the Atom Design System. Supports selected date highlighting, min/max date limits, marked dates, and callback events.

🚀 Installation

Install using npm:

npm install @atom-design-mog/calendar

Also install the required peer dependency:

npm install react-native-calendars

or using yarn:

yarn add @atom-design-mog/calendar react-native-calendars

📸 Preview

The component includes:

• 📅 Full monthly calendar
• 🔘 Selected date with Atom red theme
• 🚫 Min & Max date restrictions
• 🏷 Support for custom marked dates
• 📲 Callback when a user selects a date

📦 Usage Example

import React, { useState } from 'react';
import { View, Text, ScrollView } from 'react-native';
import CalendarComponent from '@atom-design-mog/calendar';

export default function TestCalendarsScreen() {
  const [selectedDate, setSelectedDate] = useState('2025-11-17');

  return (
    <ScrollView style={{ flex: 1 }}>
      <View style={{ padding: 20, gap: 20 }}>
        <Text style={{ fontSize: 18, fontWeight: '600' }}>
          Calendar Component
        </Text>

        <CalendarComponent
          selectedDate={selectedDate}
          onDateSelect={setSelectedDate}
          minDate="2025-01-01"
          maxDate="2025-12-31"
        />

        <Text style={{ fontSize: 16 }}>
          Selected Date: {selectedDate}
        </Text>
      </View>
    </ScrollView>
  );
}

🔧 Props API

| Prop | Type | Default | Description | | ---------------- | ------------------------------ | ----------- | ------------------------------------------------ | | selectedDate | string (YYYY-MM-DD) | null | Currently selected date | | onDateSelect | (dateString: string) => void | undefined | Callback triggered when a day is pressed | | minDate | string | undefined | Minimum selectable date | | maxDate | string | undefined | Maximum selectable date | | markedDates | object | {} | Add custom marks on specific dates | | ...props | Calendar component props | — | Additional props passed to underlying Calendar |

🏷 Marked Dates Format

You may pass custom marks like:

const markedDates = {
  "2025-11-17": { marked: true },
  "2025-11-18": { disabled: true },
  "2025-11-19": { selected: true, selectedColor: "#d9232d" }
};

The component automatically merges your marks with the selected date highlight.

🎨 Theming

This component applies Atom Design System colors:

• Selected color → #d9232d
• Today's text → #d9232d
• Arrow color → #d9232d

Clean typography defaults. You can override all theme values via the theme prop if needed.

🎛 Features

• 📅 Clean, modern calendar UI
• 🔴 Atom-themed selected date
• ⛔ Min + Max selectable date range
• 🏷 Supports rich marked dates
• ⚡ Smooth interactions
• 🧩 Fully customizable (passes props to react-native-calendars)

📝 Notes

• Always provide date strings in YYYY-MM-DD format.
• This component wraps react-native-calendars for easier UI consistency.
• Works in both Android and iOS.
• Compatible with JavaScript & TypeScript.

👤 Author Avi Gupta