react-native-calendar-strip

Table of Contents

Install

$ npm install react-native-calendar-strip
# OR
$ yarn add react-native-calendar-strip

Usage

Scrollable CalendarStrip — New in 2.x

The scrollable prop was introduced in 2.0.0 and features a bi-directional infinite scroller. It recycles days using RecyclerListView, shifting the dates as the ends are reached. The Chrome debugger can cause issues with this updating due to a RN setTimeout bug. To prevent date shifts at the ends of the scroller, set the minDate and maxDate range to a year or less.

The refactor to support scrollable introduced internal changes to the CalendarDay component. Users of the dayComponent prop may need to adjust their custom day component to accommodate the props passed to it.

import { View, StyleSheet } from 'react-native';
import CalendarStrip from 'react-native-calendar-strip';

const Example = () => (
  
);

const styles = StyleSheet.create({
  container: { flex: 1 }
});

Simple "out of the box" Example

You can use this component without any styling or customization. Just import it in your project and render it:

import { View, StyleSheet } from 'react-native';
import CalendarStrip from 'react-native-calendar-strip';

const Example = () => (
  
);

const styles = StyleSheet.create({
  container: { flex: 1 }
});

Styling and animations Example

Even though this component works withouth any customization, it is possible to customize almost everything, so you can make it as beautiful as you want:

import React, {Component} from 'react';
import {
    AppRegistry,
    View
} from 'react-native';
import moment from 'moment';

import CalendarStrip from 'react-native-calendar-strip';

class Example extends Component {
    let datesWhitelist = [{
      start: moment(),
      end: moment().add(3, 'days')  // total 4 days enabled
    }];
    let datesBlacklist = [ moment().add(1, 'days') ]; // 1 day disabled

    render() {
        return (
            
        );
    }
}

AppRegistry.registerComponent('Example', () => Example);

Props

Initial data and onDateSelected handler

datesWhitelist Array Example

  datesWhitelist = [
    // single date (today)
    moment(),

    // date range
    {
      start: (Date or moment Date),
      end: (Date or moment Date)
    }
  ];

  return (
    
  );

datesBlacklist Callback Example

  const datesBlacklistFunc = date => {
    return date.isoWeekday() === 6; // disable Saturdays
  }

  return (
    
  );

markedDates Example

markedDates may be an array of dates with dots/lines, or a callback that returns the same shaped object for a date passed to it.

  // Marked dates array format
  markedDatesArray = [
    {
      date: '(string, Date or Moment object)',
      dots: [
        {
          color: ,
          selectedColor:  (optional),
        },
      ],
    },
    {
      date: '(string, Date or Moment object)',
      lines: [
        {
          color: ,
          selectedColor:  (optional),
        },
      ],
    },
  ];

  // Marked dates callback
  markedDatesFunc = date => {
    // Dot
    if (date.isoWeekday() === 4) { // Thursdays
      return {
        dots:[{
          color: ,
          selectedColor:  (optional),
        }]
      };
    }
    // Line
    if (date.isoWeekday() === 6) { // Saturdays
      return {
        lines:[{
          color: ,
          selectedColor:  (optional),
        }]
      };
    }
    return {};
  }

Hiding Components

Styling

customDatesStyles

This prop may be passed an array of style objects or a callback which receives a date param and returns a style object for it. The format for the style object follows:

