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

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