docs: all custom components documentation (jquense#2014)

* add comma in documentation comments for component agenda

* move unrendered information from calendar to intro file

* add messages example

* add resourceheader to list of components

Co-authored-by: khendrikse <k.hendrikse@youngcapital.nl>

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.

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,