React Native Ethiopian Calendar

A react native calendar component which is mainly intended for applications which require Ethiopian calendar.

Features

• Ethiopian/Gregorian mode toggle
• Supports multiple local languages
• Easy to customize
• Zero dependency
• Fully typed with typescript

Demo

Installation

with yarn

yarn add react-native-ethiopian-calendar

Install with npm

npm i react-native-ethiopian-calendar

Usage/Examples

Typescript Example

import {
  Calendar,
  LanguageCode,
  Mode,
  SelectedDate,
} from 'react-native-ethiopian-calendar';

function App() {
  const [mode, setMode] = React.useState<Mode>('EC');
  const [locale, setLocale] = React.useState<LanguageCode>('AMH');
  const [selectedDate, setSelectedDate] = React.useState<SelectedDate>();

  return (
      <Calendar
        mode={mode}
        onDatePress={(date) => setSelectedDate(date)}
        onModeChange={(selectedMode) => setMode(selectedMode)}
        onLanguageChange={(lang) => setLocale(lang)}
        locale={locale}
      />
  )
}

Javascript Example

import { Calendar } from 'react-native-ethiopian-calendar';

function App() {
  const [mode, setMode] = React.useState('EC');
  const [locale, setLocale] = React.useState('AMH');
  const [selectedDate, setSelectedDate] = React.useState();

  return (
    <Calendar
      mode={mode}
      onDatePress={(date) => setSelectedDate(date)}
      onModeChange={(selectedMode) => setMode(selectedMode)}
      onLanguageChange={(lang) => setLocale(lang)}
      locale={locale}
    />
  );
}

API Reference

Prop	Type	Required	Description	Default
mode	Mode	false	a prop to switch b/n Ethiopian calendar and Gregorian calendar	EC
locale	LanguageCode	false	to change the language of days names and months names.	AMH for EC and ENG for GC
theme	Theme	false	to override default style	{}
hideHeaderButtons	boolean	false	to hide switch mode & change language dropdowns.	false
onDatePress	function void	true	an event handler gets executed when date press event is fired.
onModeChange	function void	false	an event handler gets invoked on mode change.
onLanguageChange	function void	false	an event handler gets invoked on language change.
initialDate	Date	false	if this prop is not set, the calendar will start from current month.	today

License

MIT

Made with create-react-native-library