React Native Calendars - 3by4 Fork 🗓️ 📆

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

Note: This is a fork of wix/react-native-calendars published as @3by4/react-native-calendars on npm. It includes custom bug fixes and enhancements.

Why This Fork?

This fork was created to:

• Fix critical bugs found during integration
• Add custom enhancements needed for specific use cases
• Maintain faster iteration cycle for bug fixes while waiting for upstream PRs

Installation

npm install @3by4/react-native-calendars
# or
yarn add @3by4/react-native-calendars

Custom Changes

Bug Fixes

1. hideExtraDays behavior fix (v1.0.2)
   • Issue: The hideExtraDays prop on ExpandableCalendar worked in reverse - extra days were hidden when collapsed and visible when expanded
   • Fix: Corrected the logic to properly hide extra days when calendar is expanded/open
   • File: src/expandableCalendar/index.tsx:618

Enhancements

(Future enhancements will be documented here)

Publishing Workflow (For Maintainers)

Publishing to npm

# 1. Build the library
yarn build:ts

# 2. Bump version
npm version patch  # or minor/major

# 3. Commit changes
git add .
git commit -m "fix: description of changes"
git push origin dev

# 4. Publish to npm
npm publish

Important: Compiled .js and .d.ts files are NOT committed to git. They are generated during build and published via .npmignore configuration.

Local Testing with yalc

Use yalc for local testing before publishing:

# Install yalc globally (one-time)
npm install -g yalc

# In library directory:
yarn build:ts
yalc publish

# In your app directory:
yalc add @3by4/react-native-calendars

# After making changes:
yarn build:ts && yalc push  # Automatically updates linked apps

# Remove yalc and go back to npm:
yalc remove @3by4/react-native-calendars
npm install

Syncing with Upstream

# Update master from upstream
git checkout master
git fetch upstream
git merge upstream/master
git push origin master

# Merge into dev branch
git checkout dev
git merge master

Original Documentation

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

For detailed information about the original library, refer to the official documentation site.

Features ✨

• Pure JS. No Native code required
• Date marking - dot, multi-dot, period, multi-period and custom marking
• Customization of style, content (days, months, etc) and dates
• Detailed documentation and examples
• Swipeable calendar with flexible custom rendering
• Scrolling to today, selecting dates, and more
• Allowing or blocking certain dates
• Accessibility support
• Automatic date formatting for different locales

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 '@3by4/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 '@3by4/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 '@3by4/react-native-calendars';
import React, {useState} from 'react';
import {Calendar, LocaleConfig} from '@3by4/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

• Tautvilas Mecinskas - Initial code - @tautvilas
• Katrin Zotchev - Initial design - @katrin_zot

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