Styleguides

Shared Assets & Docs

Menu

The Openings Calendar is a React component for displaying a Provider’s Openings.

Standard Openings Calendar

The standard calendar is limited to weekdays only, with an timeInterval of 30 minutes for reach row.

<div id="openings-calendar"></div>
<script>
  React.renderComponent(
    OpeningsCalendar({openings: [/* Openings Data */]}),
    document.getElementById('openings-calendar')
  );
</script>

Scrolling Openings Calendar

Scrolling is handled by responding to the onNextClick and onPreviousClick handlers and refreshing the properties of the OpeningsCalendar component.

<div id="openings-calendar"></div>
<script>
  var SimpleScroller = React.createClass({
    onPreviousClick: function() {
      var startDate = moment(this.props.startDate).add({days: -7});
      this.setProps({startDate: startDate});
    },
    onNextClick: function() {
      var startDate = moment(this.props.startDate).add({days: 7});
      this.setProps({startDate: startDate});
    },
    render: function() {
      return this.transferPropsTo(OpeningsCalendar({
        onPreviousClick: this.onPreviousClick,
        onNextClick: this.onNextClick
      }));
    }
  });
  React.renderComponent(
    SimpleScroller({openings: [/* Several Weeks of Openings Data */]}),
    document.getElementById('openings-calendar')
  );
</script>

Openings Calendar with Weekend

This calendar will always show a weekend (regardless of Openings). This also demonstrates customizing the startDate and timeInterval.

<div id="openings-calendar"></div>
<script>
  React.renderComponent(
    OpeningsCalendar({
      openings: [/* Openings Data */],
      startDate: moment('2014-09-10T00:00:00'),
      timeInterval: 60,
      calendarType: OpeningsCalendar.WEEKDAYS_AND_WEEKEND
    }),
    document.getElementById('openings-calendar')
  );
</script>

Openings in a Different Time Zone

When the Openings are in a different time zone from the user, a message is displayed to alleviate confusion.

<div id="openings-calendar"></div>
<script>
  React.renderComponent(
    OpeningsCalendar({openings: [/* Openings Data in a different time zone */]}),
    document.getElementById('openings-calendar')
  );
</script>

Loading Openings Calendar

Before the Openings are loaded, you can display a loading message using the isLoading prop.

<div id="openings-calendar"></div>
<script>
  React.renderComponent(
    OpeningsCalendar({isLoading: true}),
    document.getElementById('openings-calendar')
  );
</script>

Empty Openings Calendar

This is how the calendar looks when given an empty array of Openings.

<div id="openings-calendar"></div>
<script>
  React.renderComponent(
    OpeningsCalendar({openings: []}),
    document.getElementById('openings-calendar')
  );
</script>