React Native Simple 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
# Using npm
npm install @choi12/react-native-simple-calendar
# Using yarn
yarn add @choi12/react-native-simple-calendar
Peer Dependencies
This package requires the following peer dependencies:
{
"react": ">=17.0.0",
"react-native": ">=0.65.0",
"dayjs": ">=1.11.0"
}
Basic Usage
import React, { useState } from 'react';
import { Calendar } from '@choi12/react-native-simple-calendar';
import dayjs from 'dayjs';
const MyCalendar = () => {
const [selectedDate, setSelectedDate] = useState(dayjs());
return (
<Calendar
selectedDate={selectedDate}
onSelectDate={setSelectedDate}
language="en"
/>
);
};
Modal Usage
import React, { useState } from 'react';
import { CalendarModal } from '@choi12/react-native-simple-calendar';
import dayjs from 'dayjs';
const MyCalendarModal = () => {
const [isVisible, setIsVisible] = useState(false);
const [selectedDate, setSelectedDate] = useState(dayjs());
return (
<CalendarModal
isVisible={isVisible}
onClose={() => setIsVisible(false)}
selectedDate={selectedDate}
onSelectDate={setSelectedDate}
title="Select Date"
language="en"
/>
);
};
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 displayed month |
| 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
Colors
const customColors = {
primaryColor: '#8CD5E1', // Primary theme color
backgroundColor: '#FFFFFF', // Background color
textColor: '#4A4A4A', // Text color
};
Styles
const customStyles = {
// Calendar container styles
containerStyle: {},
daysContainerStyle: {},
weekStyle: {},
// Day styles
dayContainerStyle: {},
dayTextStyle: {},
selectedDayStyle: {},
selectedDayTextStyle: {},
todayLabelStyle: {},
weekendDayTextStyle: {},
disabledDayTextStyle: {},
// Month selector styles
monthSelectorContainerStyle: {},
monthSelectorButtonStyle: {},
monthTextStyle: {},
arrowStyle: {},
disabledArrowStyle: {},
// Weekday header styles
weekdayHeaderContainerStyle: {},
weekdayTextStyle: {},
weekendHeaderTextStyle: {},
};
Modal Specific Styles
const modalStyles = {
...customStyles,
modalOverlayStyle: {},
modalContainerStyle: {},
modalTitleStyle: {},
};
License
MIT © choi12
