React Native Basic Calendar

A lightweight and customizable calendar component for React Native applications. Includes basic features like date marking and modal support, with support for both English and Korean languages.

Screenshots

Left: Default calendar with sky blue theme
Right: Calendar with dark theme customization

Used In Production

Feed Diary (새싹일기) - A journaling app using CalendarModal component for date selection

Features

• 📅 Simple and intuitive calendar interface
• 🎨 Customizable styles & themes
• 🌍 Multi-language support (English & Korean)
• 📱 Cross-platform compatibility
• 📍 Date marking support
• 📅 Modal calendar view
• 📆 Configurable date selection range
• ✨ Today highlighting

Installation

1. Install the package:

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

2. Install peer dependencies:

1# Using npm
2npm install dayjs@^1.11.0
3
4# Using yarn
5yarn add dayjs@^1.11.0

Peer Dependencies

This package requires the following peer dependencies:

1{
2    "dayjs": "^1.11.0",
3    "react": "^17.0.0 || ^18.0.0",
4    "react-native": ">=0.65.0 <1.0.0"
5}

Note: React and React Native are likely already installed in your project. You only need to install dayjs if you haven't installed it yet.

Types

The package uses the following types for date handling:

1type CalendarDay = Dayjs; // dayjs object for date manipulation
2type MarkedDate = string; // Date string in 'YYYY-MM-DD' format

Usage

Basic Calendar

1import React, { useState } from 'react';
2import { Calendar } from '@choi12/rn-basic-calendar';
3import dayjs, { Dayjs } from 'dayjs';
4
5const MyCalendar = () => {
6  const [value, setValue] = useState<Dayjs>(dayjs());
7
8  return (
9    <Calendar
10      value={value}
11      onChange={setValue}
12      markedDates={['2024-01-15', '2024-01-16']}
13    />
14  );
15};

Calendar Modal

1import React, { useState } from 'react';
2import { View } from 'react-native';
3import { CalendarModal } from '@choi12/rn-basic-calendar';
4import dayjs, { Dayjs } from 'dayjs';
5
6const MyCalendarModal = () => {
7  const [isVisible, setIsVisible] = useState<boolean>(false);
8  const [value, setValue] = useState<Dayjs>(dayjs());
9
10  return (
11    <CalendarModal
12      isVisible={isVisible}
13      onClose={() => setIsVisible(false)}
14      value={value}
15      onChange={(date) => {
16        setValue(date);
17        setIsVisible(false);
18      }}
19    />
20  );
21};

Props

Calendar Props

Prop	Type	Required	Default	Description
value	CalendarDay	Yes	-	Currently selected date
onChange	(date: CalendarDay)=>void	Yes	-	Callback when a date is selected
minDate	CalendarDay	No	-	Minimum selectable date
maxDate	CalendarDay	No	-	Maximum selectable date
defaultValue	CalendarDay	No	dayjs()	Default 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

1const customColors = {
2  primaryColor: '#8CD5E1',
3  backgroundColor: '#333333',
4  textColor: '#FFFFFF',
5};
6
7const customStyles = {
8  containerStyle: { borderRadius: 12 },
9  dayTextStyle: { fontSize: 14 },
10  selectedDayStyle: { backgroundColor: '#8CD5E1' },
11  selectedDayTextStyle: { color: '#FFFFFF' },
12  disabledDayTextStyle: { color: '#989797' },
13};
14
15<Calendar
16  value={value}
17  onChange={onChange}
18  language="en"
19  defaultValue={dayjs('2024-01-15')}
20  minDate={dayjs().subtract(2, 'month')}
21  maxDate={dayjs().add(2, 'month')}
22  markedDates={['2025-01-06', '2025-01-07']}
23  colors={customColors}
24  styles={customStyles}
25/>

License

MIT © choi12