Default <calendar-grid> with arrows

  <calendar-grid arrows></calendar-grid>
  

Specify starting date

  <calendar-grid arrows date="1955-11-5"></calendar-grid>
  

Alternate way to specify starting date

  <calendar-grid arrows month="9" year="1993"></calendar-grid>
  

Either value may be omitted

It will be substituted for the equivalent value from the current date.

  <calendar-grid arrows month="9"></calendar-grid>
  

Control display of month and weekday names

month-names accepts the values "short" and "long".

weekday-names accepts the same as well as "narrow".

By default, month-names="long" and weekday-names="narrow".

  <calendar-grid arrows month-names="short" weekday-names="short">
  </calendar-grid>
  

Transcluded HTML has access to the calendar scope property of its parent.

  <calendar-grid>
    <button ng-controller="randomMonth" ng-click="calendar.month = spin()"
               class="calendar-grid-spin-button">
      Spin!
    </button>
  </calendar-grid>
  

Include a <calendar-chooser> for a quick alternative to arrows navigation.

<calendar-chooser> accepts the same month-names attribute as <calendar-grid>

  <calendar-grid>
    <p class="chooser-hint">
      Please select a month and day for the calendar.
    </p>
    <calendar-chooser month-names="short"></calendar-chooser>
  </calendar-grid>
  

Please select a month and day for the calendar.