简体   繁体   English

设置星期六和星期日在离子日历应用中不可点击

[英]Setting saturday and sunday not clickable in ionic calendar app

I have seen a tutorial on internet : " https://devdactic.com/ionic-calendar-app/ " on how to do an event calendar in ionic , I have done it but I have an issue, if I want to make Saturday and Sunday for example unlikable(not being able to set events on all Saturday and Sundays), 我已经在互联网上看到了一个教程:“ https://devdactic.com/ionic-calendar-app/ ”,该教程介绍了如何在ionic中创建事件日历,我做到了,但是如果我想在星期六做一个问题和周日,例如,令人讨厌(无法在所有周六和周日设置事件),

my calendar html file: 我的日历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>

find all the Sunday and Saturday in a month and then pass those date in marked disable 查找一个月中的所有星期日和星期六,然后在标记为禁用的情况下传递这些日期

here is working link check home.ts file 这是工作链接检查home.ts文件

https://stackblitz.com/edit/ionic-calendar-scheduler-tuuwp3 https://stackblitz.com/edit/ionic-calendar-scheduler-tuuwp3

    <calendar ... [markDisabled]="markDisabled"></calendar>

    markDisabled = (date: Date) => {

        return  (date.getDay()==6 || date.getDay()==0);
    };

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM