+ Sorry, you've reached a page that doesn't exist. Don't worry, + though. The Angular Material Calendar is open source and you + can hack on website on + GitHub + if you want to add something to it. +
++ We'll be waiting for your PR! +
++ 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. +
+<script src="https://cdn.rawgit.com/bradberger/angular-material-calendar/master/dist/angular-material-calendar.js"><script>+ +
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 }}
+
+ + 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? +
++ You can easily change the first day of the week. +
+
+ To support scenarios where you wish to update the content of a
+ given day without re-loading the containing scope a CalendarData
+ service has been added. Just inject CalendarData and use the
+ setDayContent(date,content) function
+
+
You can also change the calendar layout dynamically.
++ 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. +
+
+
+ Since 0.2.9 tooltips are off by default, but can easily be enabled. + See the example below. +
+
+ 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"></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>:
+
+
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
+ given day without re-loading the containing scope a CalendarData
+ service has been added. Just inject CalendarData and use the
setDayContent(date,content) function
@@ -206,9 +210,7 @@