Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wix/react-native-calendars

React Native Calendar Components 🗓️ 📆
https://github.com/wix/react-native-calendars

android calendar hacktoberfest ios react-native ui-components

Last synced: 6 days ago
JSON representation

React Native Calendar Components 🗓️ 📆

Host: GitHub
URL: https://github.com/wix/react-native-calendars
Owner: wix
License: mit
Created: 2016-11-11T12:17:27.000Z (about 8 years ago)
Default Branch: master
Last Pushed: 2024-09-18T11:35:41.000Z (4 months ago)
Last Synced: 2024-10-29T10:47:21.261Z (2 months ago)
Topics: android, calendar, hacktoberfest, ios, react-native, ui-components
Language: TypeScript
Homepage:
Size: 17.4 MB
Stars: 9,538
Watchers: 353
Forks: 2,953
Open Issues: 353
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome-react-native - react-native-calendars ★3402 - React Native Calendar Components 📆 (Components / UI)
awesome-list - react-native-calendars
awesome-list - react-native-calendars
awesome-ui-component-library - React Native Calendars - native-calendars.svg?label=&style=social)](https://github.com/wix/react-native-calendars) - various customizable react native calendar components. (React Native / Special use case libraries)
awesome-react-native - react-native-calendars ★3402 - React Native Calendar Components 📆 (Components / UI)
awesome-reactnative-ui - react-native-calendars - private/wix-react-native-calendar/blob/master/demo/calendar.gif?raw=true)| (Others)
awesome - wix/react-native-calendars - React Native Calendar Components 🗓️ 📆 (TypeScript)
awesome-reactnative-ui - react-native-calendars - private/wix-react-native-calendar/blob/master/demo/calendar.gif?raw=true)| (Others)
awesome-react-native - react-native-calendars ★3402 - React Native 日历组件📆 (Components / UI)
awesome-react-native - react-native-calendars ★3402 - React Native Calendar Components 📆 (Components / UI)
ReactNativeMaterials - react-native-calendars

README

        [![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://stand-with-ukraine.pp.ua)

# React Native Calendars 🗓️ 📆

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

[![Version](https://img.shields.io/npm/v/react-native-calendars.svg)](https://www.npmjs.com/package/react-native-calendars)

[![Build status](https://badge.buildkite.com/1a911fa39db2518a615b73f3dc18ec0938a66403f2ad66f79b.svg)](https://buildkite.com/wix-mobile-oss/react-native-calendars)




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](https://wix.github.io/react-native-calendars/docs/Intro).

## 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](https://github.com/wix-private/wix-react-native-calendar/tree/master/example/src/screens)

This project is compatible with Expo/CRNA (without ejecting), and the examples have been [published on Expo](https://expo.io/@community/react-native-calendars-example)

## 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](https://wix.github.io/react-native-calendars/docs/Intro)**

### Importing the `Calendar` component

```javascript

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

```

### Use the `Calendar` component in your app:

```javascript

 {

    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:

```javascript

import React, {useState} from 'react';

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

const App = () => {

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

  return (

     {

        setSelected(day.dateString);

      }}

      markedDates={{

        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}

      }}

    />

  );

};

export default App;

```

### Customize the appearance of the calendar:

```javascript

 {

    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:

```javascript

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 (

     {

        setSelected(day.dateString);

      }}

      markedDates={{

        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}

      }}

    />

  );

};

export default App;

```

### Adding a global theme to the calendar:

```javascript

    

```

## 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](https://github.com/tautvilas/) - Initial code - [@tautvilas](https://twitter.com/Tautvilas)

- Katrin Zotchev - Initial design - [@katrin_zot](https://twitter.com/katrin_zot)

See also the list of [contributors](https://github.com/wix/react-native-calendar-components/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