Angular Material Calendar
Angular Material Calendar

Angular Material Calendar v0.2.3

Flexible calendar directive for the Angular Material framework

file_download Download Now

Getting Started

Notes

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="https://cdn.rawgit.com/bradberger/angular-material-calendar/master/dist/js/angular-material-calendar.js"><script>

Via Bower

bower install --save material-calendar

Via NPM

npm install --save angular-material-calendar

Usage

Demo

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?

Calendar Layout

You can also change the calendar layout dynamically.

Vertical Horizontal
First Day Of Week

You can easily change the first day of the week.

Sunday Monday Tuesday Wednesday Thursday Friday Saturday

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

<calendar-md flex layout layout-fill
  calendar-direction="direction"
  on-prev-month="prevMonth"
  on-next-month="nextMonth"
  on-day-click="dayClick"
  title-format="'MMMM y'"
  ng-model='selectedDate'
  week-starts-on="firstDayOfWeek"
  <--Set the initial month here. "8" is September. Defaults to current-->
  data-start-month="8"
  <--Set the initial year here. Defaults to current.-->
  data-start-year="2014"
  day-format="'d'"
  day-label-format="'EEE'"
  day-label-tooltip-format="'EEEE'"
  day-tooltip-format="'fullDate'"
  day-content="setDayContent"></calendar-md>

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

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

    $scope.selectedDate = null;
    $scope.firstDayOfWeek = 0; // First day of the week, 0 for Sunday, 1 for Monday, etc.
    $scope.setDirection = function(direction) {
      $scope.direction = direction;
    };

    $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.setDayContent = function(date) {
      // You would inject any HTML you wanted for
      // that particular date here.
        return "<p></p>";
    };

});
</script>: