React Styled Component Calendar

Installation

yarn add react-styled-component-calendar

or

npm install --save react-styled-component-calendar

Usage

import Calendar from 'react-styled-component-calendar'

const events = [{
    "title": "Two Volcano Sprint",
    "startDate": "2020-10-18T05:30+01:00",
    "endDate": "2020-10-24T00:00+00:00"
  }, {
    "title": "Silk Road Mountain Race",
    "startDate": "2020-08-14T00:00+00:00",
    "endDate": "2020-08-21T00:00+00:00"
  }, {
    "title": "Transcontinental No.8",
    "startDate": "2020-07-25T00:00+00:00",
    "endDate": "2020-08-01T00:00+00:00"
  }, {
    "title": "TransIbérica",
    "startDate": "2020-07-12T22:00+01:00",
    "endDate": "2020-07-26T22:00+01:00"
  }, {
    "title": "Transpyrenees",
    "startDate": "2020-06-27T21:00+01:00",
		"endDate": "2020-07-03T21:00+01:00"
	}, {
    "title": "GBDURO20",
    "startDate": "2020-06-27T08:00+00:00",
    "endDate": "2020-07-04T00:00+00:00"
  }, {
    "title": "Tour Divide",
    "startDate": "2020-06-12T08:00-07:00",
    "endDate": "2020-07-10T00:00+00:00"
  }, {
    "title": "Trans America Bike Race",
    "startDate": "2020-06-07T06:00-08:00",
		"endDate": "2020-06-20T18:00-05:00"
	}
}]

<Calendar events={events}>

Props

| prop | type | required | description | | ------------------------------ | -------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | events | array | * | array of events to pass to the calendar, so below for format of event | | dateInView | string | | the current date to be displayed. JavaScript new Date() object. n.b month index starts at 0 | | navMonthFormat | string | | moment js month format | | navYearsBeforeNow | number | | number of years to show before current year | | navYearsAfterNow | number | | number of years to show before current year | | outOfMonthCalendarDayHighlight | string | | cell hightlight for days outside of visible month | | todayColorHightight | string | | cell highlight for today | | onPrevMonthClick | function | | (month: number) => {} A function that is fired after month change containing the new month | | onNextMonthClick | function | | (month: number) => {} A function that is fired after month change containing the new month | | CalendarCellRenderer | function | | ({ index: number, events:Event[] }): React.FC<{}> => null; Full override function that returns a Calendar Cell Component. All other Cell props will be ignored | | MonthNavRenderer | function | | (): React.FC<{}> => {} Function that returns the month nav component | | WeekHeaderRenderer | function | | ({ days: string[] }}): React.FC<{}> => {} Function that returns the week nav component |

Event

| attribute | required | type | description | | ------------- | ------------ | -------- | ---------------------------------------------------------------- | | title | * | string | Title to render for given range | | startDate | * | DateTime | start date | | endDate | * | DateTime | | ...props | | any | any other values you would like to use in a custom calender cell |