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.
First Day Of Week
You can easily change the first day of the week.
{{ 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>: