react-native-calendars README

The project's README from github.com/wix/react-native-calendars. As one markdown file: README.md.

Stand With Ukraine

React Native Calendars 🗓️ 📆

A declarative cross-platform React Native calendar component for iOS and Android.

Version Build status

This module includes information on how to use this customizable React Native calendar component.

The package is compatible with both Android and iOS


Official documentation

This README provides basic examples of how to get started with react-native-calendars. For detailed information, refer to the official documentation site.

Features ✨

Try it out ⚡

You can run a sample module using these steps:

$ git clone [email protected]:wix/react-native-calendars.git

$ cd react-native-calendars

$ yarn install

$ cd ios && pod install && cd ..

$ react-native run-ios

You can check example screens source code in example module screens

This project is compatible with Expo/CRNA (without ejecting), and the examples have been published on Expo

Getting Started 🔧

Here's how to get started with react-native-calendars in your React Native project:

Install the package:

$ yarn add react-native-calendars

RN Calendars is implemented in JavaScript, so no native module linking is required.

Usage 🚀

Basic usage examples of the library

For detailed information on using this component, see the official documentation site

Importing the Calendar component

import {Calendar, CalendarList, Agenda} from 'react-native-calendars';

Use the Calendar component in your app:

<Calendar
  onDayPress={day => {
    console.log('selected day', day);
  }}
/>

Some Code Examples

Here are a few code snippets that demonstrate how to use some of the key features of react-native-calendars:

Creating a basic calendar with default settings:

import React, {useState} from 'react';
import {Calendar, LocaleConfig} from 'react-native-calendars';

const App = () => {
  const [selected, setSelected] = useState('');

  return (
    <Calendar
      onDayPress={day => {
        setSelected(day.dateString);
      }}
      markedDates={{
        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
      }}
    />
  );
};

export default App;

Customize the appearance of the calendar:

<Calendar
  // Customize the appearance of the calendar
  style={{
    borderWidth: 1,
    borderColor: 'gray',
    height: 350
  }}
  // Specify the current date
  current={'2012-03-01'}
  // Callback that gets called when the user selects a day
  onDayPress={day => {
    console.log('selected day', day);
  }}
  // Mark specific dates as marked
  markedDates={{
    '2012-03-01': {selected: true, marked: true, selectedColor: 'blue'},
    '2012-03-02': {marked: true},
    '2012-03-03': {selected: true, marked: true, selectedColor: 'blue'}
  }}
/>

Configuring the locale:

import {LocaleConfig} from 'react-native-calendars';
import React, {useState} from 'react';
import {Calendar, LocaleConfig} from 'react-native-calendars';

LocaleConfig.locales['fr'] = {
  monthNames: [
    'Janvier',
    'Février',
    'Mars',
    'Avril',
    'Mai',
    'Juin',
    'Juillet',
    'Août',
    'Septembre',
    'Octobre',
    'Novembre',
    'Décembre'
  ],
  monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
  dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
  today: "Aujourd'hui"
};

LocaleConfig.defaultLocale = 'fr';

const App = () => {
  const [selected, setSelected] = useState('');

  return (
    <Calendar
      onDayPress={day => {
        setSelected(day.dateString);
      }}
      markedDates={{
        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
      }}
    />
  );
};

export default App;

Adding a global theme to the calendar:

    <Calendar
      style={{
        borderWidth: 1,
        borderColor: 'gray',
        height: 350,
      }}
      theme={{
        backgroundColor: '#ffffff',
        calendarBackground: '#ffffff',
        textSectionTitleColor: '#b6c1cd',
        selectedDayBackgroundColor: '#00adf5',
        selectedDayTextColor: '#ffffff',
        todayTextColor: '#00adf5',
        dayTextColor: '#2d4150',
        textDisabledColor: '#dd99ee'
      }}
    />

Customized Calendar Examples

Calendar

Dot marking

Multi-Dot marking

Period Marking

Multi-Period marking

Custom marking

Date loading indicator

Scrollable semi-infinite calendar

Horizontal calendar

Agenda


Authors

See also the list of contributors who participated in this project.

Contributing

We welcome contributions to react-native-calendars.

If you have an idea for a new feature or have discovered a bug, please open an issue.

Please yarn test and yarn lint before pushing changes.

Don't forget to add a title and a description explaining the issue you're trying to solve and your proposed solution.

Screenshots and Gifs are VERY helpful to add to the PR for reviews.

Please DO NOT format the files - we're trying to keep a unified syntax and keep the reviewing process fast and simple.

License

React Native Calendars is MIT licensed

react-native-calendars (wix/react-native-calendars)

calendar
Searching Database…

10.3K ·GitHub
React-native-calendars
What is this?A set of customizable calendar components for React Native apps, maintained by Wix. You add them to your own project to display calendars and pick dates.
Is this a standalone calendar app, or a component I add to my own project?It is a component library. You install the react-native-calendars package from npm and render its components inside your React Native screens — there is no app to download.
How do I add it to my app?Install the package with npm or yarn and import the component you need. It is pure JavaScript, so no native module linking step is required.
Do I need to eject from Expo or touch native code to use it?No. The library works with Expo and CRNA without ejecting, and its example screens are published on Expo so you can preview them directly.
Does it connect to the phone's built-in calendar app?No. It is pure JavaScript with no native code, so it draws and manages its own calendar UI rather than reading or syncing with the device's calendar.
Will the same component work on both iOS and Android?Yes — it is a declarative, cross-platform component, and the package is compatible with both Android and iOS.
Can I use it in a commercial app?Yes — react-native-calendars is MIT licensed, so commercial use is fine.
What can the calendar do beyond picking a single date?Dates can be marked with dots, multi-dots, periods, multi-periods or fully custom marking; you can allow or block certain dates, scroll to today, and swipe between months with custom rendering.
How much can I restyle it to match my app's design?A lot: the style and content of days, months and individual dates are customizable, and you can apply a global theme or flexible custom rendering to the swipeable calendar.
Will dates show correctly in other languages and locales?Yes — the calendar formats dates automatically for different locales, and the README shows how to configure the locale.
Is it accessible for screen reader users?Yes, accessibility support is listed among the library's core features.
What are similar projects?react-native-elements, react-native-ui-kitten, NativeBase, expo-backdrop, morphlet, react-native-swiper, ng-native, react-native-paper
Which topics is it in?expo, calendar, react-native, mobile-development, accessibility, component-library, ui-components, developers, hacktoberfest, mobile, ui, ios
Creator
wix
Size
19.2 MB
Stars
10.3K
Updated
CommitJan 29Release1.1314.0Jan 29
Age
9y
Commits · 90 Days