everything i missed

jhockett · Oct 26, 2015 · 286a166 · 286a166
1 parent 4dac3f5
commit 286a166
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 57 deletions.
diff --git a/examples/events.js b/examples/events.js
@@ -9,22 +9,22 @@
 //   })
 
 export default [
-  {
-    "title": "All Day Event",
-    "allDay": true,
-    "start": new Date(2015, 3, 0),
-    "end": new Date(2015, 3, 0)
-  },
-  {
-    "title": "Long Event",
-    "start": new Date(2015, 3, 7),
-    "end": new Date(2015, 3, 10),
-  },
-  {
-    "title": "Some Event",
-    "start": new Date(2015, 3, 9, 0, 0, 0),
-    "end": new Date(2015, 3, 9, 0, 0, 0),
-  },
+  // {
+  //   "title": "All Day Event",
+  //   "allDay": true,
+  //   "start": new Date(2015, 3, 0),
+  //   "end": new Date(2015, 3, 0)
+  // },
+  // {
+  //   "title": "Long Event",
+  //   "start": new Date(2015, 3, 7),
+  //   "end": new Date(2015, 3, 10),
+  // },
+  // {
+  //   "title": "Some Event",
+  //   "start": new Date(2015, 3, 9, 0, 0, 0),
+  //   "end": new Date(2015, 3, 9, 0, 0, 0),
+  // },
   {
     "title": "Conference",
     "start": new Date(2015, 3, 11),
@@ -33,31 +33,36 @@ export default [
   {
     "title": "Meeting",
     "start": new Date(2015, 3, 12, 10, 30, 0, 0),
-    "end": new Date(2015, 3, 12, 12, 30, 0, 0)
+    "end": new Date(2015, 3, 13, 12, 30, 0, 0)
   },
   {
     "title": "Lunch",
     "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, 3, 12,14, 0, 0, 0),
-    "end": new Date(2015, 3, 12,15, 0, 0, 0)
-  },
-  {
-    "title": "Happy Hour",
-    "start":new Date(2015, 3, 12, 17, 0, 0, 0),
-    "end": new Date(2015, 3, 12, 17, 30, 0, 0)
+    "end": new Date(2015, 3, 13, 13, 0, 0, 0)
   },
+  // {
+  //   "title": "Meeting",
+  //   "start":new Date(2015, 3, 12,14, 0, 0, 0),
+  //   "end": new Date(2015, 3, 13,15, 0, 0, 0)
+  // },
+  // {
+  //   "title": "Happy Hour",
+  //   "start":new Date(2015, 3, 12, 17, 0, 0, 0),
+  //   "end": new Date(2015, 3, 13, 17, 30, 0, 0)
+  // },
   {
     "title": "Dinner",
     "start":new Date(2015, 3, 12, 20, 0, 0, 0),
-    "end": new Date(2015, 3, 12, 21, 0, 0, 0)
+    "end": new Date(2015, 3, 13, 21, 0, 0, 0)
   },
   {
     "title": "Birthday Party",
     "start":new Date(2015, 3, 13, 7, 0, 0),
     "end": new Date(2015, 3, 13, 10, 30, 0)
+  },
+  {
+    "title": "Birthday Party 2",
+    "start":new Date(2015, 3, 13, 7, 0, 0),
+    "end": new Date(2015, 3, 13, 7, 0, 0)
   }
 ]
diff --git a/src/Calendar.jsx b/src/Calendar.jsx
@@ -192,6 +192,9 @@ let Calendar = React.createClass({
       month: PropTypes.shape({ event: elementType })
     }),
 
+    /**
+     * String messages used throughout the component, override to provide localizations
+     */
     messages: PropTypes.shape({
       allDay: PropTypes.string,
       previous: PropTypes.string,
@@ -200,7 +203,8 @@ let Calendar = React.createClass({
       month: PropTypes.string,
       week: PropTypes.string,
       day: PropTypes.string,
-      agenda: PropTypes.string
+      agenda: PropTypes.string,
+      showMore: PropTypes.func
     })
   },
 

diff --git a/src/DaySlot.jsx b/src/DaySlot.jsx
@@ -145,12 +145,14 @@ let DaySlot = React.createClass({
         <div
           key={'evt_' + idx}
           style={{...xStyle, ...style}}
+          title={label + ': ' + title }
           onClick={this._select.bind(null, event)}
           className={cn('rbc-event', className, {
-            'rbc-selected': _isSelected
+            'rbc-selected': _isSelected,
+            'rbc-event-overlaps': leftOffset !== 0
           })}
         >
-          <div className='rbc-event-label' title={label}>{label}</div>
+          <div className='rbc-event-label'>{label}</div>
           <div className='rbc-event-content'>
             { EventComponent
               ? <EventComponent event={event} title={title}/>
@@ -163,24 +165,29 @@ let DaySlot = React.createClass({
   },
 
   _slotStyle(startSlot, endSlot, leftOffset){
+
+    endSlot = Math.max(endSlot, startSlot + this.props.step) //must be at least one `step` high
+
     let eventOffset = this.props.eventOffset || 10;
 
     let top = ((startSlot / this._totalMin) * 100);
     let bottom = ((endSlot / this._totalMin) * 100);
+    let per = leftOffset === 0 ? 0 : leftOffset * eventOffset;
+    let rightDiff = (eventOffset / (leftOffset + 1));
 
     return {
       top: top + '%',
       height: bottom - top + '%',
-      left: leftOffset === 0 ? 0 : leftOffset * eventOffset + '%',
-      right: 0
+      left: per + '%',
+      width: (leftOffset === 0 ? (100 - eventOffset) : (100 - per) - rightDiff) + '%'
     }
   },
 
   _selectable(){
     let node = findDOMNode(this);
     let selector = this._selector = new Selection(()=> findDOMNode(this))
 
-    selector.on('selecting', ({ x, y }) => {
+    let selectionState = ({ x, y }) => {
       let { date, step, min } = this.props;
       let { top, bottom } = getBoundsForNode(node)
 
@@ -204,14 +211,20 @@ let DaySlot = React.createClass({
       let start = dates.min(initial, current)
       let end = dates.max(initial, current)
 
-      this.setState({
+      return {
         selecting: true,
         startDate: start,
         endDate: end,
         startSlot: positionFromDate(start, min, step),
         endSlot: positionFromDate(end, min, step)
-      })
-    })
+      }
+    }
+
+    selector.on('selecting',
+      box => this.setState(selectionState(box)))
+
+    selector.on('selectStart',
+      box => this.setState(selectionState(box)))
 
     selector
       .on('click', () => {

diff --git a/src/less/day-slot.less b/src/less/day-slot.less
@@ -12,6 +12,7 @@
     max-height: 100%;
     flex-flow: column wrap;
     align-items: flex-start;
+    overflow: hidden;
   }
 
   .rbc-event-label {
@@ -49,4 +50,4 @@
 
 .rbc-day-slot .rbc-event {
   position: absolute;
-}
+}
diff --git a/src/less/event.less b/src/less/event.less
@@ -17,11 +17,16 @@
   font-size: 80%;
 }
 
+.rbc-event-overlaps {
+  box-shadow: -1px 1px 5px 0px rgba(51,51,51,.5);
+}
+
 .rbc-event-continues-after {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
+
 .rbc-event-continues-prior {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-}
+}
diff --git a/src/less/month.less b/src/less/month.less
@@ -20,33 +20,17 @@
   opacity: 0.05
 }
 
-.show-more-offsets (@i) when (@i > 0) {
-  @per: percentage((@i - 1) / 7);
 
-  .rbc-show-offset-@{i}{
-    left: @per;
-  }
-  .show-more-offsets (@i - 1);
-}
-
-.show-more-offsets(7);
 
 .rbc-show-more {
   &:extend(.rbc-ellipsis);
   background-color: rgba(255, 255, 255, 0.3);
   z-index: @event-zindex;
-  float: left;
-  position: absolute;
-  width: 14.28571429%;
-  bottom: 0;
-  //font-style: italic;
   font-weight: bold;
   font-size: 85%;
-  text-align: center;
   height: auto;
   line-height: normal;
   white-space: nowrap;
-  color: #333;
 }
 
 .rbc-month-view {
@@ -134,4 +118,4 @@
   > * + * {
     margin-top: 1px;
   }
-}
+}