Angular Material Calendar
Angular Material Calendar

Angular Material Calendar v0.2.12

Flexible calendar directive for the Angular Material framework

file_download Download Now

Getting Started


This is still very much a work in progress, so expect to get your hands dirty and file issues. Nonetheless, it's being prepped for use in production and should get the job done.

Via RawGit

<script src=""><script>

Via Bower

bower install --save material-calendar


npm install --save angular-material-calendar



There's also a fullscreen enabled demo here. It's designed to fill up the horizontal and vertical space of the parent element, so fullscreen is easy to do.

Or, if you prefer, go fullscreen with the demo calendar below by clicking here.

{{ msg || "Click on a date/button to get started"}}

$scope.selectedDate = {{ selectedDate | json }}
With All Options

While I'm working on the documentation, feel free to check out the example of it in action here.

If you're brave, you might be able to poke around the example and figure things out! Better yet, why not help contribute to the documentation?

First Day Of Week

You can easily change the first day of the week.

Sunday Monday Tuesday Wednesday Thursday Friday Saturday
Updating calendar data using the MaterialCalendarData service

To support scenarios where you wish to update the content of a given day without re-loading the containing scope a MaterialCalendarData service has been added. Just inject MaterialCalendarData and use the setDayContent(date,content) function

Make today a happy day

Calendar Layout

You can also change the calendar layout dynamically.

Agenda Calendar
Selecting Dates

You can select multiple dates. Just make sure your ng-model value is initialized as an array. This demo also demonstrates that if the ngModel is changed from outside the directive, the directive will detect that change. That means you can select dates programatically.

Multiple dates Single date


Since 0.2.9 tooltips are off by default, but can easily be enabled. See the example below.

Disable future selection

If you don't want users selecting dates in the future then set the disable-future-selection attribute on the directive to true Toggle future selection

<calendar-md flex layout layout-fill
  title-format="'MMMM y'"
  <--Set the initial month here. "8" is September. Defaults to current-->
  <--Set the initial year here. Defaults to current.-->
  <-- Allows dates in the future to be disabled and unselectable. Defaults to false--> ></calendar-md>

angular.module("materialExample", ["ngMaterial", "materialCalendar"]);

angular.module("materialExample").controller("calendarCtrl", function($scope, $filter, $http, $q) {

    $scope.dayFormat = "d";

    // To select a single date, make sure the ngModel is not an array.
    $scope.selectedDate = null;

    // If you want multi-date select, initialize it as an array.
    $scope.selectedDate = [];

    $scope.firstDayOfWeek = 0; // First day of the week, 0 for Sunday, 1 for Monday, etc.
    $scope.setDirection = function(direction) {
      $scope.direction = direction;
      $scope.dayFormat = direction === "vertical" ? "EEEE, MMMM d" : "d";

    $scope.dayClick = function(date) {
      $scope.msg = "You clicked " + $filter("date")(date, "MMM d, y h:mm:ss a Z");

    $scope.prevMonth = function(data) {
      $scope.msg = "You clicked (prev) month " + data.month + ", " + data.year;

    $scope.nextMonth = function(data) {
      $scope.msg = "You clicked (next) month " + data.month + ", " + data.year;

    $scope.tooltips = true;
    $scope.setDayContent = function(date) {

        // You would inject any HTML you wanted for
        // that particular date here.
        return "<p></p>";

        // You could also use an $http function directly.
        return $http.get("/some/external/api");

        // You could also use a promise.
        var deferred = $q.defer();
        $timeout(function() {
        }, 1000);
        return deferred.promise;