1.0.1 • Published 4 years ago

react-interval-calendar v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

react-interval-calendar

Build Workflow

Infinite scrolling based calendar for interval dates built with React.

  • no additional dependencies
  • no additional date library
  • customizable
  • lightweight

Getting started

Compatibility

Your project needs to use React.js 16.8 or later.

React-Interval-Calendar uses modern web technologies. It's only supports modern web browser with internationalization API. In legacy browsers you have to use additional polyfill for internationalization to be able to use this library.

Installation

$ npm i react-interval-calendar

or

yarn add react-interval-calendar

Usage

Here's an example of basic usage:

import React from 'react';
import IntervalCalendar from 'react-interval-calendar';

const App = () => (
  <IntervalCalendar
    weekStartsOn={1}
    start={new Date(2021, 1, 1)}
    end={new Date(2021, 6, 31)}
    highlighted={[
      {
        key: 'audit',
        start: new Date(2021, 1, 16),
        end: new Date(2021, 1, 20),
      },
    ]}
    height={700}
    showToday={false}
    showMonths
    showYears
    showBorder
    showBorderRadius
    fadeWeekends
  />
);

export default App;

For more detailed example check the example directory.

Prop-Types

Prop nameTypeDefault valueDescription
startDateundefinedThe beginning of the calendar that should displayed. The calendar will display the whole month of the start date.
endDateundefinedThe end of the calendar that should displayed. The calendar will display the whole month of the end date.
customClassNamesobject{}Class name(s) that will be applied to a given calendar item. More details see Custom Class Names props.
enableSelectbooleanfalseWhether the day cell selection is enabled or not
emptyLabelstringThere is no date range to displayContent of a label rendered in case of no or invalid start-end interval.
fadeWeekendsbooleanfalseWhether the weekends shall be faded or not.
heightnumber or string500Height of the calendar. Can be a number in pixels, 100%, auto or a string that can be evaluated in css.
highlightedarray[]Array of the intervals that should be highlighted between the start and end date. The highlighted interval cannot intersect with each other yet. More details see Highlighted Props.
highlightedColorAlphanumber0.2Alpha level of the highlighted colors. Can be between 0.0 and 1.0.
localestringdefaultLocale that should be used to format and display the days and months. Can be an IETF language tag.
numberOfWeekFirstRendernumber8Number of weeks to render below the visible weeks on the first render.
numberOfWeekPreRendernumber4Number of weeks to render below the visible weeks. Tweaking this can help reduce flickering during scrolling on certain browers/devices.
onSelectfunctionundefinedFunction called when the user clicks a day. It returns a Day object. Only takes effect when the enableSelect is true
showBorderbooleanfalseWhether the calendar component border shall be rendered or not.
showBorderRadiusbooleanfalseWhether the calendar component border shall be rounded or not. Only takes effect when the showBorder prop set to true.
showGutterBetweenHighlightedbooleanfalseWhether a small gutter shall be shown on the highlighted intervals to be more separated or not.
showHeaderbooleantrueWhether the whole header shall be shown or not.
showHeaderWeekdaysbooleantrueWhether the name of the day shall be shown in the header columns or not. Only takes effect when the showHeader prop set to true.
showMonthStripesbooleantrueWhether the months background color stripes shall be shown or not.
showMonthsbooleanfalseWhether the month name shall be shown on the first day of a month or not.
showTodaybooleantrueWhether the current day shall be highlighted or not.
showYearsbooleanfalseWhether the year number shall be shown on the first day of a month or not.
themestringlightThe color theme of the calendar. Can be light or dark.
weekStartsOnnumber0The index of the day that the week should starts on. Can be 0, 1, 2, 3, 4, 5 or 6.

Custom Class Names Props

The customClassNames prop can consume the following props where each prop can be a string or an array of string: | Prop name | Description | | --- | --- | | calendar | Classname(s) that will be applied to the calendar container element. | | calendarEmpty | Classname(s) that will be applied to calendar empty state container element. | | header | Classname(s) that will be applied to header element. | | headerWeekdays | Classname(s) that will be applied to weekdays list wrapper element inside the header. | | headerWeekday | Classname(s) that will be applied to each day list item element inside the header weekdays list. | | weeks | Classname(s) that will be applied to the weeks container element. | | week | Classname(s) that will be applied to week container element. | | day | Classname(s) that will be applied to the day container element. | | dayText | Classname(s) that will be applied to the main day text element inside the day container. | | dayMonthText | Classname(s) that will be applied to the month text element inside the day container. | | dayYearText | Classname(s) that will be applied to the year text element inside the day container. | | dayHighlighted | Classname(s) that will be applied to the highlighted day element inside the day container. | | daySelected | Classname(s) that will be applied to the user selected day element inside the day container. | | dayToday | Classname(s) that will be applied to the current day element inside the day container. |

Highlighted Props

The highlighted prop is an array and each item is an object and should look like the following: | Prop name | Required/Optional | Description | | --- | --- | --- | | id | Optional | Identifies the item inside the array. | | key | Optional | Identifies the item inside the array. | | start | Required | Start date of the highlighted interval. | | end | Required | End date of the highlighted interval. | | color | Optional | Highilight color of the interval. The color can be in hex, rgb or rgba format. The calendar will convert the color into an rgba format where the alpha value will be equal to highlightedColorAlpha prop by default if that is not provided as part of the color. |

Day Object

The onSelect function will return a Day object with the following props: | Prop name | Description | | --- | --- | | key | Day identifier that created from the number of week and day of the week. | | date | Actual Date object of the day. | | yearLabel | Year label from the actual date. | | monthLabel | Month label from the actual date formatted with the provided locale prop. | | dayLabel | Day of the month label that is displayed in the calendar. | | isMonthEven | Describes whether the month of the actual date is even or not. | | isFirstDayOfMonth | Describes whether the actual date is the first day of the month or not. | | isLastDayOfMonth | Describes whether the actual date is the last day of the month or not. | | isToday | Describes whether the actual date is the same date as today or not. | | isWeekend | Describes whether the actual date is on weekend or not. | | isHighlighted | Describes whether the actual date is highlighted or not. | | isFirstOfHighlighted | Describes whether the actual date is the first date of the highlighted interval or not. | | isLastOfHighlighted | Describes whether the actual date is the last date of the highlighted interval or not. | | highlightColor | The color of the highlight in rgba format. | | highlightId | The highlight id or key if the actual date is highlighted. |

Development

Local development is broken into two parts (ideally using two terminal tabs).

First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.

# Assume that you are in the project main folder
$ npm i
$ npm start

The second part will be running the example/ create-react-app that's linked to the local version of your module.

# Assume that you are in the project main folder
$ cd example
$ npm i
$ npm start

Contributing

First off all, thanks for taking the time to contribute! :muscle:

Before any action, please visit the Code of Conduct and Contributing guideline for more information.

License

React Interval Calendar is Open Source software under the MIT license. Complete license and copyright information can be found within the license.