react-native-calendar

    0.13.1 • Public • Published

    react-native-calendar

    A <Calendar> component for React Native

    Portrait mode only

    Installation

    npm install react-native-calendar --save

    Usage

    <Calendar
      currentMonth={'2015-08-01'}       // Optional date to set the currently displayed month after initialization
      customStyle={{day: {fontSize: 15, textAlign: 'center'}}} // Customize any pre-defined styles
      dayHeadings={Array}               // Default: ['S', 'M', 'T', 'W', 'T', 'F', 'S']
      eventDates={['2015-07-01']}       // Optional array of moment() parseable dates that will show an event indicator
      events={[{date:'2015-07-01', ..}]}// Optional array of event objects with a date property and custom styles for the event indicator
      monthNames={Array}                // Defaults to english names of months
      nextButtonText={'Next'}           // Text for next button. Default: 'Next'
      onDateSelect={(date) => this.onDateSelect(date)} // Callback after date selection
      onDateLongPress={(date) => this.onDateLongPress(date)} // Callback after date is long pressed
      onSwipeNext={this.onSwipeNext}    // Callback for forward swipe event
      onSwipePrev={this.onSwipePrev}    // Callback for back swipe event
      onTouchNext={this.onTouchNext}    // Callback for next touch event
      onTouchPrev={this.onTouchPrev}    // Callback for prev touch event
      onTitlePress={this.onTitlePress}  // Callback on title press
      prevButtonText={'Prev'}           // Text for previous button. Default: 'Prev'
      removeClippedSubviews={false}     // Set to false for us within Modals. Default: true
      renderDay={<CustomDay />}         // Optionally render a custom day component
      scrollEnabled={true}              // False disables swiping. Default: False
      selectedDate={'2015-08-15'}       // Day to be selected
      showControls={true}               // False hides prev/next buttons. Default: False
      showEventIndicators={true}        // False hides event indicators. Default:False
      startDate={'2015-08-01'}          // The first month that will display. Default: current month
      titleFormat={'MMMM YYYY'}         // Format for displaying current month. Default: 'MMMM YYYY'
      today={'2017-05-16'}              // Defaults to today
      weekStart={1} // Day on which week starts 0 - Sunday, 1 - Monday, 2 - Tuesday, etc, Default: 1
    />

    Available custom styles

    There are a number of pre-defined styles in the calendar. Below, we will give an example of how each of them can be changed depending on your use case.

    calendarContainer

    calendarContainer changes the background of the calendar.

    const Schedule = () => {
      const customStyle = {
        calendarContainer: {
          backgroundColor: 'blue',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    calendarContainer

    calendarControls

    calendarControls changes only the bar on the top that contains the month and year by default, but can also contain controls for changing the month.

    const Schedule = () => {
      const customStyle = {
        calendarControls: {
          backgroundColor: 'blue',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    calendarControls

    calendarHeading

    calendarHeading changes the bar that contains the days of the week.

    const Schedule = () => {
      const customStyle = {
        calendarHeading: {
          backgroundColor: 'blue',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    calendarHeading

    controlButton

    controlButton shows the next and previous buttons that allow you to change the current month. The showControls prop must be passed through to <Calendar /> in order for this style to take effect.

    const Schedule = () => {
      const customStyle = {
        controlButton: {
          backgroundColor: 'blue',
        },
      }
      return (
        <Calendar
          showControls
          customStyle={customStyle} />
      )
    }

    controlButton

    controlButtonText

    controlButtonText applies styles to the text that is rendered when the showControls prop is true. The text can also be changed using the prevButtonText and nextButtonText props.

    const Schedule = () => {
      const customStyle = {
        controlButtonText: {
          color: 'blue',
        },
      }
      return (
        <Calendar
          showControls
          customStyle={customStyle} />
      )
    }

    controlButtonText

    currentDayCircle

    currentDayCircle changes the style of the background behind the currently-selected day when the currently-selected day is today.

    const Schedule = () => {
      const customStyle = {
        currentDayCircle: {
          backgroundColor: 'blue',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    currentDayCircle

    currentDayText

    currentDayText changes the style of the current day (defaults to red) to differentiate it from other days.

    const Schedule = () => {
      const customStyle = {
        currentDayText: {
          color: 'blue',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    currentDayText

    day

    day changes the text of every day other than today and weekend days.

    const Schedule = () => {
      const customStyle = {
        day: {
          color: 'blue',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    day

    dayButton

    dayButton changes the background behind all valid days.

    const Schedule = () => {
      const customStyle = {
        dayButton: {
          backgroundColor: 'blue',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    dayButton

    dayButtonFiller

    dayButtonFiller styles the background behind all invalid days.

    const Schedule = () => {
      const customStyle = {
        dayButtonFiller: {
          backgroundColor: 'blue',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    dayButtonFiller

    dayCircleFiller

    dayCircleFiller styles a circle around all days other than the active day.

    const Schedule = () => {
      const customStyle = {
        dayCircleFiller: {
          backgroundColor: 'blue',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    dayCircleFiller

    dayHeading

    dayHeading styles the text for non-weekend days in the day of the week bar.

    const Schedule = () => {
      const customStyle = {
        dayHeading: {
          color: 'blue',
        },
      }
      return (
        <Calendar
        showEventIndicators
        customStyle={customStyle} />
      )
    }

    dayHeading

    eventIndicator

    eventIndicator styles the event indicator bubble for days that have events. Must pass either an events array or eventDates array and have showEventIndicators passed as true for the event indicators to display.

    const Schedule = () => {
      const customStyle = {
        eventIndicator: {
          backgroundColor: 'blue',
          width: 10,
          height: 10,
        },
      }
      return (
        <Calendar
          showEventIndicators
          eventDates={['2016-11-01', '2016-11-07', '2016-11-19']}
          customStyle={customStyle} />
      )
    }

    eventIndicator

    eventIndicatorFiller

    eventIndicatorFiller styles the event indicator space for days that do not have events. Must pass showEventIndicators as true for the event indicators to display.

    const Schedule = () => {
      const customStyle = {
        eventIndicatorFiller: {
          backgroundColor: 'blue',
          width: 10,
          height: 10,
        },
      }
      return (
        <Calendar
          showEventIndicators
          eventDates={['2016-11-01', '2016-11-07', '2016-11-19']}
          customStyle={customStyle} />
      )
    }

    eventIndicatorFiller

    hasEventCircle

    hasEventCircle styles the circle around the days that have events associated with them. Must pass either an events array or eventDates array and have showEventIndicators passed as true for the event indicators to display.

    const Schedule = () => {
      const customStyle = {
        hasEventCircle: {
          backgroundColor: 'blue',
        },
      }
      return (
        <Calendar
          showEventIndicators
          eventDates={['2016-11-01', '2016-11-07', '2016-11-19']}
          customStyle={customStyle} />
      )
    }

    hasEventCircle

    hasEventDaySelectedCircle

    hasEventDaySelectedCircle styles the circle around the selected day that have events associated with them. Must pass either an events array or eventDates array and have showEventIndicators passed as true for the event indicators to display.

    const Schedule = () => {
      const customStyle = {
        hasEventCircle: {
          backgroundColor: 'blue',
        },
        hasEventDaySelectedCircle: {
          backgroundColor: 'red',
       },
      }
      return (
        <Calendar
          showEventIndicators
          eventDates={['2016-12-03', '2016-12-21', '2016-12-22', '2016-12-30']}
          customStyle={customStyle} />
      )
    }

    hasEventText

    hasEventText styles the text of the days that have events associated with them. Must pass either an events array or eventDates array and have showEventIndicators passed as true for the event indicators to display.

    const Schedule = () => {
      const customStyle = {
        hasEventText: {
          backgroundColor: 'blue',
        },
      }
      return (
        <Calendar
          showEventIndicators
          eventDates={['2016-11-01', '2016-11-07', '2016-11-19']}
          customStyle={customStyle} />
      )
    }

    hasEventText

    monthContainer

    monthContainer styles the background behind the month.

    const Schedule = () => {
      const customStyle = {
        monthContainer: {
          backgroundColor: 'blue',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    monthContainer

    selectedDayCircle

    selectedDayCircle styles the circle behind any selected day other than today.

    const Schedule = () => {
      const customStyle = {
        selectedDayCircle: {
          backgroundColor: 'blue',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    selectedDayCircle

    selectedDayText

    selectedDayText styles the text of the currently-selected day.

    const Schedule = () => {
      const customStyle = {
        selectedDayText: {
          color: 'blue',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    selectedDayText

    title

    title styles the title at the top of the calendar. titleText styles text within title.

    const Schedule = () => {
      const customStyle = {
        title: {
          color: 'blue',
        },
        titleText: {
          fontSize: 12,
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    title

    weekendDayButton

    weekendDayButton styles the weekends background.

    const Schedule = () => {
      const customStyle = {
        weekendDayButton: {
          backgroundColor: 'red',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    weekendDayButton

    weekendDayText

    weekendDayText styles the text of weekends.

    const Schedule = () => {
      const customStyle = {
        weekendDayText: {
          color: 'blue',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    weekendDayText

    weekendHeading

    weekendHeading styles the text of the weekend heading.

    const Schedule = () => {
      const customStyle = {
        weekendHeading: {
          color: 'blue',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    weekendHeading

    weekRow

    weekRow styles the background of the row associated with each week.

    const Schedule = () => {
      const customStyle = {
        weekRow: {
          backgroundColor: 'blue',
        },
      }
      return <Calendar customStyle={customStyle} />
    }

    weekRow

    TODOS

    • Improve swipe feature
    • Language support

    DEMO

    Demo gif

    Keywords

    none

    Install

    npm i react-native-calendar

    DownloadsWeekly Downloads

    279

    Version

    0.13.1

    License

    MIT

    Last publish

    Collaborators

    • coderdave
    • cdro