picker elementClass()

I encountered an issue while using the datepicker from Material UI. The datepicker has a method called dateClass:

dateClass() {
    return (date: Date): MatCalendarCellCssClasses => {
      const unvailableArray = this.shareDate.unavailableDates;
      const reservedArray = this.shareDate.reservedDate;
      let day = 'freeDate';
      for (const element of reservedArray) {
        if (date.getFullYear() === element.getFullYear() && date.getMonth() === element.getMonth() &&
          date.getDate() === element.getDate()) {
          day = 'prenotation';
          return day;
        }
      }
      for (const element of unvailableArray) {
        if (date.getFullYear() === element.getFullYear() && date.getMonth() === element.getMonth() &&
          date.getDate() === element.getDate()) {
          day = 'unavailable';
          return day;
        }
      }
      return day;
    };

  }

This method is located in appComponent.ts and allows me to color the calendar cells by cycling through a list of date arrays. It is invoked in the appComponent.html.

<mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Click on the calendar</mat-label>
    <input matInput readonly [matDatepicker]="picker" [(ngModel)]="this.shareDate.myFormattedDate" (dateChange)="openDialog($event)">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker [dateClass]="dateClass()" #picker> </mat-datepicker>
  </mat-form-field>

I need to call this method inside another component to update the cell coloring. How can I achieve this? I tried importing appComponent.ts into the second component and invoking dateClass() but it didn't work.

Can you assist me in resolving this issue?

Answer №1

Transfer the method to a shared service named shared.service.ts

