diff --git a/packages/date-picker/src/vaadin-date-picker-helper.js b/packages/date-picker/src/vaadin-date-picker-helper.js
index b6b8d39c2ac..22ed6782ed4 100644
--- a/packages/date-picker/src/vaadin-date-picker-helper.js
+++ b/packages/date-picker/src/vaadin-date-picker-helper.js
@@ -36,6 +36,18 @@ export function getISOWeekNumber(date) {
   return Math.floor(daysSinceFirstOfJanuary / 7 + 1);
 }
 
+/**
+ * Creates a new object with the same date, but sets the hours, minutes, seconds and milliseconds to 0.
+ *
+ * @param {Date} date
+ * @return {Date} The same date time elements set to 0.
+ */
+export function normalizeDate(date) {
+  const normalizedDate = new Date(date);
+  normalizedDate.setHours(0, 0, 0, 0);
+  return normalizedDate;
+}
+
 /**
  * Check if two dates are equal.
  *
@@ -45,11 +57,7 @@ export function getISOWeekNumber(date) {
  */
 export function dateEquals(date1, date2) {
   return (
-    date1 instanceof Date &&
-    date2 instanceof Date &&
-    date1.getFullYear() === date2.getFullYear() &&
-    date1.getMonth() === date2.getMonth() &&
-    date1.getDate() === date2.getDate()
+    date1 instanceof Date && date2 instanceof Date && normalizeDate(date1).getTime() === normalizeDate(date2).getTime()
   );
 }
 
diff --git a/packages/date-picker/src/vaadin-lit-month-calendar.js b/packages/date-picker/src/vaadin-lit-month-calendar.js
index 2a72fbeb7e0..64d78e9f8e9 100644
--- a/packages/date-picker/src/vaadin-lit-month-calendar.js
+++ b/packages/date-picker/src/vaadin-lit-month-calendar.js
@@ -7,7 +7,7 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { dateAllowed, dateEquals } from './vaadin-date-picker-helper.js';
+import { dateAllowed, dateEquals, normalizeDate } from './vaadin-date-picker-helper.js';
 import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
 import { monthCalendarStyles } from './vaadin-month-calendar-styles.js';
 
@@ -62,6 +62,8 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
                   const isFocused = dateEquals(date, this.focusedDate);
                   const isSelected = dateEquals(date, this.selectedDate);
                   const isDisabled = !dateAllowed(date, this.minDate, this.maxDate, this.isDateDisabled);
