From a40125254a66443e5878237a7791b94bd5140f48 Mon Sep 17 00:00:00 2001
From: Marc Englund <marc.englund@itmill.com>
Date: Fri, 12 Oct 2007 13:44:30 +0000
Subject: [PATCH] Reservr look & feel mainly

svn changeset:2514/svn branch:trunk
---
 WebContent/ITMILL/themes/reservr/reservr.jpg  | Bin 0 -> 1080 bytes
 WebContent/ITMILL/themes/reservr/styles.css   |  37 +++++-
 WebContent/reservr.html                       |   7 +-
 .../reservation/ReservationApplication.java   |  53 ++++++---
 .../toolkit/demo/reservation/SampleDB.java    |  34 +-----
 .../gwt/public/reservr/img/entry-bg.jpg       | Bin 0 -> 357 bytes
 .../gwt/public/reservr/img/entry-topleft.jpg  | Bin 0 -> 687 bytes
 .../gwt/public/reservr/img/event-bg.jpg       | Bin 0 -> 437 bytes
 .../reservation/gwt/public/reservr/styles.css | 112 +++++++++++++-----
 .../terminal/gwt/client/ui/ICalendar.java     |  20 +++-
 .../public/default/datefield/datefield.css    |  39 ------
 11 files changed, 181 insertions(+), 121 deletions(-)
 create mode 100644 WebContent/ITMILL/themes/reservr/reservr.jpg
 create mode 100644 src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-bg.jpg
 create mode 100644 src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-topleft.jpg
 create mode 100644 src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/event-bg.jpg

