I'm trying to disable all the dates where user already has a booked event on. I'm using TypeScript and Angular 6. I'm more fortable with Java but learning some Javascript on my own.

.TS

    getUserEvents() {
    this._calendarService.getAllEvent().subscribe(res => {
      this.allEvents = res.json();
    });
  }

  filterForbiddenDays() {
    this.allEvents.forEach(d => {
      let day = {
        'start': new Date(d.startDate.value),
        'end': new Date(d.endDate.value)
      };
      this.forbiddenDays.push(day);
    });
  }

  public myFilter = (d: Date): boolean => {
    //return this.forbiddenDays[0].start.getDate() !== d.getDate() && this.forbiddenDays[1].start.getDate() !== d.getDate() // <-- THIS WORKS GREAT
    this.forbiddenDays.filter(data => {
      return data.start.getDate() !== d.getDate() // <-- TRUE SHOULD CHANGE COLOR ON DAY IN CALENDAR
    });
    return false;
  }

If I map the forbiddenDays array instead of forEach I can see that i'm getting true for every event in the forbiddenDays, which should change the color on theese days, in the calendar.

But right now myFilter method results in this: pic of calendar

What am i doing wrong? I feel like the problem is in myFilter method.

.HTML

    <div class="example-wrapper datePicker">
        <label class="example-input-wrapper" id="eventInputSuccess">
            <input (click)="filterForbiddenDays()" id="eventInputError" placeholder="Click to choose date"
                (dateTimeInput)="basic.openModal()" [(ngModel)]="dateTimeInput" [owlDateTimeTrigger]="dt"
                [owlDateTimeFilter]="myFilter" [owlDateTime]="dt"><i class="fa fa-calendar" aria-hidden="true"></i>
            <owl-date-time #dt [pickerMode]="'dialog'"></owl-date-time>
        </label>
    </div>
</div>

Thanks in advance!

EDIT:

return this.forbiddenDays[0].start.getDate() !== d.getDate();

results in : expected result but for all days in my array

So basically it works great when I specify the index like [0] or [3] etc, but im not sure why it's not working with forEach() or filter()

I'm trying to disable all the dates where user already has a booked event on. I'm using https://www.npmjs./package/ng-pick-datetime TypeScript and Angular 6. I'm more fortable with Java but learning some Javascript on my own.

.TS

    getUserEvents() {
    this._calendarService.getAllEvent().subscribe(res => {
      this.allEvents = res.json();
    });
  }

  filterForbiddenDays() {
    this.allEvents.forEach(d => {
      let day = {
        'start': new Date(d.startDate.value),
        'end': new Date(d.endDate.value)
      };
      this.forbiddenDays.push(day);
    });
  }

  public myFilter = (d: Date): boolean => {
    //return this.forbiddenDays[0].start.getDate() !== d.getDate() && this.forbiddenDays[1].start.getDate() !== d.getDate() // <-- THIS WORKS GREAT
    this.forbiddenDays.filter(data => {
      return data.start.getDate() !== d.getDate() // <-- TRUE SHOULD CHANGE COLOR ON DAY IN CALENDAR
    });
    return false;
  }

If I map the forbiddenDays array instead of forEach I can see that i'm getting true for every event in the forbiddenDays, which should change the color on theese days, in the calendar.

But right now myFilter method results in this: pic of calendar

What am i doing wrong? I feel like the problem is in myFilter method.

.HTML

    <div class="example-wrapper datePicker">
        <label class="example-input-wrapper" id="eventInputSuccess">
            <input (click)="filterForbiddenDays()" id="eventInputError" placeholder="Click to choose date"
                (dateTimeInput)="basic.openModal()" [(ngModel)]="dateTimeInput" [owlDateTimeTrigger]="dt"
                [owlDateTimeFilter]="myFilter" [owlDateTime]="dt"><i class="fa fa-calendar" aria-hidden="true"></i>
            <owl-date-time #dt [pickerMode]="'dialog'"></owl-date-time>
        </label>
    </div>
</div>

Thanks in advance!

EDIT:

return this.forbiddenDays[0].start.getDate() !== d.getDate();

results in : expected result but for all days in my array

So basically it works great when I specify the index like [0] or [3] etc, but im not sure why it's not working with forEach() or filter()

• javascript
• angular
• typescript
• datepicker

• Look into the reduce function. – Heretic Monkey Commented Jan 9, 2019 at 23:02
• I'm having a bit of an issue understanding the process, what is myFilter supposed to do? is it supposed to return a boolean? – Guy who types fast Commented Jan 9, 2019 at 23:09
• the parameter d: Date returns all dates in the whole calendar and when d is equal to a date in the forbiddenDays array, it should return a boolean with value true and disable that date in the calendar – KENUBBE Commented Jan 9, 2019 at 23:12
• I edited the post – KENUBBE Commented Jan 9, 2019 at 23:17
• So basically it works great when I specify the index like [0] or [1] etc, but im not sure why it's not working with forEach() or filter() – KENUBBE Commented Jan 9, 2019 at 23:19

2 Answers 2

Your function myFilter allways returns false.

The return inside this.forbiddenDays.forEach() only breaks out of the current iteration but doesn't cause your function to stop. You have to use some or every instead:

public myFilter = (d: Date): boolean => {
    return this.forbiddenDays.every(data => {
        return data.start.getDate() !== d.getDate() // <-- TRUE SHOULD CHANGE COLOR ON DAY IN CALENDAR
    });
}

this will return true only if all elements in the array fulfill data.start.getDate() !== d.getDate() and false otherwise.

Your myFilter function always returns false. The return in the forEach or filter callback is not going to return the myFilter function. It just returns the callback you pass into it, which in this case is pretty pointless.

What I think you want is something like this:

public myFilter = (d: Date): boolean => {
  return this.forbiddenDays.every(forbiddenDay => {
    return forbiddenDay.start.getDate() !== d.getDate();
  });
}

The array.every() method returns false if the callback returns false for any of the array elements.

You could also write this using a for..of loop:

public myFilter = (d: Date): boolean => {
  for (let forbiddenDay of this.forbiddenDays) {
    if (forbiddenDay.start.getDate() !== d.getDate()) {
      return true;
    }
  }
  return false;
}