dateClass(shareDate : any) {
return (date: Date): MatCalendarCellCssClasses => {
  const unvailableArray = shareDate.unavailableDates;
  const reservedArray = shareDate.reservedDate;
  let day = 'freeDate';
  for (const element of reservedArray) {
    if (date.getFullYear() === element.getFullYear() && date.getMonth() === element.getMonth() &&
      date.getDate() === element.getDate()) {
      day = 'prenotation';
      return day;
    }
  }
  for (const element of unvailableArray) {
    if (date.getFullYear() === element.getFullYear() && date.getMonth() === element.getMonth() &&
      date.getDate() === element.getDate()) {
      day = 'unavailable';
      return day;
    }
  }
  return day;
}

You can now access this method from app.component and any other component as needed, such as:

In .component.html

<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Click on the calendar</mat-label>
<input matInput readonly [matDatepicker]="picker" [(ngModel)]="this.shareDate.myFormattedDate" (dateChange)="openDialog($event)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker [dateClass]="dateClass()" #picker> </mat-datepicker>

In component.ts

dateClass(){
 return this.sharedService.displayClass(this.shareDate);
}

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

Can you explain the functionality of this Observable in the context of this Angular 2 example?

I'm not too familiar with JavaScript/TypeScript and I have a question about how this code snippet works: onGet() { this.serverService.getServers() .subscribe( (servers: any[]) => this.servers = servers, // an array of anythin ...

Unable to iterate over a JSON response from a POST request in Angular 8

I am attempting to iterate through a JSON object that is returned after making a POST request to my REST API. However, I'm encountering the following error: DatetodateComponent.html:33 ERROR Error: Cannot find a differ supporting object '[objec ...

Is there a CSS3 Selector With Similar Functionality to jQuery's .click()?

For a few years now, I have been utilizing a pure CSS navigation system. However, with the recent increase in mobile site projects at my workplace, I am encountering issues with drop-down menus not functioning properly on mobile devices. Despite this chall ...

Connecting to Asp.Net Core 6 Signal-R Takes an Unusually Long Time of 4 Minutes

I recently launched a new Asp.Net Core .Net 6 project, integrating a SignalR hub with an Angular 13 client. Although the connection eventually establishes, there is a frustrating delay of 4 minutes before it does. It's worth noting that the applicati ...

Generating an interactive Datepicker using Jquery

How can I design a dynamic date picker similar to the image provided below? https://i.sstatic.net/euoNI.png I have attempted to create one, but I am looking for a more interactive date picker. Is there a way to achieve the design shown in the image? The ...

Implementing a PHP form for seamless image uploads

I have been attempting to upload a form that includes an image. I have successfully retrieved the data for the brand name and other fields. However, I am encountering an issue with retrieving the image name and type. Can someone please assist me in ident ...

Progressive File Upload in ASP.NET Core 2.0 and Angular 4.3: A Seamless Integration

Is there a way to utilize the latest Angular 4.3 HttpClient to handle file uploads and retrieval in an ASP.NET Core 2.0 Controller, all while providing live upload progress updates to the client? ...

Blending images together can obscure surrounding elements

Is there a way to make two images crossfade on hover without hiding the text underneath? I need the text to show below the image, not behind it. Any suggestions on how to solve this issue? #center { text-align: center; } #under { text-align: cente ...

Implement a vertical background sprite animation using jQuery along with a mask

Is it possible to create a jQuery background vertical animation that smoothly transitions the sprite position, giving the appearance of fading into the next position? Currently, my code (view demo jsfiddle link below) moves the sprite to the correct backgr ...

Issues with Angular 2 and Deserialization of .NET List<T>

I'm encountering issues when trying to deserialize a .NET List into an Angular 2 array. An error keeps popping up: ERROR Error: Cannot find a differ supporting object...NgFor only supports binding to Iterables such as Arrays. I've looked around ...

Issue with Angular 9 Json pipe not showing decimal values

My JSON data looks like this: this.data = {"eoiStatistics": [ { "dateRange": { "explicitStartDate": "1997-01-01T00:00:00", "explicitEndDate": "2019-07-01T00:00:00" }, "outstandingApplicationCount": 0.0, "pendingApplicationCount": 24.0, " ...

How can I access multiple icons using jQuery?

Below is the JavaScript code I am using: $(document).ready(function() { $.getJSON("Stations.php", function(jsonData){ $.each(jsonData, function(key,value) { $('#selectStation') .append($("<option></option>") ...

How can I automatically copy a highlighted link in HTML?

I am attempting to implement a feature where users can click on a link and have it automatically copied. For example, I want it to appear like this: "UPI ID: david@okidfcbank". In this case, the link should be highlighted in blue. This is the code I have ...

Collecting all the <td> elements within a single row

I am having trouble creating a table dynamically using JSON data. The issue is that all <td> elements are being placed in the same <tr> instead of two separate rows. Here is my JavaScript code: $('button').click(function() { var str ...

Bootstrap navbar and its underlying area

I am struggling to effectively implement a navbar on my website. I currently have the following code snippet in the body section of my base.html file. (Should the navbar be placed in the head section instead?) <body> <div class="row" ...

Tips for modifying the export csv file name in primeng when initiating the download process

Here is a prime ng table of angular: The records are listed using the primeng table library, and you can also download csv. <p-table #dt styleClass="table table-striped" [columns]="colsCSV" [value]="reviewSSRList" selectionMode="single" [paginator]=" ...

Allow one child to be visible even if the parent container has hidden overflow (or a different setting)

Is there a way to achieve the same look as shown in this example, but without repeating the border-radius code for the div.left in the CSS? It feels redundant and I suspect my approach may not be optimal. If you have any suggestions on how to accomplish t ...

Angular view showcasing a JSON array

After retrieving data from the Laravel API, I used the following method: this.dataService.getData().subscribe(res=>{ this.contacts=res }); Upon receiving a JSON array response from Laravel like the one below, I attempted to iterate throu ...

Using AngularJS to link the ng-model and name attribute for a form input

Currently, I am in the process of implementing a form using AngularJS. However, I have encountered an issue that is puzzling me and I cannot seem to figure out why it is happening. The problem at hand is: Whenever I use the same ngModel name as the name ...

What is the method to show text on hover in angularjs?

I'm a beginner in AngularJS and I'm looking to show {{Project.inrtcvalue}} when the mouse hovers over values. Can anyone guide me on how to achieve this using AngularJS? <table ng-table="tableParams" show-filter="true" class="table" > ...