What could be the reason for the lack of impact when assigning a [dateClass] in mat-calendar?

I've been trying to customize the appearance of specific days in the mat-calendar component from Angular Material, but I'm having trouble getting it to work. I discovered the dateClass property which seemed like the right solution, but no matter what I do, the calendar remains unchanged.

Here is my current setup:

calendar.component.ts:

dateClass = (date: Date): MatCalendarCellCssClasses => { return 'my-date'; }

calendar.component.html:

<mat-calendar [dateClass]="dateClass"></mat-calendar>

calendar.component.css:

.my-date { background-color: red; }

Despite assigning [dateClass], the changes are not reflected in the calendar. I expected all days to have a red background, but it still looks the same as before: Angular Material Calendar

Answer №1

Update:

It was pointed out by the OP that

encapsulation: ViewEncapsulation.None
is also necessary, as shown in the stackblitz demonstration.

Original:

The CSS you provided is too general, resulting in it not being applied to anything. To target the date buttons specifically, consider using this CSS:

button.my-date {
  background: red;
}

View Stackblitz demo

Result:

https://i.sstatic.net/8Wdsr.png

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

Unlocking the capabilities of Chrome extensions using Angular 2 and TypeScript

Currently attempting to develop a chrome extension using angular2 and typescript, I have hit a roadblock in trying to access the chrome API (in this case, chrome.bookmarks). I have successfully gained access to the chrome object by following guidance from ...

Mismatch in TypeScript React Intl Redux form types encountered

Currently, I am facing an issue trying to connect my form to Intl and struggling with a TypeScript error. The error seems to disappear when I change injectIntl<any>, but then I'm not sure what exactly needs to be passed there. Can someone please ...

Creating a loading spinner with the help of an rxjs BehaviorSubject

After creating a loading spinner component for my angular 4 application to display during AJAX calls, I encountered an issue when trying to implement it with a subscription to a BehaviorSubject. This question is similar to how to show a spinner until data ...

Bring JSON into Angular 7 application

For my Angular project, I've set up a localization service by importing JSON files. Following this recommended method, I updated my typings.d.ts as shown below: declare module "*.json" { const value: any; export default value; } Everything w ...

Unable to connect to web3 object using typescript and ethereum

Embarking on a fresh project with Angular 2 and TypeScript, I kicked things off by using the command: ng new myProject Next, I integrated web3 (for Ethereum) into the project through: npm install web3 To ensure proper integration, I included the follow ...

The outer border of the Angular Material Mat Grid List is beautifully highlighted

In my project, I have a mat grid list where users can define the number of rows and columns. My goal is to display borders around each mat-grid-title cell. However, I am struggling to properly display the outermost black border for the entire mat-grid-lis ...

Utilize Angular 9 to fetch data from an API using the Get method, map them to a class, and

Seeking to extract information from a test URL and convert the data into a list, I aim to exhibit them in an alert/Loop for testing purposes. The dummy API URL being used is: The returned data follows this structure: {"status":"success","data":[{"id":"1" ...

What are the best ways to make the most of Angular Material density?

Material has introduced a new density component modifier (Check out the links here and here). After importing material/density, I followed the recommended code structure in my scss file: @use "@material/button"; .my-custom-button { // Adjusts ...

I am struggling to make the map method display the specific components I need

Attempting to create a scalable Custom Form using an array of objects and a custom Input field in a React-Typescript project import React, { ChangeEvent } from "react" import { InputField } from "./InputField" interface FormItem { ...

TypeORM Error: Trying to access property 'findOne' of an undefined object

I've been working on implementing TypeORM with Typescript, and I have encountered an issue while trying to create a service that extends the TypeORM repository: export class UserService extends Repository<User> { // ... other service methods ...

Is it possible for me to change a selector value?

Currently, I am working on an app that utilizes NGRX. I have a question regarding the store being a readonly place where direct object mutation is not allowed. However, I am unsure about the use of selectors. For example, consider the following NGRX sele ...

Tips on refining API response using Angular 2's HTTP module

This is the data I received from my transactions API: [{ "id": 1, "description": "Sandwich", "date": "2017-09-01", "category": "Take away", "tags": ["Holidays"], "amount": -2 },{ "id": 2, "description": "Wage", "date": "2017-08- ...

Maximizing Performance: Enhancing Nested For Loops in Angular with Typescript

Is there a way to optimize the iteration and comparisons in my nested loop? I'm looking to improve my logic by utilizing map, reduce, and filter to reduce the number of lines of code and loops. How can I achieve this? fill() { this.rolesPermiAdd = ...

Using Angular 2 to execute an interface while making an HTTP GET request

I've managed to successfully retrieve and display data from a JSON object using *ngFor in Angular. However, I am struggling with applying an interface to the retrieved data. This is the content of my interface file: import {Offer} from './offer ...

Ways to verify the presence of isBrowser in Angular 4

Previously, isBrowser from Angular Universal could be used to determine if your page was being rendered in a browser (allowing for usage of features like localStorage) or if it was being pre-rendered on the server side. However, it appears that angular2-u ...

Exploring Data Persistence in Angular using Nrwl Nx with non-class Actions

Seeking guidance on integrating non-class-based actions with Nx Data Persistence. After scouring the documentation, I find myself at a loss. My current attempt is as follows: run: (action, state) => { const booking: Booking = action.booking; ...

centering an angular material card on the webpage

Currently, I have developed a Registration script that enables users to Sign Up on my website. However, the issue I am facing is that the angular material card, which houses the sign up interface, is not centered. Despite trying various methods such as & ...

Exploring the typing for DefaultRootState in React Redux Connect

I'm currently in the process of upgrading to the latest versions of TypeScript, React, and Redux. However, I've encountered a compiler error when using the connect function in React Redux: According to the React Redux documentation, I typed my r ...

What is the best way to extend a class in NestJS from another class?

I've encountered an issue while attempting to extend a class service from another class service in NestJS and utilize DI to load it in a third service. The error message I'm receiving from Nest is: Error: Nest can't resolve dependencies of ...

Utilizing TypeScript with Context API

This is my first time working with Typescript to create a context, and I'm struggling to get it functioning properly. Whenever I try to define interfaces and include them in my value prop, I encounter errors that I can't figure out on my own. Spe ...