tt-react-calendar

TT React Calendar

Description

A no-frills calendar widget that lets you bring your own styling. This component takes a start date, an end date, and a renderDay function, and then gets out of the way.

Installation

npm install --save tt-react-calendar

Usage

import Calendar from 'tt-react-calendar';

function renderDay(day) {
  return <div className="day">{day.format('dd')}</div>
}

function MyComponent() {
  return (
    <Calendar
      className="calendar-container"
      dayAbbrevs={['Su', 'M', 'T', 'W', 'Th', 'F', 'Sa']}
      dayHeaderStyle={Calendar.DayHeaderStyles.InFirstMonth}
      firstRenderedDay="2016-12-25"
      lastRenderedDay="2017-02-12"
      monthClassName="calendar-month"
      monthHeaderFormat="MMMM YYYY"
      renderDay={renderDay}
    />
  );
}

Properties

Name	Type	Description
className	string	Class name for the calendar's container element
dayAbbrevs	Array.<string>	Array of day names, starting with Sunday. Defaults to ['Su', 'M', 'T', 'W', 'Th', 'F', 'Sa'].
dayHeaderStyle	Enum	Determines where the day column headers are rendered. Can be one of Calendar.DayHeaderStyles.InFirstMonth (the default), Calendar.DayHeaderStyles.AboveFirstMonth, or Calendar.DayHeaderStyles.InEveryMonth
firstRenderedDay	varied	The first date that will be rendered as part of the calendar. Can be any type that moment's constructor supports.
lastRenderedDay	varied	The last date that will be rendered as part of the calendar. Can be any type that moment's constructor supports.
monthClassName	string	Class name to add to each month element
monthHeaderFormat	string	Format of the month header text. See moment.format for the available options. Defaults to 'MMMM YYYY'.
renderDay	function	A function that takes a moment object of a single day as a parameter and returns a React element. Defaults to (day) => <div>{day.format('YYYY-MM-DD')}</div>

Browser Support

This is still a very young project, so it hasn't been actively tested in cross browser environments. That being said, given the technologies being used, it should work in any browser that supports some form of flexbox.

Yes	Yes	10+	Yes	Yes

See caniuse.com for more details

Development

Issues/PRs welcome! Linting/automated tests coming soon.

Meta

Distributed under the MIT License. See LICENSE for more information.

Developers:

Jeremy Tice @jetpacmonkey