+                  const greaterThanToday = date > normalizeDate(new Date());
+                  const lessThanToday = date < normalizeDate(new Date());
 
                   const parts = [
                     'date',
@@ -69,6 +71,8 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
                     isFocused && 'focused',
                     isSelected && 'selected',
                     this._isToday(date) && 'today',
+                    greaterThanToday && 'future',
+                    lessThanToday && 'past',
                   ].filter(Boolean);
 
                   return html`
diff --git a/packages/date-picker/src/vaadin-month-calendar.js b/packages/date-picker/src/vaadin-month-calendar.js
index 2715d720812..f733d66ace8 100644
--- a/packages/date-picker/src/vaadin-month-calendar.js
+++ b/packages/date-picker/src/vaadin-month-calendar.js
@@ -7,7 +7,7 @@ import '@polymer/polymer/lib/elements/dom-repeat.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { dateAllowed, dateEquals } from './vaadin-date-picker-helper.js';
+import { dateAllowed, dateEquals, normalizeDate } from './vaadin-date-picker-helper.js';
 import { MonthCalendarMixin } from './vaadin-month-calendar-mixin.js';
 import { monthCalendarStyles } from './vaadin-month-calendar-styles.js';
 
@@ -110,6 +110,8 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
   // eslint-disable-next-line @typescript-eslint/max-params
   __getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled) {
     const result = ['date'];
+    const greaterThanToday = date > normalizeDate(new Date());
+    const lessThanToday = date < normalizeDate(new Date());
 
     if (this.__isDayDisabled(date, minDate, maxDate, isDateDisabled)) {
       result.push('disabled');
@@ -127,6 +129,14 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
       result.push('today');
     }
 
+    if (lessThanToday) {
+      result.push('past');
+    }
+
+    if (greaterThanToday) {
+      result.push('future');
+    }
+
     return result.join(' ');
   }
 
diff --git a/packages/date-picker/test/dom/__snapshots__/month-calendar.test.snap.js b/packages/date-picker/test/dom/__snapshots__/month-calendar.test.snap.js
index 2b2707d0581..f4ccd39cae0 100644
--- a/packages/date-picker/test/dom/__snapshots__/month-calendar.test.snap.js
+++ b/packages/date-picker/test/dom/__snapshots__/month-calendar.test.snap.js
@@ -138,14 +138,14 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label=""
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
       </td>
       <td
         aria-label="1 February 2016, Monday"
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
@@ -153,7 +153,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="2 February 2016, Tuesday"
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
@@ -161,7 +161,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="3 February 2016, Wednesday"
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
@@ -169,15 +169,15 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="4 February 2016, Thursday"
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
         4
       </td>
       <td
-        aria-label="5 February 2016, Friday"
-        part="date"
+        aria-label="5 February 2016, Friday, Today"
+        part="date today"
         role="gridcell"
         tabindex="-1"
       >
@@ -185,7 +185,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="6 February 2016, Saturday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -202,7 +202,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="7 February 2016, Sunday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -210,7 +210,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="8 February 2016, Monday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -218,7 +218,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="9 February 2016, Tuesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -226,7 +226,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="10 February 2016, Wednesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -234,7 +234,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="11 February 2016, Thursday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -242,7 +242,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="12 February 2016, Friday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -250,7 +250,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="13 February 2016, Saturday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -267,7 +267,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="14 February 2016, Sunday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -275,7 +275,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="15 February 2016, Monday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -283,7 +283,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="16 February 2016, Tuesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -291,7 +291,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="17 February 2016, Wednesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -299,7 +299,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="18 February 2016, Thursday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -307,7 +307,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="19 February 2016, Friday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -315,7 +315,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="20 February 2016, Saturday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -332,7 +332,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="21 February 2016, Sunday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -340,7 +340,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="22 February 2016, Monday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -348,7 +348,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="23 February 2016, Tuesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -356,7 +356,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="24 February 2016, Wednesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -364,7 +364,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="25 February 2016, Thursday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -372,7 +372,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="26 February 2016, Friday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -380,7 +380,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="27 February 2016, Saturday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -397,7 +397,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="28 February 2016, Sunday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -405,7 +405,7 @@ snapshots["vaadin-month-calendar shadow default"] =
       </td>
       <td
         aria-label="29 February 2016, Monday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -548,14 +548,14 @@ snapshots["vaadin-month-calendar shadow max date"] =
       </td>
       <td
         aria-label=""
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
       </td>
       <td
         aria-label="1 February 2016, Monday"
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
@@ -563,7 +563,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
       </td>
       <td
         aria-label="2 February 2016, Tuesday"
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
@@ -571,7 +571,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
       </td>
       <td
         aria-label="3 February 2016, Wednesday"
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
@@ -579,15 +579,15 @@ snapshots["vaadin-month-calendar shadow max date"] =
       </td>
       <td
         aria-label="4 February 2016, Thursday"
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
         4
       </td>
       <td
-        aria-label="5 February 2016, Friday"
-        part="date"
+        aria-label="5 February 2016, Friday, Today"
+        part="date today"
         role="gridcell"
         tabindex="-1"
       >
@@ -595,7 +595,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
       </td>
       <td
         aria-label="6 February 2016, Saturday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -612,7 +612,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
       </td>
       <td
         aria-label="7 February 2016, Sunday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -620,7 +620,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
       </td>
       <td
         aria-label="8 February 2016, Monday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -628,7 +628,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
       </td>
       <td
         aria-label="9 February 2016, Tuesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -636,7 +636,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
       </td>
       <td
         aria-label="10 February 2016, Wednesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -646,7 +646,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="11 February 2016, Thursday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -656,7 +656,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="12 February 2016, Friday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -666,7 +666,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="13 February 2016, Saturday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -685,7 +685,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="14 February 2016, Sunday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -695,7 +695,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="15 February 2016, Monday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -705,7 +705,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="16 February 2016, Tuesday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -715,7 +715,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="17 February 2016, Wednesday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -725,7 +725,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="18 February 2016, Thursday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -735,7 +735,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="19 February 2016, Friday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -745,7 +745,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="20 February 2016, Saturday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -764,7 +764,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="21 February 2016, Sunday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -774,7 +774,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="22 February 2016, Monday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -784,7 +784,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="23 February 2016, Tuesday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -794,7 +794,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="24 February 2016, Wednesday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -804,7 +804,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="25 February 2016, Thursday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -814,7 +814,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="26 February 2016, Friday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -824,7 +824,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="27 February 2016, Saturday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -843,7 +843,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="28 February 2016, Sunday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -853,7 +853,7 @@ snapshots["vaadin-month-calendar shadow max date"] =
         aria-disabled="true"
         aria-label="29 February 2016, Monday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -994,7 +994,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="1 February 2016, Monday"
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
@@ -1002,7 +1002,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="2 February 2016, Tuesday"
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
@@ -1010,7 +1010,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="3 February 2016, Wednesday"
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
@@ -1018,15 +1018,15 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="4 February 2016, Thursday"
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
         4
       </td>
       <td
-        aria-label="5 February 2016, Friday"
-        part="date"
+        aria-label="5 February 2016, Friday, Today"
+        part="date today"
         role="gridcell"
         tabindex="-1"
       >
@@ -1034,7 +1034,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="6 February 2016, Saturday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1042,7 +1042,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="7 February 2016, Sunday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1058,7 +1058,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="8 February 2016, Monday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1066,7 +1066,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="9 February 2016, Tuesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1074,7 +1074,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="10 February 2016, Wednesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1082,7 +1082,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="11 February 2016, Thursday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1090,7 +1090,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="12 February 2016, Friday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1098,7 +1098,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="13 February 2016, Saturday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1106,7 +1106,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="14 February 2016, Sunday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1122,7 +1122,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="15 February 2016, Monday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1130,7 +1130,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="16 February 2016, Tuesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1138,7 +1138,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="17 February 2016, Wednesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1146,7 +1146,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="18 February 2016, Thursday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1154,7 +1154,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="19 February 2016, Friday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1162,7 +1162,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="20 February 2016, Saturday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1170,7 +1170,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="21 February 2016, Sunday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1186,7 +1186,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="22 February 2016, Monday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1194,7 +1194,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="23 February 2016, Tuesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1202,7 +1202,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="24 February 2016, Wednesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1210,7 +1210,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="25 February 2016, Thursday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1218,7 +1218,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="26 February 2016, Friday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1226,7 +1226,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="27 February 2016, Saturday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1234,7 +1234,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="28 February 2016, Sunday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1250,7 +1250,7 @@ snapshots["vaadin-month-calendar shadow week numbers"] =
       </td>
       <td
         aria-label="29 February 2016, Monday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1393,7 +1393,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-label=""
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
@@ -1402,7 +1402,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
         aria-disabled="true"
         aria-label="1 February 2016, Monday"
         disabled=""
-        part="date disabled"
+        part="date disabled past"
         role="gridcell"
         tabindex="-1"
       >
@@ -1410,7 +1410,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-label="2 February 2016, Tuesday"
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
@@ -1420,7 +1420,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
         aria-disabled="true"
         aria-label="3 February 2016, Wednesday"
         disabled=""
-        part="date disabled"
+        part="date disabled past"
         role="gridcell"
         tabindex="-1"
       >
@@ -1428,7 +1428,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-label="4 February 2016, Thursday"
-        part="date"
+        part="date past"
         role="gridcell"
         tabindex="-1"
       >
@@ -1436,9 +1436,9 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-disabled="true"
-        aria-label="5 February 2016, Friday"
+        aria-label="5 February 2016, Friday, Today"
         disabled=""
-        part="date disabled"
+        part="date disabled today"
         role="gridcell"
         tabindex="-1"
       >
@@ -1446,7 +1446,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-label="6 February 2016, Saturday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1465,7 +1465,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
         aria-disabled="true"
         aria-label="7 February 2016, Sunday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1473,7 +1473,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-label="8 February 2016, Monday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1483,7 +1483,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
         aria-disabled="true"
         aria-label="9 February 2016, Tuesday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1491,7 +1491,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-label="10 February 2016, Wednesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1501,7 +1501,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
         aria-disabled="true"
         aria-label="11 February 2016, Thursday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1509,7 +1509,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-label="12 February 2016, Friday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1519,7 +1519,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
         aria-disabled="true"
         aria-label="13 February 2016, Saturday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1536,7 +1536,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-label="14 February 2016, Sunday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1546,7 +1546,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
         aria-disabled="true"
         aria-label="15 February 2016, Monday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1554,7 +1554,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-label="16 February 2016, Tuesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1564,7 +1564,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
         aria-disabled="true"
         aria-label="17 February 2016, Wednesday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1572,7 +1572,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-label="18 February 2016, Thursday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1582,7 +1582,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
         aria-disabled="true"
         aria-label="19 February 2016, Friday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1590,7 +1590,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-label="20 February 2016, Saturday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1609,7 +1609,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
         aria-disabled="true"
         aria-label="21 February 2016, Sunday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1617,7 +1617,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-label="22 February 2016, Monday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1627,7 +1627,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
         aria-disabled="true"
         aria-label="23 February 2016, Tuesday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1635,7 +1635,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-label="24 February 2016, Wednesday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1645,7 +1645,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
         aria-disabled="true"
         aria-label="25 February 2016, Thursday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1653,7 +1653,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-label="26 February 2016, Friday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1663,7 +1663,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
         aria-disabled="true"
         aria-label="27 February 2016, Saturday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1680,7 +1680,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
       </td>
       <td
         aria-label="28 February 2016, Sunday"
-        part="date"
+        part="date future"
         role="gridcell"
         tabindex="-1"
       >
@@ -1690,7 +1690,7 @@ snapshots["vaadin-month-calendar shadow disabled dates"] =
         aria-disabled="true"
         aria-label="29 February 2016, Monday"
         disabled=""
-        part="date disabled"
+        part="date disabled future"
         role="gridcell"
         tabindex="-1"
       >
diff --git a/packages/date-picker/test/dom/month-calendar.test.js b/packages/date-picker/test/dom/month-calendar.test.js
index e003fbae4e7..9fb7c420fbe 100644
--- a/packages/date-picker/test/dom/month-calendar.test.js
+++ b/packages/date-picker/test/dom/month-calendar.test.js
@@ -1,20 +1,30 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import sinon from 'sinon';
 import '../../src/vaadin-month-calendar.js';
 import { resetUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
 import { getDefaultI18n } from '../helpers.js';
 
 describe('vaadin-month-calendar', () => {
-  let monthCalendar;
+  let monthCalendar, clock;
 
   beforeEach(async () => {
     resetUniqueId();
+    clock = sinon.useFakeTimers({
+      now: new Date(2016, 1, 5),
+      toFake: ['Date'],
+    });
+
     monthCalendar = fixtureSync('<vaadin-month-calendar></vaadin-month-calendar>');
     monthCalendar.i18n = getDefaultI18n();
     monthCalendar.month = new Date(2016, 1, 1);
     await nextFrame();
   });
 
+  afterEach(() => {
+    clock.restore();
+  });
+
   describe('host', () => {
     it('default', async () => {
       await expect(monthCalendar).dom.to.equalSnapshot();