diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index ae5960962..dc66b9573 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -116,6 +116,9 @@ StScrollBar StButton#vhandle:hover
     background: rgba(0,0,0,0.9);
     border: 1px solid rgba(128,128,128,0.45);
     color: white;
+}
+
+#calendarPopup .calendar {
     padding: 10px;
 }
 
diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index 633af0471..de7f4023a 100644
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -1,5 +1,6 @@
 /* -*- mode: js2; js2-basic-offset: 4; indent-tabs-mode: nil -*- */
 
+const Clutter = imports.gi.Clutter;
 const Lang = imports.lang;
 const St = imports.gi.St;
 
@@ -51,7 +52,11 @@ Calendar.prototype = {
         this.date = new Date();
 
         this.actor = new St.Table({ homogeneous: false,
-                                    style_class: "calendar" });
+                                    style_class: "calendar",
+                                    reactive: true });
+
+        this.actor.connect('scroll-event',
+                           Lang.bind(this, this._onScroll));
 
         // Top line of the calendar '<| September 2009 |>'
         this._topBox = new St.BoxLayout();
@@ -93,6 +98,19 @@ Calendar.prototype = {
         }
     },
 
+    _onScroll : function(actor, event) {
+        switch (event.get_scroll_direction()) {
+        case Clutter.ScrollDirection.UP:
+        case Clutter.ScrollDirection.LEFT:
+            this._prevMonth();
+            break;
+        case Clutter.ScrollDirection.DOWN:
+        case Clutter.ScrollDirection.RIGHT:
+            this._nextMonth();
+            break;
+        }
+    },
+
     _prevMonth: function() {
         if (this.date.getMonth() == 0) {
             this.date.setMonth(11);