diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index d8ff013c8..f16e3378c 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -674,6 +674,11 @@ StTooltip StLabel {
 
 /* Calendar popup */
 
+#calendarArea {
+    /* this is the width of the entire popup */
+    width: 600px;
+}
+
 .calendar-vertical-separator {
     -stipple-width: 1px;
     -stipple-color: #505050;
@@ -810,7 +815,6 @@ StTooltip StLabel {
 
 .events-header-vbox {
     spacing: 10px;
-    width: 300px;
 }
 
 .events-header {
@@ -854,7 +858,6 @@ StTooltip StLabel {
 }
 
 .events-event-box {
-    width: 200px;
 }
 
 .open-calendar {
diff --git a/js/ui/dateMenu.js b/js/ui/dateMenu.js
index fd65c1f57..b790e11d6 100644
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -65,7 +65,7 @@ DateMenuButton.prototype = {
         this._clock = new St.Label();
         this.actor.set_child(this._clock);
 
-        hbox = new St.BoxLayout();
+        hbox = new St.BoxLayout({name: 'calendarArea'});
         this.menu.addActor(hbox);
 
         // Fill up the first column