intro section

examples/Api.js

@@ -47,13 +47,13 @@ let Api = React.createClass({
           }
         </Heading>
         <p dangerouslySetInnerHTML={{ __html: data.descHtml }}/>
-        <div style={{ paddingLeft: 20 }}>
+        <div style={{ paddingLeft: 0 }}>
           <p>
-            <strong>type: </strong>
+            {'type: '}
             { typeInfo && typeInfo.type === 'pre' ? typeInfo : <code>{typeInfo}</code> }
           </p>
           { data.defaultValue &&
-            <div><strong>default: </strong><code>{data.defaultValue.trim()}</code></div>
+            <div>default: <code>{data.defaultValue.trim()}</code></div>
           }
         </div>
       </section>

examples/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Api from './Api';
+import Intro from './Intro.md';
 import cn from 'classnames';
 import { render } from 'react-dom';
 
@@ -11,6 +12,7 @@ localizer(globalize);
 import 'react-big-calendar/less/styles.less';
 import './styles.less';
 
+let demoRoot = 'https://github.com/intljusticemission/react-big-calendar/tree/master/examples/demos'
 
 const Example = React.createClass({
   getInitialState(){
@@ -36,6 +38,10 @@ const Example = React.createClass({
           <h1>Big Calendar <i className='fa fa-calendar'/></h1>
           <p>such enterprise, very business.</p>
           <p>
+            <a href="#intro">
+              <i className='fa fa-play'/> Getting started
+            </a>
+            {' | '}
             <a href="#api">
               <i className='fa fa-book'/> API documentation
             </a>
@@ -67,11 +73,17 @@ const Example = React.createClass({
             </ul>
           </aside>
           <div className='example'>
+            <div  style={{ marginBottom: 15 }}>
+              <a target='_blank' href={demoRoot + '/' + selected + '.js' }>
+                <strong><i className='fa fa-code'/>{' view example source code'}</strong>
+              </a>
+            </div>
             <Current />
           </div>
         </div>
         <div className='docs'>
-          <Api className='contain' />
+          <Intro className='contain section'/>
+          <Api className='contain section' />
         </div>
       </div>
     );

examples/Intro.md

@@ -0,0 +1,42 @@
+## <a id='intro' href='#intro'>Getting Started</a>
+
+You can install `react-big-calendar` via npm:
+
+```js
+npm i --save react-big-calendar
+```
+
+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.
+
+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
+out there, via adapters called "localizers". Big Calendar comes with two localizers for use
+with [Globalize.js](https://github.com/jquery/globalize) (v0.1.0 supported) or [Moment.js](http://momentjs.com/).
+
+Choose the localizer that best suits your needs, or write your own. Whatever you do, you'll need to set it up
+before you can use the calendar (you only need to set it up once).
+
+```jsx
+import BigCalendar from 'react-big-calendar';
+import moment from 'moment';
+
+// Setup the localizer by providing the moment (or globalize) Object
+// to the correct localizer.
+BigCalendar.momentLocalizer(moment); // or globalizeLocalizer
+
+let MyCalendar = props => (
+  <div>
+    <BigCalendar
+      events={myEventsList}
+      startAccessor='startDate'
+      endAccessor='endDate'
+    />
+  </div>
+);
+```
+
+Once you've configured a localizer, the Calendar is ready to accept `dateFormat` props. These props determine
+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!