diff --git a/src/lib/datepicker/calendar-body.html b/src/lib/datepicker/calendar-body.html
index a668b1060fef..01f2684b77ec 100644
--- a/src/lib/datepicker/calendar-body.html
+++ b/src/lib/datepicker/calendar-body.html
@@ -3,18 +3,28 @@
aria-hidden because we don't want it to be read out as one of the weeks in the month.
-->
+ [attr.colspan]="_firstRowOffset"
+ [style.paddingTop.%]="50 * cellAspectRatio / numCols"
+ [style.paddingBottom.%]="50 * cellAspectRatio / numCols">
{{_firstRowOffset >= labelMinRequiredCells ? label : ''}}
|
+ (click)="_cellClicked(item)"
+ [style.width.%]="100 / numCols"
+ [style.paddingTop.%]="50 * cellAspectRatio / numCols"
+ [style.paddingBottom.%]="50 * cellAspectRatio / numCols">
diff --git a/src/lib/datepicker/calendar-body.scss b/src/lib/datepicker/calendar-body.scss
index 5ea5b9d68952..93751c52d3ad 100644
--- a/src/lib/datepicker/calendar-body.scss
+++ b/src/lib/datepicker/calendar-body.scss
@@ -1,12 +1,14 @@
$mat-calendar-body-label-padding-start: 5% !default;
-$mat-calendar-body-label-translation: -6px !default;
+// We don't want the label to jump around when we switch between month and year views, so we use
+// the same amount of padding regardless of the number of columns. We align the header label with
+// the one third mark of the first cell, this was chosen somewhat arbitrarily to make it look
+// roughly like the mock. Half way is too far since the cell text is center aligned.
+$mat-calendar-body-label-side-padding: 33% / 7 !default;
$mat-calendar-body-cell-min-size: 32px !default;
-$mat-calendar-body-cell-size: 100% / 7 !default;
$mat-calendar-body-cell-content-margin: 5% !default;
$mat-calendar-body-cell-content-border-width: 1px !default;
$mat-calendar-body-min-size: 7 * $mat-calendar-body-cell-min-size !default;
-$mat-calendar-body-cell-padding: $mat-calendar-body-cell-size / 2 !default;
$mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-margin * 2 !default;
@@ -15,20 +17,17 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
}
.mat-calendar-body-label {
- padding: $mat-calendar-body-cell-padding 0
- $mat-calendar-body-cell-padding $mat-calendar-body-cell-padding;
height: 0;
line-height: 0;
- transform: translateX($mat-calendar-body-label-translation);
text-align: left;
+ padding-left: $mat-calendar-body-label-side-padding;
+ padding-right: $mat-calendar-body-label-side-padding;
}
.mat-calendar-body-cell {
position: relative;
- width: $mat-calendar-body-cell-size;
height: 0;
line-height: 0;
- padding: $mat-calendar-body-cell-padding 0;
text-align: center;
outline: none;
cursor: pointer;
@@ -53,13 +52,13 @@ $mat-calendar-body-cell-content-size: 100% - $mat-calendar-body-cell-content-mar
border-width: $mat-calendar-body-cell-content-border-width;
border-style: solid;
- border-radius: 50%;
+
+ // Choosing a value clearly larger than the height ensures we get the correct capsule shape.
+ border-radius: 999px;
}
[dir='rtl'] {
.mat-calendar-body-label {
- padding: 0 $mat-calendar-body-cell-padding 0 0;
- transform: translateX(-$mat-calendar-body-label-translation);
text-align: right;
}
}
diff --git a/src/lib/datepicker/calendar-body.ts b/src/lib/datepicker/calendar-body.ts
index b73d92379a1f..588add90743b 100644
--- a/src/lib/datepicker/calendar-body.ts
+++ b/src/lib/datepicker/calendar-body.ts
@@ -68,6 +68,12 @@ export class MdCalendarBody {
/** The cell number of the active cell in the table. */
@Input() activeCell = 0;
+ /**
+ * The aspect ratio (width / height) to use for the cells in the table. This aspect ratio will be
+ * maintained even as the table resizes.
+ */
+ @Input() cellAspectRatio = 1;
+
/** Emits when a new value is selected. */
@Output() selectedValueChange = new EventEmitter ();
diff --git a/src/lib/datepicker/calendar.scss b/src/lib/datepicker/calendar.scss
index 0d120188f1f4..4595f751e561 100644
--- a/src/lib/datepicker/calendar.scss
+++ b/src/lib/datepicker/calendar.scss
@@ -1,11 +1,11 @@
$mat-calendar-padding: 8px !default;
$mat-calendar-header-divider-width: 1px !default;
$mat-calendar-controls-vertical-padding: 5%;
-// We want to indent to the middle of the first tile. There are 7 tiles, so 100% / 7 / 2.
-// Then we back up a little bit since the text in the cells is center-aligned.
-$mat-calendar-controls-start-padding: calc(100% / 14 - 22px);
-// Same as above, but on other side for arrows.
-$mat-calendar-controls-end-padding: calc(100% / 14 - 22px);
+// We use the same padding as the month / year label, but subtract 16px since there is padding
+// between the edge of the button and the text. This ensures that the button text lines up with
+// the month / year label text.
+$mat-calendar-controls-side-margin: calc(33% / 7 - 16px);
+
$mat-calendar-arrow-size: 5px !default;
$mat-calendar-arrow-disabled-opacity: 0.5 !default;
@@ -32,8 +32,7 @@ $mat-calendar-next-icon-transform: translateX(-2px) rotate(45deg);
.mat-calendar-controls {
display: flex;
- padding: $mat-calendar-controls-vertical-padding $mat-calendar-controls-end-padding
- $mat-calendar-controls-vertical-padding $mat-calendar-controls-start-padding;
+ margin: $mat-calendar-controls-vertical-padding $mat-calendar-controls-side-margin;
}
.mat-calendar-spacer {
diff --git a/src/lib/datepicker/index.ts b/src/lib/datepicker/index.ts
index 3c3045621bb2..5c453e874734 100644
--- a/src/lib/datepicker/index.ts
+++ b/src/lib/datepicker/index.ts
@@ -9,7 +9,7 @@
import {NgModule} from '@angular/core';
import {MdMonthView} from './month-view';
import {CommonModule} from '@angular/common';
-import {StyleModule, OverlayModule, A11yModule} from '../core';
+import {A11yModule, OverlayModule, StyleModule} from '../core';
import {MdCalendarBody} from './calendar-body';
import {MdYearView} from './year-view';
import {MdDatepicker, MdDatepickerContent} from './datepicker';
diff --git a/src/lib/datepicker/year-view.html b/src/lib/datepicker/year-view.html
index 537db7e82634..4fd34e0c3b89 100644
--- a/src/lib/datepicker/year-view.html
+++ b/src/lib/datepicker/year-view.html
@@ -1,6 +1,6 @@
diff --git a/src/lib/datepicker/year-view.ts b/src/lib/datepicker/year-view.ts
index 797a77b73f8a..a2fe29529909 100644
--- a/src/lib/datepicker/year-view.ts
+++ b/src/lib/datepicker/year-view.ts
@@ -108,7 +108,7 @@ export class MdYearView implements AfterContentInit {
let monthNames = this._dateAdapter.getMonthNames('short');
// First row of months only contains 5 elements so we can fit the year label on the same row.
- this._months = [[0, 1, 2, 3, 4], [5, 6, 7, 8, 9, 10, 11]].map(row => row.map(
+ this._months = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11]].map(row => row.map(
month => this._createCellForMonth(month, monthNames[month])));
}
|