Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

143
Views
How to display only range of days in mat-calendar without datePicker?

How can I show an array of days in mat-calendar, like for example I have the following arrangement:

Array: ['MO', 'TH', 'FR']  

And I want that when starting the mat-calender component, only and only the days that the arrangement is enabled (['MO', 'TH', 'FR'])

Currently, I have something like this:

dayAvaibality!: any;

ngOnInit(){
 this.dayAvaibality = this.getAvaibility();
}

    getAvaibility(){
      let workingDays: string[] = [];
      //If the user selected a place show me the calendar you have for that place
      if(this.selectedPlace && this.selectedPlace.schedules){
      //So it loops through the array once for each element of the array
      this.selectedPlace.schedules.forEach((schedule: { days: any[]; }, index: any) => {
        // And return the iteration of the array traversal and store it in the new element 
        // obtained
          // in workingDays
        Object.keys(DaysOfWeek).forEach((key, index) => {
          if (schedule.days.some((day: string) => day == key)) {
            workingDays.some(alreadyAddedDay => alreadyAddedDay == key) ? null : workingDays.push(key)
          }
        })
      })
      console.log('Days working', workingDays);
     return workingDays;
    }
    else{
      return console.error('Ha ocurrido un error');
    }
}

 dateFilter = (date: Date) => {
    return this.dayAvaibality?.includes(moment(date).format('dd'));
  }

enum DaysOfWeek {
  "MO" = 1,
  "TU" = 2,
  "WE" = 3,
  "TH" = 4,
  "FR" = 5,
  "SA" = 6,
  "SU" = 7,
}

html: //NgIF that loads until it has read dayAvaibality

<mat-calendar [dateFilter]="dateFilter" *ngIf="dayAvaibality"></mat-calendar>

What it currently shows me:

enter image description here

How to display only range of days in mat-calendarwith momentJS? Pleaseee Help Me, I am desperate, I have tried several things, I can not find a single example, it helps. I am new programming

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!