Angular Materials Design中的活动日历

Question

我想使用Angular Materials Design Default Date picker Calendar作为事件日历。喜欢：http://prntscr.com/fpg1lw

如何在日历中列出我的活动？我只想强调一些特定的日期在角材料设计日期选择器日历。

Answer 1

从技术上讲，您无法完成此操作，但使用一个小技巧可能会奏效（如果您只想显示事件，而不是选择日期）。

据医生说https://material.angularjs.org/latest/api/directive/mdDatepicker，您可以使用md date filter函数（date）：布尔值/函数，该函数需要一个日期并返回一个布尔值，无论是否可以选择。

例如，您可以将日期事件放入数组中：

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;
};

在你的html中

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

您将禁用除活动中指示的日期之外的所有日期，然后添加一些样式来自定义它。