@kcodev/react-native-calendar

react-native-calendar

React native simple and customizable calendar.

Features

• Flexible style.
• Plain simple and flexible API
• Listeners for actions

Setup

npm install --save @kcodev/react-native-calendar

Usage

import React, { Component } from 'react';
import { View } from 'react-native';
import Calendar from '@kcodev/react-native-calendar';

class App extends Component {
  render() {
    return (
      <View>
        <Calendar />
      </View>
    );
  }
}

export default App;

Available props

Name	Type	Default	Description
dateFormat	string	MMMM DD[,] YYYY	- Default date to show on calendar.
locale	string	es	- Locale of date on header. Use moment to manage dates, use locales soported by moment
minDate	any	null	- Minimum date to show on the calendar, the days before this, are disabled.
events	object	{}	- Events to display on calendar. More details on Documentation.
staticCalendar	bool	false	- Disable click of calendar days and make it static
weekDaysLabels	array	['Dom.', 'Lun.', 'Mar.', 'Mié.', 'Jue.', 'Vie.', 'Sáb.']	- Labels of days showed on Calendar Header
onPressDay	function	()=>{}	- Callback when press on day. Return day and events if it exist.
eventsView	element	null	- You can pass and element to render custom event indicator on calendar. More details in Documentation.
headerStyle	object	Object[Object]	- You can pass custom style to header. More details in Documentation.
dayStyle	object	Object[Object]	- You can pass custom style to day render. More details in Documentation.

Documentation

This component is a basic calendar component, it can be used to get a day selected and render events.

Events

To render events, you need to pass a custom object. The required structure of object events is as follows.

{
  "2020-01-24": [
    {
      "id": "1",
        "date": "2020-01-24",
        "color": "#654321"
    },
    {
      "id": "2",
        "date": "2020-01-24",
        "color": "#654541"
    }
  ],
  "2020-01-28": [
    {
      "id": "1",
        "date": "2020-01-28",
        "color": "#654321"
    }
  ]
}

The calendar highlights the day of the event using the color passed in the data object.