diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 5a4b5644f..015a892d9 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1212,6 +1212,10 @@ StScrollBar StButton#vhandle:active {
     padding-top: 8px;
 }
 
+.calendar-month-label:focus {
+    background-color: #999999;
+}
+
 .calendar-change-month-back {
     width: 18px;
     height: 12px;
diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index cb5a2940e..75dcbb609 100644
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -449,7 +449,8 @@ const Calendar = new Lang.Class({
         this._topBox.add(this._backButton);
         this._backButton.connect('clicked', Lang.bind(this, this._onPrevMonthButtonClicked));
 
-        this._monthLabel = new St.Label({style_class: 'calendar-month-label'});
+        this._monthLabel = new St.Label({style_class: 'calendar-month-label',
+                                         can_focus: true });
         this._topBox.add(this._monthLabel, { expand: true, x_fill: false, x_align: St.Align.MIDDLE });
 
         this._forwardButton = new St.Button({ style_class: 'calendar-change-month-forward',