angular - 自定义 mat-calendar,删除月份标签
问题描述
我正在尝试从角材料垫日历中删除月份标签。这是stackblitz链接
https://stackblitz.com/edit/am-all-imports-mviy6e?file=styles.scss
<mat-calendar [dateClass]="dateClass()" [selected]="selectedDate" (selectedChange)="onSelect($event)"></mat-calendar>
onSelect(event){
console.log(event);
this.selectedDate = event;
}
dateClass() {
return (date: Date): MatCalendarCellCssClasses => {
const highlightDate = this.datesToHighlight
.map(strDate => new Date(strDate))
.some(d => d.getDate() === date.getDate() && d.getMonth() === date.getMonth() && d.getFullYear() === date.getFullYear());
return highlightDate ? 'special-date' : '';
};
}
对于CSS: -
.mat-calendar-body-label{
display: none;
}
如果我使用上面的css代码,它会从左到右移动日历日期并使日历失真。
如果我使用这个:-
.mat-calendar-body-label{
opacity: 0;
}
那么如果没有日期,它将留下空行
解决方案
此外:
.mat-calendar-body-label{
opacity: 0;
}
添加以下内容以消除当月的第一天从第一列开始时的额外空间:
.mat-calendar-body-label[colspan="7"] {
display: none;
}
推荐阅读
- r - 根据一组变量之间相对最高分的变化对二分变量进行编码
- c# - C#读取excel并仍然从空白单元格中获取数据
- python - 循环通过 Hackerrank 示例中的超时问题
- c - fork 进程总是返回 > 0 我不知道为什么?
- python - 从txt文件在python中创建字典
- python-3.x - 为什么会出现“连接被拒绝”错误
- reactjs - 如何使用 React 正确设置 react-router-dom 链接
- html - 即使未禁用复选框,复选框的标签也显示为灰色 - 如何解决此问题?
- c++ - 用C scanf关闭cin同步的坏处
- compression - 使用 png8 而不是 png24 作为 RGB 高度图