diff --git a/WebContent/ITMILL/themes/reservr/reservr.jpg b/WebContent/ITMILL/themes/reservr/reservr.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5fc956a372afdf030b5d99ffffc568ad72650ccf
GIT binary patch
literal 1080
zcmex=<NpH&0WUXCHwH#VMg|WcWcdG(LCm!xGmU}4*Ox(yfq{Voh=Jh$Z3brsCZIA#
zMi9va0xZlRl9h#pnT3s&jSY<1IXT$aIoa9RIJh}Dxj+EO;^F4v0dYWvK(sQkGBdMs
zv9qy*m5@aIKfoZ!!Jx>X$jqq3z$D1XEXer(2!k{O0}~T7BgC-~l9h#nnVpjjC}}3Z
zz{t$Z%*4#X&IyrY1hN@e+1NP*g$#ui9YsWy0+o$S5(^tIsyYRyG_`Izd>N=ul92(;
zOa=}n7ItQ!l!hP!BhV8pjI1y#fkra0u(AmXDH^gXIVK7R7B(*2`2Q9I571Rig3N*p
z_6$3u4zBq%zvAl5Z#yixk~$7<+N#-N6%y96^T0=@rXZ#U2FBa(*BF+HM@BGgUXf^j
z>(TtLVN32@ODsKR&O6~)SL>GrE}xlyn)z1DE_*nC*NGz4b?>gUM=~GHZ9jC%UVwjU
zf@$@<%2`J)r+#Pf?q*<J!NAlZ&D^-f^4fL(mBwLPZJ(Un;B_<8W#tx4mzA7>Dib_a
zW^6v2Ew|70b8>J~#oOOX@_#bZjQ8w47Flk)d{(S^z}nBcKY5>STeorft;J@seJgnk
zf-c>15|MfOZ{hRf2XA~^^;0=Uzi^iR$x7dC^Ve(_y~O@3ORgzp<JRA$QuU_q7Z;0M
zjTYauW}a-+W!tGXBDMnV3^k{Gize<;pED<4m@he~c<PGY6Vgoubr;K)UOwe)va{7v
z<-nVGUIoEh<t!=!wM~YybG~!_?9%Ly{K=)+-cs$+=bg7-cz??6{ksykOB5tW>YIHv
zx_oZ$m-iNTBu;91JU?mc$I^IQWy!odVI7xp8P6@bIXC2u{-L5WeWRmUb5nCOeIh4b
zdlA32@M}!aC9aq^HSH=Bk2`IZPd)#1ci%}<ZoSKG>%aY;QX#aaSme;$81b2zyt-2w
z_&oyMJI_xqynpfYF2ULQQ?_@+Oqf@#cJKMih^;~QYER8Mbcj!6s~rDS;ooP>%I^Nw
z*Uk6b_-XmZWtVqKXF9MHzn1S<7_e>mgp=t^dskh5xHs=rv2t_ujIArPf*nNbJ_I#g
z{?PANZ*}{2@r66tB6pTqPm5SHk7spXdRA5SUoXWvnI(dkCRMl>`7;#1KF{1Ow|Do`
zcXCS~i5u1Z;H#VR+_&ual-pmqPM1_m%s8YND>3QuCZ&~IRCRYuo!{x)S0U$oZI##U
z$xgYO7rb$A{(AnK{+0DF-8Ijv?3sIE;fYWDJGN{IsjoWt&tTDZ5C2U{X7=CeUxoja
eN_G`-P+0Lje#80?i@FqSoUAk!b+pv~zX<?4aFSvG

literal 0
HcmV?d00001

diff --git a/WebContent/ITMILL/themes/reservr/styles.css b/WebContent/ITMILL/themes/reservr/styles.css
index 569fcaf8c6..22a777dca3 100644
--- a/WebContent/ITMILL/themes/reservr/styles.css
+++ b/WebContent/ITMILL/themes/reservr/styles.css
@@ -1,15 +1,48 @@
+/* Reservr styles */
+html, body {
+	background-color: #E9ECED;
+}
+#header {
+	font-family:"Trebuchet MS",geneva,helvetica,arial,tahoma,verdana,sans-serif;
+	padding: 10px;
+}
+#logo {
+	line-height: 33px;
+	color:#F14C1A;
+	font-size:22px;
+	letter-spacing:-0.03em;
+}
+#slogan {
+	color: #464F52;
+}
+
+/* Default widgetset overrides */
+textarea.i-textfield {
+	font-size: 13px;
+	width: 326px;
+	height: 110px;
+}
+button.link {
+	text-decoration: none;
+}
 button.important-link {
 	border: 0px;
 	text-align: left;
-	text-decoration: underline;
+	text-decoration: none;
 	background: none;
 	font-weight: bold;
 }
 button.selected-link {
 	border: 0px;
 	text-align: left;
-	text-decoration: underline;
+	text-decoration: none;
 	background: #183C6B;
 	font-weight: bold;
 	color: white;
 }
+.i-orderedlayout {
+	margin:5px 5px;
+}
+.i-orderedlayout TD {
+	vertical-align: top;
+}
\ No newline at end of file
diff --git a/WebContent/reservr.html b/WebContent/reservr.html
index ac1270fdf5..a5acb63cf1 100644
--- a/WebContent/reservr.html
+++ b/WebContent/reservr.html
@@ -4,7 +4,7 @@
 	<title>IT Mill Toolkit 5 Demo: Reservr</title>
 	<script type="text/javascript">
 		var itmtk = {
-			appUri:'Reservr', pathInfo: '/'
+			appUri:'/toolkit/Reservr', pathInfo: '/'
 		};
 	</script>
 	<script src="http://maps.google.com/maps?file=api&amp;v=2" type="text/javascript"></script>
@@ -13,6 +13,11 @@
 </head>
 <body>
 	<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
+	<div id="header">
+		<img src="ITMILL/themes/reservr/reservr.jpg" align="top"/>
+		<span id="logo">Reservr Inc</span>
+		<span>&raquo; Representational cars on-the-road</span>
+	</div>
 	<div id="itmtk-ajax-window"></div>	
 </body>
 </html>
diff --git a/src/com/itmill/toolkit/demo/reservation/ReservationApplication.java b/src/com/itmill/toolkit/demo/reservation/ReservationApplication.java
index b5b59c8ba6..3c7ec1a031 100644
--- a/src/com/itmill/toolkit/demo/reservation/ReservationApplication.java
+++ b/src/com/itmill/toolkit/demo/reservation/ReservationApplication.java
@@ -30,7 +30,8 @@ public class ReservationApplication extends Application {
 	ResourceSelectorPanel resourcePanel;
 
 	private CalendarField reservedFrom;
-	private static final long DEFAULT_GAP_MILLIS = 3600000; // one hour
+	private static final long DEFAULT_GAP_MILLIS = 3600000; // (almost) one
+	// hour
 	private long currentGapMillis = DEFAULT_GAP_MILLIS; // current length of
 	// reservation
 	private CalendarField reservedTo;
@@ -57,8 +58,6 @@ public class ReservationApplication extends Application {
 		TabSheet mainTabs = new TabSheet();
 		mainWindow.addComponent(mainTabs);
 
-		mainWindow.addComponent(new Button("close", this, "close"));
-
 		OrderedLayout reservationTab = new OrderedLayout();
 		mainTabs.addTab(reservationTab, "Make reservation", null);
 
@@ -79,7 +78,7 @@ public class ReservationApplication extends Application {
 		resourceName.setCaption("Choose resource");
 		infoLayout.addComponent(resourceName);
 		description = new TextField();
-		description.setColumns(55);
+		description.setColumns(47);
 		description.setRows(5);
 		infoLayout.addComponent(description);
 		reservationButton = new Button("Make reservation", this,
@@ -89,7 +88,7 @@ public class ReservationApplication extends Application {
 		infoLayout.addComponent(statusLabel);
 
 		map = new GoogleMap();
-		map.setWidth(360);
+		map.setWidth(330);
 		map.setHeight(270);
 		map.setItemMarkerHtmlPropertyId(SampleDB.Resource.PROPERTY_ID_NAME);
 		map.setItemMarkerXPropertyId(SampleDB.Resource.PROPERTY_ID_LOCATIONX);
@@ -98,7 +97,11 @@ public class ReservationApplication extends Application {
 		infoLayout.addComponent(map);
 
 		Calendar from = Calendar.getInstance();
-		reservedFrom = new CalendarField();
+		from.add(Calendar.HOUR, 1);
+		from.set(Calendar.MINUTE, 0);
+		from.set(Calendar.SECOND, 0);
+		from.set(Calendar.MILLISECOND, 0);
+		reservedFrom = new CalendarField("From »");
 		reservedFrom.setMinimumDate(from.getTime());
 		reservedFrom.setValue(from.getTime());
 		reservedFrom.setImmediate(true);
@@ -106,9 +109,10 @@ public class ReservationApplication extends Application {
 		reservationPanel.addComponent(reservedFrom);
 
 		Calendar to = Calendar.getInstance();
-		to.add(Calendar.MILLISECOND, (int) currentGapMillis);
-		reservedTo = new CalendarField();
-		reservedTo.setMinimumDate(from.getTime());
+		to.setTime(from.getTime());
+		to.add(Calendar.MILLISECOND, (int) DEFAULT_GAP_MILLIS);
+		reservedTo = new CalendarField("» To");
+		reservedTo.setMinimumDate(to.getTime());
 		reservedTo.setValue(to.getTime());
 		reservedTo.setImmediate(true);
 		initCalendarFieldPropertyIds(reservedTo);
@@ -125,7 +129,8 @@ public class ReservationApplication extends Application {
 				} else {
 					reservedTo.setEnabled(true);
 				}
-				reservedTo.setMinimumDate(fd);
+				reservedTo.setMinimumDate(new Date(fd.getTime()
+						+ DEFAULT_GAP_MILLIS));
 				Calendar to = Calendar.getInstance();
 				to.setTime(fd);
 				to.add(Calendar.MILLISECOND, (int) currentGapMillis);
@@ -156,6 +161,8 @@ public class ReservationApplication extends Application {
 		initCalendarFieldPropertyIds(allCalendar);
 		allLayout.addComponent(allCalendar);
 		allTable = new Table();
+		allTable.setColumnCollapsingAllowed(true);
+		allTable.setColumnReorderingAllowed(true);
 		allLayout.addComponent(allTable);
 		mainTabs.addTab(allLayout, "All reservations", null);
 		mainTabs.addListener(new TabSheet.SelectedTabChangeListener() {
@@ -212,8 +219,16 @@ public class ReservationApplication extends Application {
 		refreshSelectedResources();
 		Container allReservations = db.getReservations(null);
 		allTable.setContainerDataSource(allReservations);
+		if (allReservations != null && allReservations.size() > 0) {
+			allTable.setVisibleColumns(new Object[] {
+					SampleDB.Reservation.PROPERTY_ID_RESERVED_FROM,
+					SampleDB.Reservation.PROPERTY_ID_RESERVED_TO,
+					SampleDB.Resource.PROPERTY_ID_NAME,
+					SampleDB.Resource.PROPERTY_ID_DESCRIPTION,
+					SampleDB.Reservation.PROPERTY_ID_DESCRIPTION});
+			allTable.setColumnHeaders(new String[] {"From","To","Resource","Description","Message"});
+			}
 		allCalendar.setContainerDataSource(allReservations);
-
 	}
 
 	private void refreshSelectedResources() {
@@ -236,15 +251,21 @@ public class ReservationApplication extends Application {
 			map.setZoomLevel(1);
 
 		} else {
+			// Display active resource name + desc
+			String name = (String) resource.getItemProperty(
+					SampleDB.Resource.PROPERTY_ID_NAME).getValue();
+			String desc = (String) resource.getItemProperty(
+					SampleDB.Resource.PROPERTY_ID_DESCRIPTION).getValue();
+			resourceName.setCaption(name);
+			resourceName.setValue(desc);
+			// Put all resources on map (may be many if category was selected)
 			LinkedList srs = resourcePanel.getSelectedResources();
 			for (Iterator it = srs.iterator(); it.hasNext();) {
 				resource = (Item) it.next();
-				String name = (String) resource.getItemProperty(
+				name = (String) resource.getItemProperty(
 						SampleDB.Resource.PROPERTY_ID_NAME).getValue();
-				String desc = (String) resource.getItemProperty(
+				desc = (String) resource.getItemProperty(
 						SampleDB.Resource.PROPERTY_ID_DESCRIPTION).getValue();
-				resourceName.setCaption(name);
-				resourceName.setValue(desc);
 				Double x = (Double) resource.getItemProperty(
 						SampleDB.Resource.PROPERTY_ID_LOCATIONX).getValue();
 				Double y = (Double) resource.getItemProperty(
@@ -256,7 +277,7 @@ public class ReservationApplication extends Application {
 				}
 
 			}
-			map.setZoomLevel((srs.size() == 1 ? 16 : 9));
+			map.setZoomLevel((srs.size() == 1 ? 14 : 9));
 			reservationButton.setEnabled(true);
 		}
 
diff --git a/src/com/itmill/toolkit/demo/reservation/SampleDB.java b/src/com/itmill/toolkit/demo/reservation/SampleDB.java
index ff7c0ae18b..3c617323dd 100644
--- a/src/com/itmill/toolkit/demo/reservation/SampleDB.java
+++ b/src/com/itmill/toolkit/demo/reservation/SampleDB.java
@@ -374,35 +374,7 @@ public class SampleDB {
 	}
 
 	public void generateResources() {
-		/*
-		 * map.addMarker("Old Mill", new Point.Double(60.452224f,22.299929f));
-		 * map.addMarker("ICT", new Point.Double(60.449007f,22.295508f));
-		 * map.addMarker("DataCity", new Point.Double(60.448329f,22.295165f));
-		 * map.addMarker("BioCity", new Point.Double(60.449451f,22.293105f));
-		 * map.addMarker("PharmaCity", new Point.Double(60.44888f,22.292032f));
-		 * map.addMarker("Intelligate", new Point.Double(60.450403f,22.29495f));
-		 * map.addMarker("Paviljonki", new Point.Double(60.445408f,22.290831f));
-		 * map.addMarker("Trivium", new Point.Double(60.44641962165445f,
-		 * 22.301753170493f)); map.addMarker("Linja-auto asema", new
-		 * Point.Double(60.457049f,22.267957f));
-		 */
-		/*
-		 * Object[][] resources = { { "IT Mill Toolkit Manual", "the manual",
-		 * "Books", new Double(60.452224),new Double(22.299929)}, { "IT Mill
-		 * Toolkit for Dummies", "the hardcover version", "Books", new
-		 * Double(60.452224),new Double(22.299929) }, { "Sony", "Old Sony video
-		 * projector", "AV equipment", new Double(60.449007),new
-		 * Double(22.295508) }, { "Sanyo", "Brand new hd-ready video projector",
-		 * "AV equipment", new Double(60.452224),new Double(22.299929) }, {
-		 * "Room 7", "Conference room in the lobby", "Conference rooms", new
-		 * Double(60.449451),new Double(22.292032) }, { "Nintendo Wii", "Teh
-		 * uber fun", "Entertainment", new Double(60.445408),new
-		 * Double(22.290831) }, { "Playstation", "We don't actually have one",
-		 * "Entertainment", new Double(60.44641962165445),new
-		 * Double(22.301753170493) }, { "Luokkahuone", "Classroom right next to
-		 * IT Mill", "Conference rooms", new Double(60.44888),new
-		 * Double(22.292032) } };
-		 */
+
 		Object[][] resources = {
 				// Turku
 				{ "01", "01 Ford Mondeo", "w/ company logo", "Turku",
@@ -433,13 +405,13 @@ public class SampleDB {
 				{ "11", "11 Ford Mustang", "Keys from Acme clerk.",
 						"Silicon Valley", new Double(37.615853),
 						new Double(-122.386384) },
-				{ "12", "12 Ford Mondeo", "Keys from infodesk.",
+				{ "12", "12 Ford Fusion", "Keys from infodesk.",
 						"Silicon Valley", new Double(37.365028),
 						new Double(-121.922654) },
 				{ "13", "13 Ford Mustang", "GT Cal Special. Keys from guard.",
 						"Silicon Valley", new Double(37.403812),
 						new Double(-121.977425) },
-				{ "14", "14 Ford Mustang", "GT Cal Special. Keys from guard.",
+				{ "14", "14 Ford Focus", "Keys from guard.",
 						"Silicon Valley", new Double(37.403812),
 						new Double(-121.977425) },
 				{ "15", "15 Land Rover", "Keys from infodesk.",
diff --git a/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-bg.jpg b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-bg.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a6aeecaf7081ecce45b5e8c6e7effdb858db32de
GIT binary patch
literal 357
zcmex=<NpH&0WUXCHwH#VMg|WcWcdG(LCm!xGmU}4*Ox(yfq{Voh=Jh$Z3brsCZIA#
zMi9va0xZlRl9h#pnT3s&jSY<1IXT$aIoa9RIJh}Dxj+EO;^F4v0dYWvK(sQkGBdMs
zv9qy*m5@aIKfoZ!!QjNe$jqq3z$D1XEXer(2!lAt3ycuALP>T;4xogr03%Q-E3ym|
zi;%c#U`Wy=ptJ-~6EmtlHg*n9pp2v-BLfpNvOWeDQL(_F|F;-;fI652nFSf_8D6es
jUeTQDb<brl&+cMrzm`XrtNh<jd(2{**#Oka{Qo8ZeZDYH

literal 0
HcmV?d00001

diff --git a/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-topleft.jpg b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/entry-topleft.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..53da0b13c0d980ecc96fb1736896a4ae277536cb
GIT binary patch
literal 687
zcmex=<NpH&0WUXCHwH#VMg|WcWcdG(LCm!xGmU}4*Ox(yfq{Voh=Jh$Z3brsCZIA#
zMi9va0xZlRl9h#pnT3s&jSY<1IXT$aIoa9RIJh}Dxj+EO;^F4v0dYWvK(sQkGBdMs
zv9qy*m5@aIKfoZ!!Jy1w!px||z$D1XEXer(2!jj*BLfpN12e?6V3L)ck(q^wjT0!V
zE5N|W%*@2h$_bMPs%Bwk6=YWw5}v4J7&vJmn~1owkz;UTBT%^%BLg!K!PJ6iW>yw9
zb`GGNsvrX+3nLRND?*l$2^au^hO9!Oj)`K5fk7Ys-(uha8o(sTEXZKb@GE$Y)bEn3
z@tLZ2Yi}*p_SHJKoQc(HN$}I=hUbi5Exu1GzTdd%OQ!K!iMwaNgv`9sDR}$Pt>dd6
z&R+Ft_Qdz>^|xMRTQd18oz!~u)VAN9yVN3@x8!Md+2wElycdPMwlki#;-&GL{pE&%
zpG&hm?$4`Q(Ru5j?#_JMd#Ofoma*32uOFF*@2omCH<{0NnZ`-uoXERpPAy!PEpmB+
z_KyDy;lf+vs{4G)OM~wp&tCN=qMd(N=c*n1?#3N^JWq|UV}*U!=Ka=xPE5VF`j6CJ
z&GI)scl4H|^S=mD`MtWWF7egQ<#!p*#lKppC+^c^F~xF?%(k`q>^{GDZ*Zs#xb!YG
zYd3FYREk$^dik5Jnwz}V1${BSEmb|!RL;+Pa_>EDjwzYO$KH!XxG<U*uK4@g)%kk$
f+<=eP){E4AcTU@+uKA#&Q*A*<2SY~(^Z%Ow+&a!i

literal 0
HcmV?d00001

diff --git a/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/event-bg.jpg b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/img/event-bg.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..44d65c4dd7c35ba6b2fd67567f441c227608c12a
GIT binary patch
literal 437
zcmex=<NpH&0WUXCHwH#VMg|WcWcdG(LCm!xGmU}4*Ox(yfq{Voh=Jh$Z3brsCZIA#
zMi9va0xZlRl9h#pnT3s&jSY<1IXT$aIoa9RIJh}Dxj+EO;^F4v0dYWvK(sQkGBdMs
zv9qy*m5@aIKfoZ!!4S;A#LTF~z$D1XEXer(2!kZh3k=MR5XVADRz{#pfKuuLAcwPX
zBS|s}vNE#^88NZ2DH<A^2Tq*2@Dfm=6e9x@6Em_A3~a3I%q$#0IYmJRMrI~<Br_No
znS_}|M8$%F6DLl(`2Q9I572rhL1sY)dxkHC_hTRW2WQ`VcK;h6$G30yD%Xg#SqDdb
zTOOS%C7t_eJ}>K)TZR2E6s?-(X`c{E)14inxNC~V5sq~Wo*O7FlXzR9xVOG8jdRA9
W-5Xp^J?y%>jDgKKfq{Yl|4jf{CsJ(y

literal 0
HcmV?d00001

diff --git a/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/styles.css b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/styles.css
index b0e3510e92..bde033b103 100644
--- a/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/styles.css
+++ b/src/com/itmill/toolkit/demo/reservation/gwt/public/reservr/styles.css
@@ -1,90 +1,144 @@
 @import "googlemap/css/googlemap.css";
 
+/* Entrycalendar styles */
+.i-datefield-entrycalendar-hours {
+	height: auto;
+	xoverflow: auto;
+}
+.i-datefield-entrycalendar-hours table {
+	width: auto;
+}
+.i-datefield-entrycalendar-hours table tr {
+	height: 1em;
+}
+.i-datefield-entrycalendar-row-even {
+	cursor: pointer;
+	background-color: #fefefe;
+	height: 1em;
+}
+.i-datefield-entrycalendar-row-odd {
+	cursor: pointer;
+	background-color: #eeeeee;
+	height: 1em;
+}
+.i-datefield-entrycalendar-row-selected {
+	color: #fff;
+	background-color: #1C3E6E;
+}
+td.i-datefield-entrycalendar-time {
+	padding-right: 2px;
+	white-space: nowrap;
+	float: left;
+}
+td.i-datefield-entrycalendar-time span {
+	width: 55px;
+	text-align: right;
+	display: block;
+}
+td.i-datefield-entrycalendar-entry span {
+	display: block;
+	overflow: hidden;
+	padding: 2px;
+	color: #fff;
+	background-image: url('img/entry-topleft.jpg');
+	background-repeat: no-repeat;
+	background-position: 0px 0px;
+}
+.i-datefield-calendarpanel td.i-datefield-entrycalendar-entry {
+	background-color: #F24C1A;
+	color: #fff;
+	background-image: url('img/entry-bg.jpg');
+	background-repeat: repeat-x;
+	vertical-align: top;
+	width: auto;
+}
+
+/* Reservr styles */
 .i-datefield-entrycalendar-01 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-02 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-03 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-04 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-05 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-06 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-07 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-08 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-09 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-10 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-11 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-12 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-13 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-14 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-15 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-16 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-17 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-18 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-19 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-20 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-21 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-22 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-23 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-24 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-25 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-26 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-27 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-28 {
-	background-color: red;
+	
 }
 .i-datefield-entrycalendar-29 {
-	background-color: red;
+	
 }
 
diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/ICalendar.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/ICalendar.java
index 098456ab72..e6a8770d24 100644
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ICalendar.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ICalendar.java
@@ -108,8 +108,6 @@ public class ICalendar extends IDateField {
 			hourTable.setHTML(i, 0, "<span>" + hstr + "</span>");
 			hourTable.getCellFormatter()
 					.setStyleName(i, 0, CLASSNAME + "-time");
-			hourTable.getCellFormatter().setWidth(i, 0, "55");
-
 		}
 
 		List entries = this.entrySource.getEntries(date,
@@ -121,6 +119,7 @@ public class ICalendar extends IDateField {
 			int hours = 24;
 			if (!entry.isNotime()) {
 				Date d = entry.getStart();
+				// TODO consider month&year as well
 				start = (d.getDate() < date.getDate() ? 0 : d.getHours());
 				d = entry.getEnd();
 				hours = (d.getDate() > date.getDate() ? 24 : d.getHours())
@@ -143,7 +142,22 @@ public class ICalendar extends IDateField {
 			}
 			Element el = this.hourTable.getFlexCellFormatter().getElement(
 					start, col);
-			DOM.setElementProperty(el, "title", entry.getDescription());
+			
+			String tooltip;
+			if (DateTimeService.isSameDay(entry.getStart(), entry.getEnd())) {
+				tooltip = (start < 10 ? "0" : "") + start + ":00";
+				if (this.dts.isTwelveHourClock()) {
+					String ampm = (start < 12 ? "am" : "pm");
+					tooltip = (start <= 12 ? start : start - 12) + ":00 " + ampm;
+					
+				}
+				tooltip += " (" + hours + "h) ";
+				tooltip += entry.getTitle() + "\n ";
+			} else {
+				tooltip = entry.getStringForDate(entry.getEnd()) + "\n ";
+			}
+			tooltip += "\"" + entry.getDescription() + "\"";
+			DOM.setElementProperty(el, "title", tooltip);
 
 			currentCol++;
 		}
diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/datefield.css b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/datefield.css
index 81439c7293..792a996a32 100644
--- a/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/datefield.css
+++ b/src/com/itmill/toolkit/terminal/gwt/public/default/datefield/datefield.css
@@ -75,42 +75,3 @@
 	background: #fff;
 }
 
-
-
-.i-datefield-entrycalendar-hours {
-	height: 300px;
-	overflow: auto;
-}
-.i-datefield-entrycalendar-hours table {
-	width: 92%;
-}
-
-.i-datefield-entrycalendar-row-even {
-	cursor: pointer;
-	background-color: #fefefe;
-}
-.i-datefield-entrycalendar-row-odd {
-	cursor: pointer;
-	background-color: #eeeeee;
-}
-.i-datefield-entrycalendar-row-selected {
-	color: #fff;
-	background-color: #1C3E6E;
-}
-td.i-datefield-entrycalendar-time {
-	padding-right: 2px;
-	text-align: right;
-	white-space: nowrap;
-}
-.i-datefield-entrycalendar-row-selected td span {
-	color: #fff;
-}
-.i-datefield-entrycalendar-entry {
-	background-color: #0074D9;
-	color: #fff;
-}
-.i-datefield-entrycalendar-entry span {
-	display: block;
-	overflow: hidden;
-	padding: 2px;
-}
-- 
2.39.5