javascript - 在离子日历应用程序中设置周六和周日不可点击
问题描述
我在互联网上看到了一个教程:“ https://devdactic.com/ionic-calendar-app/ ”关于如何在 ionic 中制作活动日历,我已经完成了,但我有一个问题,如果我想在星期六和周日,例如不讨人喜欢(无法在所有周六和周日设置事件),
我的日历 html 文件:
<ion-header>
<ion-navbar color="BlueNew">
<ion-title>
Home
</ion-title>
<ion-buttons start>
<button ion-button icon-only (click)="addEvent()">
<ion-icon name="mail"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<p style="text-align:center;">{{ viewTitle }}</p>
<ion-navbar color="white">
<ion-buttons end>
<button ion-button [disabled]="isToday" (click)="today ()">Today</button>
<button ion-button (click)="changeMode('day')">D</button>
<button ion-button (click)="changeMode('week')">W</button>
<button ion-button (click)="changeMode('month')">M</button>
</ion-buttons>
</ion-navbar>
<calendar [eventSource]="eventSource"
[calendarMode]="calendar.mode"
[currentDate]="calendar.currentDate"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)"
step="30"
startHour="9"
endHour="19"
allDayLabel=""
class="calendar">
</calendar>
解决方案
找到一个月中的所有星期日和星期六,然后将这些日期标记为禁用
这是工作链接检查 home.ts 文件
https://stackblitz.com/edit/ionic-calendar-scheduler-tuuwp3
<calendar ... [markDisabled]="markDisabled"></calendar>
markDisabled = (date: Date) => {
return (date.getDay()==6 || date.getDay()==0);
};
推荐阅读
- arrays - 数组返回不一致(p5js)
- android - Android 选项菜单是白色的
- git - 推送到 github 时我没有包含“起源”这个词
- python - 逐行读取txt文件,然后获取每一行的长度
- node.js - 如何使用 bcrypt 返回散列密码?
- sql - A 1=1 加入 Pandas
- javascript - 用 PHP 中的“data-src”属性替换 HTML 中的所有“src”属性
- asp.net-core - 托管 BackgroundService 应用程序中的启动类替换
- r - RStudio 的新手,关于 knit to HTML 的问题
- python - 在 Bokeh Python 中,如果 x 和 y 轴包含字母,LabelSet 注释将无法正常工作