[fixed] layout of events in months that don't start evenly at weekday 0

Author: jquense

examples/App.js

@@ -39,7 +39,7 @@ const Example = React.createClass({
             selectable
             popup
             events={events}
-            defaultDate={new Date(2015, 1, 1)}
+            defaultDate={new Date(2015, 3, 1)}
             eventPropGetter={e => ({ className: 'hi-event'})}
             components={{
               event: EventWeek,

examples/events.js

@@ -12,52 +12,52 @@ export default [
   {
     "title": "All Day Event",
     "allDay": true,
-    "start": new Date(2015, 1, 1),
-    "end": new Date(2015, 1, 1)
+    "start": new Date(2015, 3, 0),
+    "end": new Date(2015, 3, 0)
   },
   {
     "title": "Long Event",
-    "start": new Date(2015, 1, 7),
-    "end": new Date(2015, 1, 10),
+    "start": new Date(2015, 3, 7),
+    "end": new Date(2015, 3, 10),
   },
   {
     "title": "Some Event",
-    "start": new Date(2015, 1, 9, 0, 0, 0),
-    "end": new Date(2015, 1, 9, 0, 0, 0),
+    "start": new Date(2015, 3, 9, 0, 0, 0),
+    "end": new Date(2015, 3, 9, 0, 0, 0),
   },
   {
     "title": "Conference",
-    "start": new Date(2015, 1, 11),
-    "end": new Date(2015, 1, 13)
+    "start": new Date(2015, 3, 11),
+    "end": new Date(2015, 3, 13)
   },
   {
     "title": "Meeting",
-    "start": new Date(2015, 1, 12, 10, 30, 0, 0),
-    "end": new Date(2015, 1, 12, 12, 30, 0, 0)
+    "start": new Date(2015, 3, 12, 10, 30, 0, 0),
+    "end": new Date(2015, 3, 12, 12, 30, 0, 0)
   },
   {
     "title": "Lunch",
-    "start":new Date(2015, 1, 12, 12, 0, 0, 0),
-    "end": new Date(2015, 1, 12, 13, 0, 0, 0)
+    "start":new Date(2015, 3, 12, 12, 0, 0, 0),
+    "end": new Date(2015, 3, 12, 13, 0, 0, 0)
   },
   {
     "title": "Meeting",
-    "start":new Date(2015, 1, 12,14, 0, 0, 0),
-    "end": new Date(2015, 1, 12,15, 0, 0, 0)
+    "start":new Date(2015, 3, 12,14, 0, 0, 0),
+    "end": new Date(2015, 3, 12,15, 0, 0, 0)
   },
   {
     "title": "Happy Hour",
-    "start":new Date(2015, 1, 12, 17, 0, 0, 0),
-    "end": new Date(2015, 1, 12, 17, 30, 0, 0)
+    "start":new Date(2015, 3, 12, 17, 0, 0, 0),
+    "end": new Date(2015, 3, 12, 17, 30, 0, 0)
   },
   {
     "title": "Dinner",
-    "start":new Date(2015, 1, 12, 20, 0, 0, 0),
-    "end": new Date(2015, 1, 12, 21, 0, 0, 0)
+    "start":new Date(2015, 3, 12, 20, 0, 0, 0),
+    "end": new Date(2015, 3, 12, 21, 0, 0, 0)
   },
   {
     "title": "Birthday Party",
-    "start":new Date(2015, 1, 13, 7, 0, 0),
-    "end": new Date(2015, 1, 13, 10, 30, 0)
+    "start":new Date(2015, 3, 13, 7, 0, 0),
+    "end": new Date(2015, 3, 13, 10, 30, 0)
   }
 ]

src/utils/eventLevels.js

@@ -1,4 +1,5 @@
 import dates from './dates';
+import localizer from '../localizer';
 import { accessor as get } from './accessors';
 //import canUseDom from 'dom-helpers/util/inDOM';
 
@@ -8,10 +9,9 @@ import { accessor as get } from './accessors';
 //   isIE = ('documentMode' in document)
 // }
 
-export function eventSegments(event, first, last, { startAccessor, endAccessor }){
-
-  let start = dates.duration(first,
-      dates.max(get(event, startAccessor), first), 'day');
+export function eventSegments(event, first, last, { startAccessor, endAccessor, culture }){
+  let startOfWeek = localizer.startOfWeek(culture);
+  let start = dates.duration(first, dates.max(get(event, startAccessor), first), 'weekday', startOfWeek);
 
   let span = Math.min(dates.duration(
       dates.max(get(event, startAccessor), first)