rn-lunar-calendars

React Native lunar calendar components and utilities for Vietnam and China (years 1800–2199), with holiday data, theming, and TypeScript support.

English | Tiếng Việt | 中文

Features

• Complete lunar calendar range (1800–2199)
• Vietnam and China holiday support
• Customizable UI with theme system
• iOS, Android, Web
• Full TypeScript support
• Functional components with React Hooks
• Zodiac, Heavenly Stems/Branches, Five Elements info

Installation

npm install rn-lunar-calendars
# or
yarn add rn-lunar-calendars

Peer dependencies:

npm install react-native-calendars date-fns
# or
yarn add react-native-calendars date-fns

Basic usage

LunarCalendar

import React, { useState } from 'react';
import { View } from 'react-native';
import { LunarCalendar, CalendarDay } from 'rn-lunar-calendars';

export default function App() {
  const [selectedDate, setSelectedDate] = useState<Date>(new Date());

  return (
    <View style={{ flex: 1 }}>
      <LunarCalendar
        current={new Date()}
        selected={selectedDate}
        onDayPress={(day: CalendarDay) => setSelectedDate(day.date)}
        showLunar
        showHolidays
      />
    </View>
  );
}

LunarDatePicker

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import { LunarDatePicker } from 'rn-lunar-calendars';

export default function PickerExample() {
  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
  const [visible, setVisible] = useState(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Button title="Pick date" onPress={() => setVisible(true)} />
      <LunarDatePicker
        value={selectedDate}
        onChange={setSelectedDate}
        visible={visible}
        onClose={() => setVisible(false)}
        showLunar
        showHolidays
      />
    </View>
  );
}

LunarDateInfo

import React from 'react';
import { View } from 'react-native';
import { LunarDateInfo, CalendarDay } from 'rn-lunar-calendars';

export default function InfoExample({ day }: { day: CalendarDay }) {
  return (
    <View style={{ flex: 1 }}>
      <LunarDateInfo
        day={day}
        showZodiacInfo
        showCanChiInfo
        showHolidayInfo
      />
    </View>
  );
}

Theming

import { LunarCalendar, DEFAULT_THEME } from 'rn-lunar-calendars';

const customTheme = {
  ...DEFAULT_THEME,
  backgroundColor: '#f8f9fa',
  calendarBackground: '#ffffff',
  selectedDayBackgroundColor: '#007AFF',
  todayTextColor: '#007AFF',
  dayTextColor: '#2d4150',
  lunarTextColor: '#666666',
  lunarTextSize: 12,
};

<LunarCalendar theme={customTheme} showLunar showHolidays />

Utilities

Date conversions

import { solarToLunar, lunarToSolar } from 'rn-lunar-calendars';

const lunarDate = solarToLunar(new Date(2024, 0, 1));
const solarDate = lunarToSolar(2024, 1, 1);

Holidays

import { getHolidays, isHoliday, getNextHoliday } from 'rn-lunar-calendars';

const holidays = getHolidays(2024, 'VN');
const { isHoliday: isHolidayDay, holiday } = isHoliday(new Date());
const nextHoliday = getNextHoliday(new Date());

Zodiac and Heavenly Stems/Branches

import { getZodiacInfo, getCanChiInfo } from 'rn-lunar-calendars';

const zodiacInfo = getZodiacInfo(2024);
const canChiInfo = getCanChiInfo(2024);

API Reference

LunarCalendar Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | current | Date | new Date() | Current date | | selected | Date | undefined | Selected date | | onDayPress | (day: CalendarDay) => void | undefined | Day press callback | | onMonthChange | (date: Date) => void | undefined | Month change callback | | showLunar | boolean | true | Show lunar info | | showHolidays | boolean | true | Show holidays | | theme | CalendarTheme | DEFAULT_THEME | Custom theme | | minDate | Date | undefined | Min date | | maxDate | Date | undefined | Max date |

LunarDatePicker Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | Date | new Date() | Value | | onChange | (date: Date) => void | undefined | Change callback | | visible | boolean | false | Visible | | onClose | () => void | undefined | Close callback | | title | string | 'Pick date' | Picker title |

LunarDateInfo Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | day | CalendarDay | required | Day info | | showZodiacInfo | boolean | true | Show zodiac info | | showCanChiInfo | boolean | true | Show Heavenly Stems/Branches | | showHolidayInfo | boolean | true | Show holiday info |

Contributing

We welcome contributions! Please read CONTRIBUTING.md.

License

MIT — see LICENSE.