diff --git a/js/ui/Makefile.am b/js/ui/Makefile.am
index 4f6490cac..d4eccc3cd 100644
--- a/js/ui/Makefile.am
+++ b/js/ui/Makefile.am
@@ -5,6 +5,7 @@ dist_jsui_DATA =		\
 	appDisplay.js		\
 	appIcon.js		\
 	button.js		\
+	calendar.js		\
 	chrome.js		\
 	dash.js			\
 	dnd.js			\
diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index de7f4023a..d8b380ae7 100644
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -79,6 +79,7 @@ Calendar.prototype = {
         // them in the right cell in the table. It doesn't matter if we add them in order
         let iter = new Date(this.date);
         iter.setSeconds(0); // Leap second protection. Hah!
+        iter.setHours(12);
         for (let i = 0; i < 7; i++) {
             this.actor.add(new St.Label({ text: iter.toLocaleFormat("%a") }),
                            { row: 1,
@@ -87,6 +88,9 @@ Calendar.prototype = {
             iter.setTime(iter.getTime() + MSECS_IN_DAY);
         }
 
+        // All the children after this are days, and get removed when we update the calendar
+        this._firstDayIndex = this.actor.get_children().length;
+
         this._update();
     },
 
@@ -132,17 +136,18 @@ Calendar.prototype = {
     },
 
     _update: function() {
-        this._dateLabel.text = this.date.toLocaleFormat("%B %Y");
+        this._dateLabel.text = this.date.toLocaleFormat(this._headerFormat);
 
         // Remove everything but the topBox and the weekday labels
         let children = this.actor.get_children();
-        for (let i = 8; i < children.length; i++)
+        for (let i = this._firstDayIndex; i < children.length; i++)
             children[i].destroy();
 
         // Start at the beginning of the week before the start of the month
         let iter = new Date(this.date);
         iter.setDate(1);
         iter.setSeconds(0);
+        iter.setHours(12);
         iter.setTime(iter.getTime() - (iter.getDay() - this._weekStart) * MSECS_IN_DAY);
 
         let now = new Date();
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 92a1bf804..58803b30a 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -518,6 +518,10 @@ CalendarPopup.prototype = {
         this.calendar = new Calendar.Calendar();
         this.actor.add(this.calendar.actor);
 
+        // Directly adding the actor to Main.chrome.actor is a hack to
+        // work around the fact that there is no way to add an actor that
+        // affects the input region but not the shape.
+        // See: https://bugzilla.gnome.org/show_bug.cgi?id=597044
         Main.chrome.actor.add_actor(this.actor);
         Main.chrome.addInputRegionActor(this.actor);
         this.actor.y = (panelActor.y + panelActor.height - this.actor.height);
diff --git a/tests/Makefile.am b/tests/Makefile.am
index 43bfbb522..49a15bba3 100644
--- a/tests/Makefile.am
+++ b/tests/Makefile.am
@@ -3,7 +3,8 @@ EXTRA_DIST = run-test.sh.in
 
 TEST_JS =					\
 	testcommon/ui.js			\
-	interactive/box-layout.js
+	interactive/box-layout.js		\
+	interactive/calendar.js
 EXTRA_DIST += $(TEST_JS)
 
 TEST_MISC =					\
diff --git a/tests/interactive/calendar.js b/tests/interactive/calendar.js
index 9336c95c9..f8f50b97d 100644
--- a/tests/interactive/calendar.js
+++ b/tests/interactive/calendar.js
@@ -4,11 +4,9 @@ const Clutter = imports.gi.Clutter;
 const Lang = imports.lang;
 const St = imports.gi.St;
 
-const Calendar =imports.ui.calendar;
+const Calendar = imports.ui.calendar;
 const UI = imports.testcommon.ui;
 
-const Gettext_gtk20 = imports.gettext.domain('gtk20');
-
 UI.init();
 let stage = Clutter.Stage.get_default();
 stage.width = stage.height = 400;