角材料设计中的活动日历 [英] Event calendar in Angular Material Design

问题描述

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

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

如何在日历中列出我的活动? 我只想在Angular Material Design日期选择器日历中突出显示一些特定的日期.

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

推荐答案

从技术上讲，您无法完成此操作，但是可以使用一些技巧(如果您只想显示事件，而不选择日期).

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).

根据文档 https://material.angularjs.org/latest/api/指令/mdDatepicker ，您可以使用 md-date-filter 函数(日期):布尔/ 该函数需要一个日期并返回一个布尔值，无论是否可以选择它.

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

然后在您的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.

这篇关于角材料设计中的活动日历的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！