React-dategrid NPM

React Dategrid 📅

A calendar component based on render props.

The approach is to make as few decisions as possible. The only markup it renders is the structure for the underlying table, everything else is up to the consumer. It has no knowledge of something like a selected date or how do style past dates. Implement that kind of behaviour in renderDay. The only thing it really needs is a moment instance to base its view on.

Install

npm install --save react-dategrid
yarn add react-dategrid

Usage

Each day is a moment instance. The view is what is currently shown by the component, also represented by a moment instance.

import Dategrid from 'react-dategrid';

class Datepicker extends React.Component {
  state = {
    view: moment()
  }

  renderTitle = (view) => {
    return <strong>{view.format('MMMM YYYY')}</strong>;
  }

  renderWeekday = (index) => {
    const weekday = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'][index];

    return <div className={index < 5 ? 'workday' : 'weekend'}>{weekday}</div> }

  renderDay = (day, view) => {
    if (moment().isSame(day, "day")) {
      return (
        <div className="day day--today">{day.date()}</div>
      );
    }

    return <div className="day">{day.date()}</div>;
  }

  render() {
    return (
      <Dategrid
        view={this.state.view}
        renderTitle={this.renderTitle}
        renderWeekday={this.renderWeekday}
        renderDay={this.renderDay}
      />
    );
  }
}