angularjs - Angular Material Datepicker - show selected hoildays -


is possible show selected holidays in angular material datepicker. https://material.angularjs.org/latest/demo/datepicker.

it can done in jquery date-picker easily.mvc datepicker both holidays , weekends

please let me know can done using angular material (md-datepicker)

var holidays_dates = ["11-25-2015", "11-27-2015", "11-29-2015","10-9-2015"]; 

you can decorate mdcalendarmonthbody directive, directive creates cells in datepicker table.

in example have replaced builddatecell function own function. first thing in new function calling old function create cell , i'm adding class cell if date holiday.

require('angular-material');     angular.module('myapp', [])            .config([ '$provide', function($provide) {                  $provide.decorator('mdcalendarmonthbodydirective', function($delegate) {                     var originaldirective = $delegate[0];                      var oldbuilddatecell = originaldirective.controller.prototype.builddatecell;                     originaldirective.controller.prototype.builddatecell = function(opt_date) {                         var cell = oldbuilddatecell.apply(this, [opt_date]);                          var holidays = [{'holidaytype':'holiday_type_newyear','date':'2015-12-31t23:00:00.000z'},{'holidaytype':'holiday_type_prayer_day','date':'2016-04-21t22:00:00.000z'},{'holidaytype':'holiday_type_easter_monday','date':'2016-03-27t22:00:00.000z'},{'holidaytype':'holiday_type_pentecost_day','date':'2016-05-14t22:00:00.000z'},{'holidaytype':'holiday_type_good_friday','date':'2016-03-24t23:00:00.000z'},{'holidaytype':'holiday_type_christmas_day','date':'2016-12-24t23:00:00.000z'},{'holidaytype':'holiday_type_boxing_day','date':'2016-12-25t23:00:00.000z'},{'holidaytype':'holiday_type_maundy_thursday','date':'2016-03-23t23:00:00.000z'},{'holidaytype':'holiday_type_ascension_day','date':'2016-05-04t22:00:00.000z'},{'holidaytype':'holiday_type_whit_monday','date':'2016-05-15t22:00:00.000z'},{'holidaytype':'holiday_type_palm_sunday','date':'2016-03-19t23:00:00.000z'},{'holidaytype':'holiday_type_easter_day','date':'2016-03-26t23:00:00.000z'}];                         if (opt_date) {                             (var i=0; i<holidays.length; i++) {                                 if (this.dateutil.issameday(opt_date, new date(holidays[i].date))) {                                     cell.classlist.add('datepicker-holiday');                                 }                             }                         }                         return cell;                     };                      return $delegate;                  });         }]); 

then there's left create style holidays in calendar.

.datepicker-holiday .md-calendar-date-selection-indicator {     background-color: #00c853; } 

Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -