Angular material datepicker always open

Issue

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.

Solution

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

Answered By - kuhnroyal