Angular material datepicker always open

Question

I would like to use the angular material datepicker as a widget to control an instance of fullCalendar. Is there a way to force it to stay alway open and in a particular div? I know how to do it easily with bootstrap or jqueryUI but I would not want to add an extra dependency to my project.

Answer 1

Well, you can get that to work with some CSS, but the internal scroll position of the month scroller starts always at the top (1932). md-calendar is the internal directive that renders the datepicker, so just use that.

<md-calendar class="fixed-calendar" ng-model="myDate"></md-calendar>

And set the CSS to fixed size, which is usually calculated by the datepicker.

.fixed-calendar {
  width: 340px;
  height: 340px;
  display: block;
}

.fixed-calendar .md-calendar-scroll-mask {
  width: 340px !important;
}

.fixed-calendar .md-virtual-repeat-scroller {
  width: 340px !important;
  height: 308px;
}

But you can probably write your own directive that requires the mdCalendar controller and set the scroll position there.

http://codepen.io/kuhnroyal/pen/EPQpGE

Answer 2

it's working on angular version 6.x

<mat-calendar [selected]="selectedDate" 
(selectedChange)="selectedChange($event)" 
(yearSelected)="yearSelected()" 
(monthSelected)="monthSelected()" 
(_userSelection)="userSelection()" 
(cdkAutofill)="cdkAutofill()">
</mat-calendar>

Emits when the currently selected date changes

readonly selectedChange: EventEmitter<D>;

Emits the year chosen in multiyear view. This doesn't simply a change on the selected date

readonly yearSelected: EventEmitter<D>;

Emits the month chosen in year view. This doesn't simply a change on the selected date

readonly monthSelected: EventEmitter<D>;

Emits when any date is selected

readonly _userSelection: EventEmitter<void>;

but still missing some needed events like an event for the next and previous buttons

img

GitHub issue

calendar.ts

Answer 3

Following up on @kuhnroyal his answer. If you want to go below 340px of width you can do the following:

.time-date {
  font-size: 12px !important;
}
.fixed-calendar {
  width: 280px;
  height: 285px;
  display: block;
}

.fixed-calendar .md-calendar-scroll-mask {
  width: 280px !important;
  height: 240px !important;
}

.fixed-calendar .md-virtual-repeat-scroller {
  width: 280px !important;
  height: 246px;
}

.fixed-calendar .md-calendar-date-selection-indicator {
  width: 35px;
  height: 35px;
  line-height: 35px;
}

This for instance, sets the width to 280px. Just be sure that you set the selection indicator as well.

I wanted the height to be 240px as well, therefore I set the height of the scroll mask to 240px.