As I understand, You want to mark different event dates on calendar. As You can see in docs:
Parameter |
Type |
Description |
ng-model |
Date |
The component's model. Should be a Date object.
|
md-min-date |
Date |
Expression representing the minimum date.
|
md-max-date |
Date |
Expression representing the maximum date.
|
md-date-filter |
function(Date): boolean |
Function expecting a date and returning a boolean whether it can be selected or not.
|
ng-model will reflect the selected date object of the selected event date. md-date-filter is very useful in your case to highlight event falling on the calendar date. You need to create a function with cDate parameter and return true or false. If it true date will clickable on the calendar otherwise disabled. Suppose you have array of event dates as:
var today = new Date();
today.setHours(0, 0, 0, 0);
var events = [
today.getTime(),
today.setDate(today.getDate() - 1),
today.setDate(today.getDate() - 4),
today.setDate(today.getDate() - 8),
today.setDate(today.getDate() - 11)
];
You can create filter function in controller as
$scope.eventDates = function (cDate) {
return events.indexOf(cDate.getTime()) > -1;
};
Now, in html use different attributes as :
<md-calendar ng-model="SelectedEventDate" md-date-filter="eventDates"></md-calendar>
And when you select or click on calendar date then SelectedEventDate will be populate to the related date. Do the something this as:
<div>{{SelectedEventDate}}</div>
Posted On:
30-Jun-2017 06:53