Angular material datepicker always open - angularjs

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

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 2

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 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.