npmpackage.info

Gathering detailed insights and metrics for @choi12/react-native-lite-calendar

Other packages similar to @choi12/react-native-lite-calendar

@choi12/rn-lite-calendar

0.1.4

A simple, lightweight calendar component for React Native with pre-styled UI and customizable component styles. Includes basic features like date marking and modal support. TypeScript friendly.

@choi12/react-native-lite-calendar

0.1.3

47.84 kB

Installations

npm install @choi12/react-native-lite-calendar

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>=14

Node Version

23.6.0

NPM Version

10.9.2 Releases

Unable to fetch releases

Contributors

Love this project? Help keep it running — sponsor us today! 🚀

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

Maintainers

Package Meta Information

Latest Version

0.1.3

Package Id

@choi12/react-native-lite-calendar@0.1.3

Unpacked Size

47.84 kB

Size

10.48 kB

File Count

NPM Version

10.9.2

Node Version

23.6.0

Publised On

18 Jan 2025

Total Downloads

Cumulative downloads

Total Downloads

0

Last day

Compared to previous day

Last week

Compared to previous week

Last month

Compared to previous month

Last year

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

dayjs react react-native

Dev Dependencies

@types/react @types/react-native @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-native prettier typescript

Versions

React Native Lite Calendar

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

Screenshots

skyblue theme dark theme

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/react-native-lite-calendar
3
4# Using yarn
5yarn add @choi12/react-native-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/react-native-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/react-native-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

No vulnerabilities found.

No security vulnerabilities found.