diff --git a/examples/Intro.md b/examples/Intro.md index 3ee894bb70..0d853d2475 100644 --- a/examples/Intro.md +++ b/examples/Intro.md @@ -6,11 +6,12 @@ _yarn:_ `yarn add react-big-calendar` _npm:_ `npm install --save react-big-calendar` +`react-big-calendar` is a full featured Calendar component for managing events and dates. It uses modern `flexbox` for layout, making it super responsive and performant. Leaving most of the layout heavy lifting to the browser. + Styles can be found at: `react-big-calendar/lib/css/react-big-calendar.css`, and should be included on the page with the calendar component. Alternatively, you can include the styles directly in your SASS build. See the [Custom Styling](https://github.com/intljusticemission/react-big-calendar/blob/master/README.md#custom-styling) section of the README file for more details. -Also make sure that your calendar's container -element has a height, or the calendar won't be visible (see why below). +Also make sure that your calendar's container element has a height, or the calendar won't be visible (see why below). Date internationalization and localization is **hard** and `react-big-calendar` doesn't even attempt to solve that problem. Instead you can use one of the many excellent solutions already @@ -44,3 +45,6 @@ Once you've configured a localizer, the Calendar is ready to accept `dateFormat` how dates will be displayed throughout the component and are specific to the localizer of your choice. For instance if you are using the Moment localizer, then any [Moment format pattern](http://momentjs.com/docs/#/displaying/format/) is valid! + +One thing to note is that, `react-big-calendar` treats event start/end dates as an _exclusive_ range which means that the event spans up to, but not including, the end date. In the case of displaying events on whole days, end dates are rounded _up_ to the next day. So an event ending on `Apr 8th 12:00:00 am` will not appear on the 8th, whereas one ending +on `Apr 8th 12:01:00 am` will. If you want _inclusive_ ranges consider providing a function `endAccessor` that returns the end date + 1 day for those events that end at midnight. diff --git a/src/Calendar.js b/src/Calendar.js index 2d61b8fc66..68c0c314d1 100644 --- a/src/Calendar.js +++ b/src/Calendar.js @@ -34,23 +34,6 @@ function isValidView(view, { views: _views }) { return names.indexOf(view) !== -1 } -/** - * react-big-calendar is a full featured Calendar component for managing events and dates. It uses - * modern `flexbox` for layout, making it super responsive and performant. Leaving most of the layout heavy lifting - * to the browser. __note:__ The default styles use `height: 100%` which means your container must set an explicit - * height (feel free to adjust the styles to suit your specific needs). - * - * Big Calendar is unopiniated about editing and moving events, preferring to let you implement it in a way that makes - * the most sense to your app. It also tries not to be prescriptive about your event data structures, just tell it - * how to find the start and end datetimes and you can pass it whatever you want. - * - * One thing to note is that, `react-big-calendar` treats event start/end dates as an _exclusive_ range. - * which means that the event spans up to, but not including, the end date. In the case - * of displaying events on whole days, end dates are rounded _up_ to the next day. So an - * event ending on `Apr 8th 12:00:00 am` will not appear on the 8th, whereas one ending - * on `Apr 8th 12:01:00 am` will. If you want _inclusive_ ranges consider providing a - * function `endAccessor` that returns the end date + 1 day for those events that end at midnight. - */ class Calendar extends React.Component { static propTypes = { localizer: PropTypes.object.isRequired, @@ -702,9 +685,10 @@ class Calendar extends React.Component { * dateCellWrapper: MyDateCellWrapper, * timeSlotWrapper: MyTimeSlotWrapper, * timeGutterHeader: MyTimeGutterWrapper, + * resourceHeader: MyResourceHeader, * toolbar: MyToolbar, * agenda: { - * event: MyAgendaEvent // with the agenda view use a different component to render events + * event: MyAgendaEvent, // with the agenda view use a different component to render events * time: MyAgendaTime, * date: MyAgendaDate, * }, @@ -760,7 +744,33 @@ class Calendar extends React.Component { /** * String messages used throughout the component, override to provide localizations + * + * ```jsx + * const messages = { + * date: 'Date', + * time: 'Time', + * event: 'Event', + * allDay: 'All Day', + * week: 'Week', + * work_week: 'Work Week', + * day: 'Day', + * month: 'Month', + * previous: 'Back', + * next: 'Next', + * yesterday: 'Yesterday', + * tomorrow: 'Tomorrow', + * today: 'Today', + * agenda: 'Agenda', + * + * noEventsInRange: 'There are no events in this range.', + * + * showMore: total => `+${total} more`, + * } + * + * <Calendar messages={messages} /> + * ``` */ + messages: PropTypes.shape({ allDay: PropTypes.node, previous: PropTypes.node, @@ -779,8 +789,11 @@ class Calendar extends React.Component { /** * A day event layout(arrangement) algorithm. + * * `overlap` allows events to be overlapped. + * * `no-overlap` resizes events to avoid overlap. + * * or custom `Function(events, minimumStartDifference, slotMetrics, accessors)` */ dayLayoutAlgorithm: DayLayoutAlgorithmPropType,