javascript - Angular Material Design 中的事件日历

Question

我想使用 Angular Material Design 默认日期选择器日历作为事件日历。喜欢:http://prntscr.com/fpg1lw

如何在日历中列出我的事件？ 我只想在 Angular Material Design 日期选择器日历中突出显示一些特定日期。

Answer 1

从技术上讲你无法做到这一点，但使用一些小技巧可能会奏效(如果你只想显示事件，而不是选择日期)。

根据文档 https://material.angularjs.org/latest/api/directive/mdDatepicker , 你可以使用 md-date-filter function(Date): boolean/ 函数需要一个日期并返回一个 bool 值是否可以选择。

例如，您可以将日期事件放在一个数组中:

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>

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