React Native Calendars Montlhy View 🗓️ 📆

This module includes various customizable React-Native calendar components.

The package is both Android and iOS compatible.

This package is replacing multi-dots in react-native-calendar with title name . Please avoid using react native calendar with this package otherwise you will face issues.

Installation

$ npm install --save react-native-calendars-monthly-view

Usage

Calendar

Basic parameters

 {
    console.log("selected day", day)
  }}
  // Handler which gets executed on day long press. Default = undefined
  onDayLongPress={(day) => {
    console.log("selected day", day)
  }}
  // Month format in calendar title. Formatting values: https://arshaw.com/xdate/#Formatting
  monthFormat={"yyyy MM"}
  // Handler which gets executed when visible month changes in calendar. Default = undefined
  onMonthChange={(month) => {
    console.log("month changed", month)
  }}
  // Hide month navigation arrows. Default = false
  hideArrows={true}
  // Replace default arrows with custom ones (direction can be 'left' or 'right')
  renderArrow={(direction) => }
  // Do not show days of other months in month page. Default = false
  hideExtraDays={true}
  // If hideArrows=false and hideExtraDays=false do not switch month when tapping on greyed out
  // day from another month that is visible in calendar page. Default = false
  disableMonthChange={true}
  // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
  firstDay={1}
  // Hide day names. Default = false
  hideDayNames={true}
  // Show week numbers to the left. Default = false
  showWeekNumbers={true}
  // Handler which gets executed when press arrow icon left. It receive a callback can go back month
  onPressArrowLeft={(subtractMonth) => subtractMonth()}
  // Handler which gets executed when press arrow icon right. It receive a callback can go next month
  onPressArrowRight={(addMonth) => addMonth()}
  // Disable left arrow. Default = false
  disableArrowLeft={true}
  // Disable right arrow. Default = false
  disableArrowRight={true}
  // Disable all touch events for disabled days. can be override with disableTouchEvent in markedDates
  disableAllTouchEventsForDisabledDays={true}
  // Replace default month and year title with custom one. the function receive a date as parameter.
  renderHeader={(date) => {
    /*Return JSX*/
  }}
  // Enable the option to swipe between months. Default = false
  enableSwipeMonths={true}
/>

To get Google monthly canlendar like look use this code

const Ticket = {
  color: "red",
  title: "Ticket",
  extraEventColor: "pink", // this property is used to give color to field with extra events log. Make use you pass this property to first event object
}
const surfing = { color: "blue", title: "surfing" }
const workout = { color: "green", title: "workout" }

;