React Native Lite Calendar

A lightweight and customizable calendar component for React Native applications
with support for both English and Korean languages.

Screenshots

Features

• 📅 Simple and intuitive calendar interface
• 🎨 Highly customizable styles
• 🌏 Multi-language support (English & Korean)
• 📱 Cross-platform compatibility
• 🔍 Modal view support
• 🎯 Configurable date selection range with min/max dates
• ✨ Today highlighting
• 🎈 Special date marking
• 🎭 Custom themes with color schemes

Installation

1# Using npm
2npm install @choi12/rn-lite-calendar
3
4# Using yarn
5yarn add @choi12/rn-lite-calendar

Peer Dependencies

This package requires the following peer dependencies:

1{
2  "react": ">=17.0.0",
3  "react-native": ">=0.65.0",
4  "dayjs": ">=1.11.0"
5}

Types

1type CalendarDay = Dayjs; // dayjs object
2type MarkedDate = string; // 'YYYY-MM-DD' format

Usage

Basic Calendar

1import React, { useState } from 'react';
2import { Calendar } from '@choi12/rn-lite-calendar';
3import dayjs from 'dayjs';
4
5const MyCalendar = () => {
6  const [selectedDate, setSelectedDate] = useState(dayjs());
7
8  return (
9    <Calendar
10      selectedDate={selectedDate}
11      onSelectDate={setSelectedDate}
12    />
13  );
14};

Calendar Modal

1import React, { useState } from 'react';
2import { CalendarModal } from '@choi12/rn-lite-calendar';
3import dayjs from 'dayjs';
4
5const MyCalendarModal = () => {
6  const [isVisible, setIsVisible] = useState(false);
7  const [selectedDate, setSelectedDate] = useState(dayjs());
8
9  return (
10    <CalendarModal
11      isVisible={isVisible}
12      onClose={() => setIsVisible(false)}
13      selectedDate={selectedDate}
14      onSelectDate={setSelectedDate}
15    />
16  );
17};

Props

Calendar Props

Prop	Type	Required	Default	Description
selectedDate	CalendarDay	Yes	-	Currently selected date
onSelectDate	(date: CalendarDay) => void	Yes	-	Callback when a date is selected
minDate	CalendarDay	No	-	Minimum selectable date
maxDate	CalendarDay	No	-	Maximum selectable date
initialDate	CalendarDay	No	dayjs()	Initial selected date
language	'en' | 'ko'	No	'en'	Calendar language
styles	CalendarStyles	No	{}	Custom styles object
colors	CalendarColors	No	{}	Custom colors object
markedDates	string[]	No	[]	Array of dates to be marked (YYYY-MM-DD format)

CalendarModal Props

Extends Calendar Props with additional properties:

Prop	Type	Required	Default	Description
isVisible	boolean	Yes	-	Controls modal visibility
onClose	() => void	Yes	-	Callback when modal is closed
title	string	No	-	Modal title
overlayOpacity	number	No	0.5	Opacity of modal overlay

Customization

Theme Colors

1const colors = {
2  primaryColor: '#8CD5E1', // Primary theme color
3  backgroundColor: '#FFFFFF', // Background color
4  textColor: '#4A4A4A', // Text color
5};

Component Styles

1const styles = {
2  // Calendar container
3  containerStyle: {},
4  daysContainerStyle: {},
5  weekStyle: {},
6
7  // Day elements
8  dayContainerStyle: {},
9  dayTextStyle: {},
10  selectedDayStyle: {},
11  selectedDayTextStyle: {},
12  todayLabelStyle: {},
13  weekendDayTextStyle: {},
14  disabledDayTextStyle: {},
15
16  // Month selector
17  monthSelectorContainerStyle: {},
18  monthSelectorButtonStyle: {},
19  monthTextStyle: {},
20  arrowStyle: {},
21  disabledArrowStyle: {},
22
23  // Weekday header
24  weekdayHeaderContainerStyle: {},
25  weekdayTextStyle: {},
26  weekendHeaderTextStyle: {},
27
28  // Modal specific (for CalendarModal)
29  modalOverlayStyle: {},
30  modalContainerStyle: {},
31  modalTitleStyle: {},
32};

Full Example with Customization

1<Calendar
2  selectedDate={selectedDate}
3  onSelectDate={setSelectedDate}
4  language="en"
5  initialDate={dayjs('2024-01-15')}
6  minDate={dayjs().subtract(2, 'month')}
7  maxDate={dayjs().add(2, 'month')}
8  markedDates={['2025-01-07', '2025-01-08']}
9  colors={{
10    primaryColor: '#8CD5E1',
11    backgroundColor: '#FFFFFF',
12    textColor: '#4A4A4A',
13  }}
14  styles={{
15    containerStyle: { borderRadius: 12 },
16    dayTextStyle: { fontSize: 14 },
17    selectedDayStyle: { backgroundColor: '#8CD5E1' },
18    selectedDayTextStyle: { color: '#FFFFFF' },
19  }}
20/>

License

MIT © choi12