wix/react-native-calendars

★ 10,282TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((react-native-calendars))
    What it does
      Ready-made calendar components
      No native code needed
    Calendar views
      Monthly grid
      Agenda with event list
      Date range selection
    Customization
      Color and font themes
      Language localization
      Block or mark specific dates
    Platform support
      iOS
      Android
      Expo compatible

mindmap root((react-native-calendars)) What it does Ready-made calendar components No native code needed Calendar views Monthly grid Agenda with event list Date range selection Customization Color and font themes Language localization Block or mark specific dates Platform support iOS Android Expo compatible

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a monthly calendar to a React Native app so users can tap a date to select it

USE CASE 2

Show a highlighted date range for booking or scheduling features in a mobile app

USE CASE 3

Display an agenda view that combines a calendar with a scrollable list of events beneath it

USE CASE 4

Localize the calendar into French, Arabic, or another language by replacing day and month name strings

Tech stack

TypeScriptJavaScriptReact Native

Getting it running

Difficulty · easy Time to first run · 30min

Install via a single npm or yarn command, no native linking required, works out of the box with Expo.

In plain English

React Native Calendars is a library of calendar and date-picker components for mobile apps built with React Native, which is a framework for creating iOS and Android apps using JavaScript. The library is made by Wix, the website-building company, and published as open-source for other developers to use. Adding this library to a project gives you ready-made calendar screens without having to draw them from scratch. The calendar shows a monthly grid of dates, and you can let users tap a day to select it, mark specific dates with dots or colored highlights, block certain dates from being selectable, or show a range of days as a highlighted period. There is also an agenda view that combines the calendar with a scrollable list of events below it. The library is written entirely in JavaScript, so it does not require any platform-specific native code to be compiled or linked. That makes it easier to add to a project, including projects using Expo, a popular tool for building React Native apps without complex setup. Developers can change the visual appearance of the calendar by passing in color and font settings. Day names and month names can be replaced with translations in any language, so the calendar can display in French, Arabic, or any other locale the app needs. Installation is a single package manager command. The README walks through basic examples for displaying a calendar, marking dates, setting a starting date, and applying a custom color theme. Full documentation lives on a separate website linked from the README. The project welcomes contributions and asks contributors to run the test and lint checks before submitting a pull request.

Copy-paste prompts

Prompt 1

Show me how to add react-native-calendars to my Expo app and display a monthly calendar where the user can tap to select a date

Prompt 2

Using react-native-calendars, how do I highlight a range of dates in green and disable past dates so users can only pick future dates?

Prompt 3

How do I display a list of events below the calendar using the AgendaList component from react-native-calendars?

Prompt 4

Show me how to apply a custom dark-mode color theme to the react-native-calendars Calendar component

Open on GitHub → Explain another repo

← wix on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.