how to use md-calendar to highlight multiple date?

Smith
Smith
None
2568 Points
74 Posts

Hi guys,

I am trying to use <md-calendar> of angular material to show events on the calendar. But it takes only single date. Also I have tried api docs material.angularjs.org . But it does not give detail implementation.

<md-calendar md-min-date="EventStartDate" md-max-date="EventEndDate" ng-model="EventDatses" md-date-filter="onlyWeekendsPredicate"></md-calendar>

Anyone have implemented this?

 

Views: 9945
Total Answered: 1
Total Marked As Answer: 0
Posted On: 27-Jun-2017 06:13

Share:   fb twitter linkedin
Answers
Rahul Maurya
Rahul M...
Teacher
4822 Points
23 Posts
         

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
 Log In to Chat