Array Usage Example:

  let customDatesStyles = [];
  let startDate = moment();
  for (let i=0; i<6; i++) {
    customDatesStyles.push({
        startDate: startDate.clone().add(i, 'days'), // Single date since no endDate provided
        dateNameStyle: styles.dateNameStyle,
        dateNumberStyle: styles.dateNumberStyle,
        // Random color...
        dateContainerStyle: { backgroundColor: `#${(`#00000${(Math.random() * (1 << 24) | 0).toString(16)}`).slice(-6)}` },
      });
  }

  render() {
    return (
      
    );
  }

Callback Usage Example:

  const customDatesStylesFunc = date => {
    if (date.isoWeekday() === 5) { // Fridays
      return {
        dateNameStyle: {color: 'blue'},
        dateNumberStyle: {color: 'purple'},
        dateContainerStyle:  {color: 'yellow'},
      }
    }
  }

  render() {
    return (
      
    );
  }

Responsive Sizing

Icon Sizing

Custom Day component

Methods

Methods may be accessed through the instantiated component's ref.

Animations

Week Strip Animation

Sequence example (dates shown one by one)	Parallel example (dates shown all at once)

Week Strip Animation Options

The calendarAnimation prop accepts an object in the following format:

Day Selection Animation

Border example	Background example

Day Selection Animation Options

The daySelectionAnimation prop accepts an object in the following format:

Localization

This prop is used for adding localization to react-native-calendar-strip component. The localization rules are the same as moments and can be found in moments documentation

Build Release info

To properly make a release build, import the appropriate "Locale" module using the following steps. Not importing the locale module will crash the release build (though the dev build will work).

1- import momentJs module: > $ yarn add moment

or

> $ npm install moment

2- Go to your index.js and import the specific "Locale" after the main moment import. Ex:

import 'moment';
import 'moment/locale/fr';  // language must match config
import moment from 'moment-timezone';  // only if timezone is needed

The locale import must match the language specified in the locale config (example below).

Example of one locale object is:

const locale = {
  name: 'fr',
  config: {
    months: 'Janvier_Février_Mars_Avril_Mai_Juin_Juillet_Août_Septembre_Octobre_Novembre_Décembre'.split(
      '_'
    ),
    monthsShort: 'Janv_Févr_Mars_Avr_Mai_Juin_Juil_Août_Sept_Oct_Nov_Déc'.split(
      '_'
    ),
    weekdays: 'Dimanche_Lundi_Mardi_Mercredi_Jeudi_Vendredi_Samedi'.split('_'),
    weekdaysShort: 'Dim_Lun_Mar_Mer_Jeu_Ven_Sam'.split('_'),
    weekdaysMin: 'Di_Lu_Ma_Me_Je_Ve_Sa'.split('_'),
    longDateFormat: {
      LT: 'HH:mm',
      LTS: 'HH:mm:ss',
      L: 'DD/MM/YYYY',
      LL: 'D MMMM YYYY',
      LLL: 'D MMMM YYYY LT',
      LLLL: 'dddd D MMMM YYYY LT'
    },
    calendar: {
      sameDay: "[Aujourd'hui à] LT",
      nextDay: '[Demain à] LT',
      nextWeek: 'dddd [à] LT',
      lastDay: '[Hier à] LT',
      lastWeek: 'dddd [dernier à] LT',
      sameElse: 'L'
    },
    relativeTime: {
      future: 'dans %s',
      past: 'il y a %s',
      s: 'quelques secondes',
      m: 'une minute',
      mm: '%d minutes',
      h: 'une heure',
      hh: '%d heures',
      d: 'un jour',
      dd: '%d jours',
      M: 'un mois',
      MM: '%d mois',
      y: 'une année',
      yy: '%d années'
    },
    ordinalParse: /\d{1,2}(er|ème)/,
    ordinal: function(number) {
      return number + (number === 1 ? 'er' : 'ème');
    },
    meridiemParse: /PD|MD/,
    isPM: function(input) {
      return input.charAt(0) === 'M';
    },
    // in case the meridiem units are not separated around 12, then implement
    // this function (look at locale/id.js for an example)
    // meridiemHour : function (hour, meridiem) {
    //     return /* 0-23 hour, given meridiem token and hour 1-12 */
    // },
    meridiem: function(hours, minutes, isLower) {
      return hours < 12 ? 'PD' : 'MD';
    },
    week: {
      dow: 1, // Monday is the first day of the week.
      doy: 4 // The week that contains Jan 4th is the first week of the year.
    }
  }
};

Device Specific Notes

• OnePlus devices use OnePlus Slate font by default which causes text being cut off in the date number in react-native-calendar-strip. To overcome this change the default font of the device or use a specific font throughout your app.

Development with Sample Application

To facilitate development, the example directory has a sample app.

cd example
npm run cp
npm install
npm start

The CalendarStrip source files are copied from the project root directory into example/CalendarStrip using npm run cp. If a source file is modified, it must be copied over again with npm run cp.

Contributing

Contributions are welcome!

1. Fork it.
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request 😄

Or open up an issue.

Contributors

Bogdan Begovic 💬 💻 🎨 📖 💡 🔧	Peace 💬 🐛 💻 📖 👀	Chris Burns 💬 🐛 💻 📖 🔧 💡 👀	samcolby 💻 ⚠️	Florian Biebel 💻	Vitaliy Zhukov 💻	lbrdar 💻
Dimka Vasilyev 💻	Eugene 💻

Thanks goes to these wonderful people (emoji key):

Discussion and Collaboration

In addition to the Github Issues page, there is a Discord group for React Native with a channel specifically for react-native-calendar-strip. Thanks @MichelDiz for setting that up.

License

Licensed under the MIT License.