diff --git a/calendar/js/et2_widget_daycol.js b/calendar/js/et2_widget_daycol.js
index 53e99ae590..20bffd6969 100644
--- a/calendar/js/et2_widget_daycol.js
+++ b/calendar/js/et2_widget_daycol.js
@@ -358,6 +358,12 @@ var et2_calendar_daycol = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResizea
 		}
 	},
 
+	set_class: function(classnames) {
+		this.header.removeClass(this.class);
+		this._super.apply(this, arguments);
+		this.header.addClass(classnames);
+	},
+
 	/**
 	 * Callback used when the daywise data changes
 	 *
diff --git a/calendar/js/et2_widget_timegrid.js b/calendar/js/et2_widget_timegrid.js
index b2c844b40e..1247f9de57 100644
--- a/calendar/js/et2_widget_timegrid.js
+++ b/calendar/js/et2_widget_timegrid.js
@@ -885,7 +885,17 @@ var et2_calendar_timegrid = et2_calendar_view.extend([et2_IDetachedDOM, et2_IRes
 		for(var i = 0; i < this.day_widgets.length; i++)
 		{
 			day = this.day_widgets[i];
-			
+
+			// Classes
+			if(this.day_list[i] && parseInt(this.day_list[i].substr(4,2)) !== new Date(app.calendar.state.date).getUTCMonth()+1)
+			{
+				day.set_class('calendar_differentMonth');
+			}
+			else
+			{
+				day.set_class('');
+			}
+
 			// Position
 			day.set_left((day_width * i) + 'px');
 			if(daily_owner)
@@ -968,7 +978,7 @@ var et2_calendar_timegrid = et2_calendar_view.extend([et2_IDetachedDOM, et2_IRes
 		this.date_helper.set_value(end_date);
 		var end = this.date_helper.date.getTime();
 		var i = 1;
-		this.date_helper.set_value(start_date);
+		this.date_helper.set_value(new Date(start_date));
 
 		do
 		{
diff --git a/calendar/js/et2_widget_view.js b/calendar/js/et2_widget_view.js
index 2dee689aae..4100ed3e79 100644
--- a/calendar/js/et2_widget_view.js
+++ b/calendar/js/et2_widget_view.js
@@ -150,7 +150,7 @@ var et2_calendar_view = et2_valueWidget.extend(
 		}
 
 		var old_date = this.options.start_date;
-		this.options.start_date = this.date_helper.getValue();
+		this.options.start_date = new Date(this.date_helper.getValue());
 
 		if(old_date !== this.options.start_date && this.isAttached())
 		{
@@ -189,7 +189,7 @@ var et2_calendar_view = et2_valueWidget.extend(
 		}
 
 		var old_date = this.options.end_date;
-		this.options.end_date = this.date_helper.getValue();
+		this.options.end_date = new Date(this.date_helper.getValue());
 
 		if(old_date !== this.options.end_date && this.isAttached())
 		{
diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css
index bae94827b9..914a7b330e 100644
--- a/calendar/templates/default/app.css
+++ b/calendar/templates/default/app.css
@@ -391,6 +391,14 @@ Hide subsequent headers in week view with non-consolidated owners
 	background-color: white;
 }
 
+/* Days in a different month, but shown to fill out the week */
+.calendar_calDayColHeader.calendar_differentMonth > * {
+    color: rgb(106, 106, 106);
+}
+.calendar_calDayCol.calendar_differentMonth {
+	background-color: rgba(200,200,200,0.1);
+}
+
 /* Daily sortable */
 .calendar_calDayColHeader .ui-sortable-handle {
 	cursor: ew-resize;
diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css
index b61dbf2574..0e2ff14104 100755
--- a/calendar/templates/pixelegg/app.css
+++ b/calendar/templates/pixelegg/app.css
@@ -11,7 +11,7 @@
  * @package calendar
  * @version $Id$
  */
-/* $Id: app.css 54926 2016-02-04 21:05:31Z nathangray $ */
+/* $Id: app.css 54927 2016-02-04 22:35:34Z nathangray $ */
 /*Media print classes*/
 @media print {
   .th td,
@@ -402,6 +402,13 @@ Hide subsequent headers in week view with non-consolidated owners
   height: 20px;
   background-color: white;
 }
+/* Days in a different month, but shown to fill out the week */
+.calendar_calDayColHeader.calendar_differentMonth > * {
+  color: #6a6a6a;
+}
+.calendar_calDayCol.calendar_differentMonth {
+  background-color: rgba(200, 200, 200, 0.1);
+}
 /* Daily sortable */
 .calendar_calDayColHeader .ui-sortable-handle {
   cursor: ew-resize;