resize from the left

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 ## Unreleased
 When you submit a PR, add your changes here!
 
+## [0.10.0]
+### Added
+- You can also resize items from the left now by @mariusandra
+
 ## [0.9.0]
 ### Added
 - Allow disabling selection clicks on items #58 by @sjchmiela
@@ -22,3 +26,4 @@ When you submit a PR, add your changes here!
 - Package a .css file, not a .scss file as previously done.
 
 [0.9.0]: https://github.com/namespace-ee/react-calendar-timeline/compare/v0.8.6...v0.9.0
+[0.10.0]: https://github.com/namespace-ee/react-calendar-timeline/compare/v0.9.0...v0.10.0

README.md

@@ -190,8 +190,8 @@ Default:
 ### onItemMove(itemId, dragTime, newGroupOrder)
 Callback when an item is moved. Returns 1) the item's ID, 2) the new start time and 3) the index of the new group in the `groups` array.
 
-### onItemResize(itemId, newResizeEnd)
-Callback when an item is resized. Returns 1) the item's ID, 2) the new end time of the item
+### onItemResize(itemId, time, edge)
+Callback when an item is resized. Returns 1) the item's ID, 2) the new start or end time of the item 3) The edge that was dragged (`left` or `right`)
 
 ### onItemSelect(itemId, e)
 Called when an item is selected. This is sent on the first click on an item.
@@ -211,19 +211,21 @@ Called when an item was double clicked
 ### onItemContextMenu(itemId, e)
 Called when the item is clicked by the right button of the mouse. Note: If this property is set the default context menu doesn't appear
 
-### moveResizeValidator(action, itemId, time)
+### moveResizeValidator(action, itemId, time, resizeEdge)
 This function is called when an item is being moved or resized. It's up to this function to return a new version of `change`, when the proposed move would violate business logic.
 
 The argument `action` is one of `move` or `resize`.
 
-The argument `time` describes the proposed new time for either the start time of the item (for move) or the end time (for resize).
+The argument `resizeEdge` is when resizing one of `left` or `right`.
+
+The argument `time` describes the proposed new time for either the start time of the item (for move) or the start or end time (for resize).
 
 The function must return a new unix timestamp in milliseconds... or just `time` if the proposed new time doesn't interfere with business logic.
 
 For example, to prevent moving of items into the past, but to keep them at 15min intervals, use this code:
 
 ```js
-function(action, item, time) {
+function (action, item, time, resizeEdge) {
   if (time < new Date().getTime()) {
     var newTime = Math.ceil(new Date().getTime() / (15*60*1000)) * (15*60*1000);
     return newTime;

index.html

@@ -48,7 +48,7 @@
         start: startValue,
         end: endValue,
         canMove: startValue > new Date().getTime(),
-        canResize: endValue > new Date().getTime(),
+        canResize: startValue > new Date().getTime() ? (endValue > new Date().getTime() ? 'both' : 'left') : (endValue > new Date().getTime() ? 'right' : false),
         className: (moment(startDate).day() === 6 || moment(startDate).day() === 0) ? 'item-weekend' : '',
         itemProps: {
           'data-tip': faker.hacker.phrase()
@@ -67,7 +67,7 @@
       fixedHeader: 'fixed',
 
       canMove: true, // defaults
-      canResize: true,
+      canResize: 'right',
       canSelect: true,
 
       itemsSorted: true,
@@ -105,7 +105,15 @@
         console.log("Context Menu: " + item);
       },
 
-      moveResizeValidator: function(action, item, time) {
+      onItemMove: function (item, time) {
+        console.log("Moved", item, time);
+      },
+
+      onItemResize: function (item, time, edge) {
+        console.log("Resized", item, time, edge);
+      },
+
+      moveResizeValidator: function(action, item, time, resizeEdge) {
         if (time < new Date().getTime()) {
           var newTime = Math.ceil(new Date().getTime() / (15*60*1000)) * (15*60*1000);
           return newTime;

package.json

@@ -45,10 +45,10 @@
     "react-pure-render": "^1.0.2"
   },
   "peerDependencies": {
-    "react": "^0.14.8 || ^15.0.1",
-    "react-dom": "^0.14.8 || ^15.0.1",
+    "interact.js": "*",
     "moment": "*",
-    "interact.js": "*"
+    "react": "^0.14.8 || ^15.0.1",
+    "react-dom": "^0.14.8 || ^15.0.1"
   },
   "devDependencies": {
     "babel-cli": "^6.7.5",