Material: Calendar: demo need to show how just the calendar can be used

[ThomasBurleson]

We should create a demo to show how the Dialog, Calendar, and Card can be used to create something like:

[jelbourn]

The main thing holding back <md-calendar> from being a standalone component is making sure the a11y is all correct; there's some interaction that only works when it's part of the datepicker.

[Deadly0]

Can I use the calendar how it shown on the picture above now? Or it will be available only from 0.12+?

[JobaDiniz]

I couldn't find md-calendar in the docs. Where is it?

And how can I create a _theme_ for ui-calendar plugin? It uses fullcalendar, however, I cannot use md-button for example, because they render buttons with button tags.

[jelbourn]

@JobaDiniz The point of this issue is that there's no docs page for md-calendar.

[gligoran]

Any progress on this? I really need a stand-alone datepicker. I'd be happy with a codepen that shows how to do it, even if it's hacky. I think I'll prove less hacky than modifying other angular datepickers to material design.

[Deadly0]

@gligoran you can use this code to display calendar

<md-calendar ng-model="currentDate"></md-calendar>

but no docs for it.
Available params: md-min-date, md-max-date, md-date-filter
it works the same way as in datepicker.

[gligoran]

@Deadly0 I tried that, but all it displays is the top row of day names.

It might need more work, I'm not aware of, so here's a pen: http://codepen.io/gligoran/pen/PZJxvm

[clavier-souris]

@gligoran ng-cloak on your main div is causing scroller container to be resized to width: 0px
I had the same exact problem.

A question of mine : is it possible to change the first day of week in a week row ? I need it to be Monday instead of Sunday. Thanks.

[Deadly0]

@clavier-souris yes, i use monday as the first day of a week

app.config(function($mdDateLocaleProvider)  {
    $mdDateLocaleProvider.firstDayOfWeek = 1;
});

[clavier-souris]

@Deadly0 Many thanks. Did not realize it was simply linked to locale configuration.

[gligoran]

@clavier-souris: Thanks.

Sadly, it looks like mdMinDate, mdMaxDate, and mdDateFilter don't update when the variables they're bound to, change. It makes sense, since when it's shown from the date picker, these won't change, but in standalone, they can.

[ThomasBurleson]

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.

[siefkenj]

It would be nice if this issue were re-opened.

[Splaktar]

Fixed in 1.1.10: https://material.angularjs.org/1.1.10/demo/datepicker