Disabling the ability to select Saturday and Sunday within the Ionic calendar application

I came across a tutorial online at "" that explains how to create an event calendar in Ionic. I followed the tutorial and successfully implemented it, but I now have a specific issue. I want to make Saturdays and Sundays unselectable, meaning users should not be able to set events on those days.

Below is my calendar HTML file:

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

Answer №1

Identify all the Saturdays and Sundays in a month, then mark those dates as disabled.

For a working example, please refer to the home.ts file at the following link:

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

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

    markDisabled = (date: Date) => {

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

express.js - one handler to rule them all: managing multiple routes

Currently in the process of developing an application, I have a routes file structured as follows. const router = require('express').Router(); router.get('/', (req, res) => res.render('statics/home')); router.get('/j ...

What is the best way to create a React component that renders a class component as a functional component?

My Objective: At the moment, I am in the process of developing an AuthUserRole HOC component to manage user roles like Manager and Employee. However, I encountered a tutorial that uses a functional component to return a class component as referenced here. ...

The debate between classes and data attributes in terms of auto field initialization

A Brief Background In the realm of javascript/jQuery, I've crafted a method that traverses through various fields and configures them based on their type - be it dropdowns, autocomplete, or text fields... The motivation behind this is my personalize ...

Launching Angular 2 Application on Azure Cloud

I have recently been diving into the world of Angular 2 and Azure. Following the steps outlined in the Angular 2 Tutorial, I was able to successfully run my application locally without any issues. After deploying the app to Azure, I encountered a problem. ...

Sorting Angular data using database queries

I'm currently setting up a blog for my website. Everything is running smoothly with the database, but I've run into an issue with the order of my posts - they are displayed in the opposite order that I want. The oldest post is showing at the top, ...

Having trouble displaying images in Express JS

Here are the lines of code that I wrote in Express: res.write("The current temperature is "+temp+". "); res.write("Weather is currently "+weatherDes); res.write("<img src=" +imageURL+ ">"); res.send() ...

Utilize the _sortBy function from the lodash library to arrange an array based on a specific field

Looking at an array of objects similar to this: myArray = [ {AType: "aaa", Description: "De", …}, {AType: "bbb", Description: "Hi", …}, {AType: "ccc", Description: "Un", …}, {AType: "ddd", Description: ...

Tips for sending a prompt within a .js document

Within my script.js file, I have a prompt that collects user input (specifically a username), stores it in an array, and then should send that array to the server. I'm struggling with getting the "prompt.submit" section to function properly. Whenever ...

Is there a way to link the id selector with the item's id?

In my app, I have a list of items with buttons that can be liked. To ensure uniqueness, I am utilizing the id selector. My goal is to use the item's id and connect it to the id selector for proper distinction. How can I retrieve the id of each item a ...

Custom querying with NodeJS and MongoDB

Currently, I am running a NodeJS server with express and handling a get method at '/api/jobs/'. This method involves retrieving querystring parameters from the URL and using them to query the MongoDB database for job information. For example, th ...

The ExpressJS app generator seems to be struggling to identify and interpret the flags

I seem to be having trouble running the express app generator with flags. For example, when I run express --version, it interprets the --version part as a target directory and creates the app there. This is happening on Windows XP SP3. Could I be doi ...

When lines are added to a file in Node.js, the content is written in a haphazard sequence

I've encountered an issue with the code I wrote where the header line is not consistently at the top. It seems to randomly appear on the second or third line instead. I've tried troubleshooting multiple times without success, so any help would be ...

Is Intellisense within HTML not available in SvelteKit when using TypeScript?

Having trouble with intellisense inside HTML for a simple page component. Also, renaming properties breaks the code instead of updating references. Typescript version: 4.8.4 Below is the code snippet: <script lang="ts"> import type { Bl ...

Issues with routing device

I'm experiencing an issue with the navigation on my app. When I click on the button, nothing happens except for some weird behavior. However, when I use <router-outlet></router-outlet>, it works perfectly. Here is my app.module.ts file: ...

A different approach to handling multiple constructors in Angular 4

Angular 4 does not support having multiple constructors, so I need to find a cleaner way to instantiate my object. This is what my model looks like: export class SrcFilter { constructor(public firstList?: Array<String>, public secondList?: Arra ...

How do I trigger a click event on an autocomplete search bar in Vue with a router link enabled?

I'm working on an app that is similar to Github, and I want to create a search bar functionality just like Github's. However, I'm facing an issue with my search bar located in the navbar option section as it doesn't seem to register any ...

How to Create Angular 2 Material Tabs with Dual Labels

How can I create a double label for Material Tabs? I tried customizing the label like this: <ng-template mat-tab-label> <div>{{mainTab.label}}</div> <div>{{mainTab.label}}</div> < ...

Ways to serve JSON response following a 400 error code

After a user submits incorrect form details, such as an invalid username or blank email address, I make an Ajax request to my REST API. The response data I receive is structured as follows: HTTP 400 Bad Request Allow: POST, OPTIONS Content-Type: applicati ...

Material 2's portal host fails to display the specified template portal

Check out the Demo Plunker here: https://plnkr.co/edit/Ye8MAUmrMEQKnPt93TjT?p=preview I'm following the guidance from Material 2 documentation in order to establish a template portal that will be displayed within a nearby host (although my ultimate g ...

Troubleshooting Problem with MVC Ajax Requests

When working with an MVC view, I have a submit button that includes validation checks. If the validation fails, I return false to prevent the form from being submitted. In addition to standard validation, I also use an Ajax GET request to check for duplic ...