removeBookings doesn't work, inArray is buggy

.gitignore

@@ -1 +1,2 @@
-project.tmproj
+project.tmproj
+.project

README.markdown

@@ -1,11 +1,17 @@
 jQuery.bookingsTimeline
 ================
 
-Based on excellent [jQuery.ganttView](http://github.com/thegrubbsian/jquery.ganttView/) plugin by Frank (JC) Grubbs.
+Based on excellent [jQuery.ganttView](http://github.com/thegrubbsian/jquery.ganttView/) plugin by Frank (JC) Grubbs and its modification
+[jQuery.bookingsTimeline](https://github.com/laurynas/jquery.bookingsTimeline) by Laurynas Butkus.
 
 The jQuery.bookingsTimeline plugin is a very lightweight plugin for creating a bookings timeline plain HTML...no vector graphics or images required.  
 The plugin supports dragging and resizing the blocks and callbacks to trap the updated data.
 
+This fork adds the following features:
+- dragging between facilities (Y axis)
+- reverting dragging based on condition
+- displaying booking from midday to midday 
+
 
 Browser Compatibility
 ---------------------
@@ -28,7 +34,7 @@ of the following license:
 
 The MIT License
 
-Copyright (c) 2011 Laurynas Butkus - laurynas.butkus@gmail.com
+Copyright (c) 2011 Roman Kalyakin - theorm@gmail.com
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

example/data.js

@@ -1,51 +1,54 @@
 var timelineData = [
 	{
 		id: 1, name: "Facility 1", series: [
-			{ name: "Booking 1", start: new Date(2011,00,04), end: new Date(2011,00,05) },
-			{ name: "Booking 2", start: new Date(2011,00,07), end: new Date(2011,00,10), color: "#f0f0f0" }
+			{ id: 1, name: "Booking 1", start: new Date(2011,00,04), end: new Date(2011,00,05) },
+			{ id: 2, name: "Booking 2", start: new Date(2011,00,07), end: new Date(2011,00,10), color: "#f0f0f0" }
 		]
 	}, 
 	{
 		id: 2, name: "Facility 2", series: [
-			{ name: "Booking 3", start: new Date(2011,00,05), end: new Date(2011,00,20), cssClass: 'special' },
-			{ name: "Booking 4", start: new Date(2011,00,21), end: new Date(2011,00,27), color: "#f0f0f0" },
-			{ name: "Booking 5", start: new Date(2011,01,06), end: new Date(2011,01,17), color: "#e0e0e0" }
+			{ id: 3, name: "Booking 3", start: new Date(2011,00,05), end: new Date(2011,00,20), cssClass: 'special' },
+			{ id: 4, name: "Booking 4", start: new Date(2011,00,21), end: new Date(2011,00,27), color: "#f0f0f0" },
+			{ id: 5, name: "Booking 5", start: new Date(2011,01,06), end: new Date(2011,01,17), color: "#e0e0e0" }
 		]
 	}, 
 	{
 		id: 3, name: "Facility 3", series: [
-			{ name: "Booking 6", start: new Date(2010,11,25), end: new Date(2011,00,03), title: "My custom title" },
-			{ name: "Booking 7", start: new Date(2011,00,15), end: new Date(2011,01,03), color: "#f0f0f0" }
+			{ id: 6, name: "Booking 6", start: new Date(2010,11,25), end: new Date(2011,00,03), title: "My custom title" },
+			{ id: 7, name: "Booking 7", start: new Date(2011,00,15), end: new Date(2011,01,03), color: "#f0f0f0" }
 		]
 	}, 
 	{
 		id: 4, name: "Facility 4", series: [
-			{ name: "Booking 8", start: new Date(2011,01,01), end: new Date(2011,01,03), cssClass: 'special' },
-			{ name: "Booking 9", start: new Date(2011,01,04), end: new Date(2011,01,05), color: "#f0f0f0" }
+			{ id: 8, name: "Booking 8", start: new Date(2011,01,01), end: new Date(2011,01,03), cssClass: 'special' },
+			{ id: 9, name: "Booking 9", start: new Date(2011,01,04), end: new Date(2011,01,05), color: "#f0f0f0" }
 		]
 	},
 	{
 		id: 5, name: "Facility 5", series: [
-			{ name: "Booking 10", start: new Date(2011,02,01), end: new Date(2011,03,20) },
-			{ name: "Booking 11", start: new Date(2011,03,25), end: new Date(2011,03,26), color: "#f0f0f0" }
+			{ id: 10, name: "Booking 10", start: new Date(2011,02,01), end: new Date(2011,03,20) },
+			{ id: 11, name: "Booking 11", start: new Date(2011,03,25), end: new Date(2011,03,26), color: "#f0f0f0" }
 		]
 	}, 
 	{
 		id: 6, name: "Facility 6", series: [
-			{ name: "Booking 12", start: new Date(2011,00,05), end: new Date(2011,00,10) },
-			{ name: "Booking 13", start: new Date(2011,00,14), end: new Date(2011,00,17), color: "#f0f0f0" },
-			{ name: "Booking 14", start: new Date(2011,03,06), end: new Date(2011,03,20), color: "#e0e0e0" }
+			{ id: 12, name: "Booking 12", start: new Date(2011,00,05), end: new Date(2011,00,10) },
+			{ id: 13, name: "Booking 13", start: new Date(2011,00,14), end: new Date(2011,00,17), color: "#f0f0f0" },
+			{ id: 14, name: "Booking 14", start: new Date(2011,03,06), end: new Date(2011,03,20), color: "#e0e0e0" }
 		]
 	}, 
 	{
 		id: 7, name: "Facility 7", series: [
-			{ name: "Booking 15", start: new Date(2011,03,11), end: new Date(2011,04,03) }
+			{ id: 15, name: "Booking 15", start: new Date(2011,03,11), end: new Date(2011,04,03) }
 		]
 	}, 
 	{
 		id: 8, name: "Facility 8", series: [
-			{ name: "Booking 16", start: new Date(2011,01,01), end: new Date(2011,01,03) },
-			{ name: "Booking 17", start: new Date(2011,01,04), end: new Date(2011,01,05), color: "#f0f0f0" }
+			{ id: 16, name: "Booking 16", start: new Date(2011,01,01), end: new Date(2011,01,03) },
+			{ id: 17, name: "Booking 17", start: new Date(2011,01,04), end: new Date(2011,01,05), color: "#f0f0f0" }
 		]
+	},
+	{
+		id: 8, name: "Facility 9", series: []
 	}
 ];

example/index.html

@@ -24,34 +24,66 @@
 	<div id="bookingsTimeline"></div>
 	<br/><br/>
 	<div id="eventMessage"></div>
+	<br/><br/>
+	<a href="#" id="addRandomBookings">Add random booking</a>
+	<a href="#" id="removeRandomBookings">Remove random booking</a>
 
 	<script type="text/javascript" src="../lib/jquery-1.4.2.js"></script>
 	<script type="text/javascript" src="../lib/date.js"></script>
 	<script type="text/javascript" src="../lib/jquery-ui-1.8.4.js"></script>
+
 	<script type="text/javascript" src="../jquery.bookingsTimeline.js"></script>
 	<script type="text/javascript" src="data.js"></script>
 	<script type="text/javascript">
 		$(function () {
 			$("#bookingsTimeline").bookingsTimeline({ 
 				data: timelineData,
 				slideWidth: 900,
-				//focus: 'today',
+				focus: 'today',
 				behavior: {
+//					draggable_axis : "y",
 					onClick: function (data) { 
 						var msg = "You clicked on booking: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
 						$("#eventMessage").text(msg);
 					},
-					onResize: function (data) { 
-						var msg = "You resized booking: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
+					onDblClick: function (data) { 
+						var msg = "You double clicked on booking: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
+						$("#eventMessage").text(msg);
+					},
+					onResize: function (oldBooking, newBooking) { 
+						var msg = "You resized booking: { start: " + newBooking.start.toString("M/d/yyyy") + ", end: " + newBooking.end.toString("M/d/yyyy") + " }";
+						$("#eventMessage").text(msg);
+					},
+					onDrag: function (oldBooking, newBooking, oldFacility, newFacility) { 
+						var msg = "You dragged booking " + oldBooking.name + " from " + oldFacility.name + " to " + newFacility.name + ": { start: " + newBooking.start.toString("M/d/yyyy") + ", end: " + newBooking.end.toString("M/d/yyyy") + " }";
 						$("#eventMessage").text(msg);
+						return true;
 					},
-					onDrag: function (data) { 
-						var msg = "You dragged booking: { start: " + data.start.toString("M/d/yyyy") + ", end: " + data.end.toString("M/d/yyyy") + " }";
+					onNewBooking : function(from,to,facility) {
+						var msg = "New booking requested for " + facility.name + " from " + from + " to " + to;
 						$("#eventMessage").text(msg);
 					}
 				}
 			});
 
+			$("#addRandomBookings").click(function() {
+				var bookings = [{
+					id: 1, name: "Facility 1", series: [
+						{ id: 21, name: "New Booking 1", start: new Date(2011,01,05), end: new Date(2011,01,07) },
+						{ id: 22, name: "New Booking 2", start: new Date(2011,01,09), end: new Date(2011,01,12), color: "#f0f0f0" }
+					]
+				}];
+				$("#bookingsTimeline").bookingsTimeline('addBookings', bookings);
+
+				return false;
+			});
+
+			$("#removeRandomBookings").click(function() {
+				var bookings = [21,22];
+				$("#bookingsTimeline").bookingsTimeline('removeBookings', bookings);
+				return false;
+			});
+
 			// $("#bookingsTimeline").bookingsTimeline("setSlideWidth", 600);
 		});
 	</script>

jquery.bookingsTimeline.css

@@ -1,5 +1,6 @@
 /*
 jQuery.bookingsTimeline v.0.0.1
+Copyright (c) 2011 Roman Kalyakin - [email protected]
 Copyright (c) 2011 Laurynas Butkus - [email protected]
 Copyright (c) 2010 JC Grubbs - [email protected]
 MIT License Applies
@@ -11,7 +12,8 @@ div.bookingstimeline-vtheader,
 div.bookingstimeline-vtheader-item-name,
 div.bookingstimeline-vtheader-series,
 div.bookingstimeline-grid,
-div.bookingstimeline-grid-row-cell {
+div.bookingstimeline-grid-row-cell,
+div.bookingstimeline-grid-row-cell-midday {
 	float: left;
 }
 
@@ -93,11 +95,29 @@ div.bookingstimeline-grid-row-cell.bookingstimeline-weekend {
 	background-color: #fafafa;
 }
 
+div.bookingstimeline-grid-row-cell.selected {
+	background-color: #FBCB09;
+	border-right: 1px solid transparent;
+}
+
+div.bookingstimeline-grid-row-cell-midday {
+	width: 50%;
+	height: 100%;
+	border-right: 1px solid #fafafa;
+}
+
+div.bookingstimeline-grid-row-cell.selected div.bookingstimeline-grid-row-cell-midday {
+	border-right: none;
+}
+
 
 /* Blocks */
 
 div.bookingstimeline-blocks {
 	margin-top: 40px;
+	/* setting minimum w&h to get it out of the way when doing selection */
+	width: 1px;
+	height: 1px;
 }
 
 div.bookingstimeline-block-container {
@@ -130,3 +150,7 @@ div.bookingstimeline-block-text {
 div.bookingstimeline-block div.ui-resizable-handle.ui-resizable-s {
 	bottom: -0;
 }
+
+.highlight {
+	background-color: #1Cb4d4;
+}