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/angular-material-calendar.js"><script>
Via Bower
bower install --save material-calendar
Via NPM
npm install --save angular-material-calendar
Usage
Demo
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.
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
Calendar Layout
You can also change the calendar layout dynamically.
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.
Tooltips
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
<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"
tooltips="tooltips"
day-format="dayFormat"
day-label-format="'EEE'"
day-label-tooltip-format="'EEEE'"
day-tooltip-format="'fullDate'"
day-content="setDayContent"
disable-future-selection="false"
<-- Allows dates in the future to be disabled and unselectable. Defaults to false--> ></calendar-md>
<script>
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() {
deferred.resolve("<p></p>");
}, 1000);
return deferred.promise;
};
});
</script>: