diff --git a/examples/events.js b/examples/events.js
index 628b83c72..93f7e400e 100644
--- 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
index d7b4a5ba2..c99a42b64 100644
--- 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
index 724826a62..9943da6d2 100644
--- a/src/DaySlot.jsx
+++ b/src/DaySlot.jsx
@@ -145,12 +145,14 @@ let DaySlot = React.createClass({
-
{label}
+
{label}
{ EventComponent
?
@@ -163,16 +165,21 @@ 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) + '%'
}
},
@@ -180,7 +187,7 @@ let DaySlot = React.createClass({
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
index ad4f7086a..1cd5f29ea 100644
--- 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;
-}
\ No newline at end of file
+}
diff --git a/src/less/event.less b/src/less/event.less
index 0e7c8dc5c..364d840a8 100644
--- 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;
-}
\ No newline at end of file
+}
diff --git a/src/less/month.less b/src/less/month.less
index 32b5cb4af..480985542 100644
--- 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;
}
-}
\ No newline at end of file
+}