update readme a bit more

README.md

@@ -1,149 +1,77 @@
-# Calendoux
-
-## Navigation
-  - Next/Prev (net day, next week, ...)
-  - RangeList (month, week, day, ...)
-  - RangeItem
-  - Return to today
-## Display
-  - Current range day
-  - EmptyCell
-  - HeaderCell
-  - Cell (hours, day, month, ...)
-  - EventCell
-## Settings
-  - Date format (DD/MM/YYYY)
-  - hour format (HH:mm)
-  - Start of the week (day)
-  - Work hour (start - end)
-  - Show weekends (bool)
-  - defaultView (week, month, ...)
-
-Example data:
-
-```jsx
-
-// Example of use i'd like to have :
-
-
-const Header = () => (
-  <div>
-    <Today />
-    <Navigation />
-    <Infos />
-    <SwitchView />
-  </div>
-)
-const Planning = () => (
-  <Planning
-    cell={(date, events) => (
-      <div>
-        <span>{date}</span>
-        <ul>
-          {events.map(e => <li>{e.title}</li>)}
-        </ul>
-      </div>
-    )}
-  />
-)
-const Daily = () => (
-  <DailyCalendar
-    cell={(date, events) => (
-      <div>
-        <span>{date}</span>
-        <ul>
-          {events.map(e => <li>{e.title}</li>)}
-        </ul>
-      </div>
-    )}
-    headerColumn={(date) => <span>{date}</span>}
-    headerRow={(hour) => <span>{hour}</span>}
-  />
-)
-
-const Weekly = () => (
-  <WeeklyCalendar
-    showWeekend={false}
-    cell={(date, events) => (
-      <div>
-        <span>{date}</span>
-        <ul>
-          {events.map(e => <li>{e.title}</li>)}
-        </ul>
-      </div>
-    )}
-    headerColumn={(date) => <span>{date}</span>}
-    headerRow={(hour) => <span>{hour}</span>}
-  />
-)
-
-const Monthly = () =>
-  <MonthlyCalendar
-    cell={(date, events) => (
-      <div>
-        <span>{date}</span>
-        <ul>
-          {events.map(e => <li>{e.title}</li>)}
-        </ul>
-      </div>
-    )}
-    headerColumn={(date) => <span>{date}</span>}
-  />
-
-() => (
-  <Calendar
-    data={sourceData}
-    workHours={["06:00", "22:00"]}
-    startingDay="monday"
-    format="24"
-  >
-    <MonthlyCalendar
-      showWeekend={true}
-      showEvent={false}
-      showRefused={false}
-      dateFormat="DD"
-      cell={(date) => (<span>{date}</span>)}
-      headerColumn={(date) => <span>{date}</span>}
-    >
-      <Navigation />
-      <InfoDisplayer />
-    </MonthlyCalendar>
-    <MultiView
-      options={["week", "month", "day", "planning"]}
-      defaultView="week"
-      defaultProps={{ showEvent: true, showWeekend: true, showRefused: false }}
-      header={Header}
-      week={Weekly}
-      month={Monthly}
-      day={Daily}
-      planning={Planning}
-    />
-  </Calendar>
-)
-
-
-// Example data :
-
-const data = {
-  '2017': {
-    '02': {
-      '22': {
-        '11': {
-          '*': [ { title: 'formation JS' } ],
-          '00': [ { title: 'CM JS', duration: '02:00:00' } ],
-          '30': [ { title: 'Gouter', duration: '00:30:00' } ]
-        }
-      }
-    }
-  }
+# Okami
+
+### IN ACTIVE DEVELOPMENT (not ready for production), documentation soon
+
+Allow to create a calendar without forcing a ui to you. Handle the logic so you can focus on UI/UX. Similar to [downshift](https://github.com/paypal/downshift)
+
+## Install
+
+```yarn add okami```
+```npm install --save okami```
+
+## Basic Usage
+
+For a complete example, look the storybook :)
+
+```javascript
+
+<Calendar
+  data={data}
+  startingDay="monday"
+  dateFormat="ddd DD/MM"
+  hourFormat="HH"
+  startHour="PT3H"
+  endHour="PT22H"
+  locale={frLocale}
+>
+  <Daily />
+</Calendar>
+
+```
+
+
+## Data structure
+
+Data is an array of objects, the object requires a few properties :
+- id : ID
+- title : string
+- allDay : boolean | Date
+- start : Date
+- end : Date
+
+#### How does it works ?
+
+if `allDay`is a boolean, you need to provide a `start` and `end` properties, if you want to create an event for the all day, you just put the date in `allDay`.
+
+```javascript
+
+// Event of 2 hours:
+{
+  id: 0,
+  title: 'Diner',
+  allDay: false,
+  start : 'Wed Sep 06 2017 12:07:52 GMT+0200 (CEST)',
+  end: 'Wed Sep 06 2017 14:07:52 GMT+0200 (CEST)'
+}
+
+// Event of all day:
+{
+  id: 0,
+  title: 'Diner',
+  allDay: 'Wed Sep 06 2017 12:07:52 GMT+0200 (CEST)'
+}
+
+// Event of 2 days:
+{
+  id: 0,
+  title: 'Diner',
+  allDay: true,
+  start : 'Wed Sep 06 2017 12:07:52 GMT+0200 (CEST)',
+  end: 'Wed Sep 08 2017 14:07:52 GMT+0200 (CEST)'
 }
 
-// could be the source format that the developer send:
+```
 
-const data = [
-  { date: '22/02/2017-11:00ZGMT+001', duration: '02:00:00' , title: 'CM JS', email: "[email protected]", accepted: true },
-  { date: '22/02/2017-11:30ZGMT+001', duration: '00:30:00', title: 'Gouter', email: "[email protected]", accepted: false },
-  { date: '22/02/2017-11:30ZGMT+001', duration: '*', title: 'formation JS', email: "[email protected]", accepted: null },
-]
+# LICENSE
 
-```
+ MIT