2

I want to use Angular Material Design Default Date picker Calendar as a Event Calendar. like: http://prntscr.com/fpg1lw

How can I list my events in calendar? I just want to highlight some specific dates in Angular Material Design Date picker Calendar.

om_jaipur
  • 2,176
  • 4
  • 30
  • 54

1 Answers1

2

Technically You cannot accomplish this, but using a little trick may work (if you want only to display the events, not to select a date).

According the doc https://material.angularjs.org/latest/api/directive/mdDatepicker , you can use md-date-filter function(Date): boolean / Function expecting a date and returning a boolean whether it can be selected or not.

So you can for example put your date events in an array:

var today = new Date();
today.setHours(0,0,0,0);
var events = [
  today.getTime(),
  today.setDate(today.getDate() - 1),
  today.setDate(today.getDate() - 4)
];
$scope.filter = function(Date) {
  return events.indexOf(Date.getTime()) > -1;
};

And in your html

<md-datepicker ng-model="birthday" md-date-filter="filter" md-is-open="true"></md-datepicker>

You will get all the dates disabled except the dates indicated in your events, then add some style to customize it.

enter image description here

Fetrarij
  • 7,176
  • 3
  • 27
  • 35
  • Thanks @Fetra, How can I use custom dates instead of (today.getDate() - 4)? – om_jaipur Jun 30 '17 at 06:15
  • javascript date but setting hours, minutes, seconds, milliseconds to 0 , then use getTime() to compare these date with timestamp https://www.w3schools.com/jsref/jsref_obj_date.asp eg : var events = [(new Date(2017, 2, 3, 0, 0, 0, 0)).getTime(), (new Date(2017, 5, 26, 0, 0, 0, 0)).getTime()] – Fetrarij Jun 30 '17 at 06:30
  • because month start from 0 (month is from 0-11). just add -1 if you could – Fetrarij Jun 30 '17 at 07:16