data bindings when using ng-fullcalendar dayClick

Question

Trying to build a schedule set up tool in angular. I have ng-fullcalendar implemented and displaying as I want. When you click on a day it should show a div containing a simple form to fill out.

I'm getting the dayClick even and the date from it just fine, but when I try and use that in a 2-way binding or any other 2 way binding really nothing happens. Pretty sure it is a scope issue related to this, but I just can't figure it. Kinda new to angular still.

Anyway, here is code simplified a bit. The HTML:

<div *ngIf="scheduleCalendarOptions" class="calendarwraper">
  <ng-fullcalendar #scheduleCalendar [options]="scheduleCalendarOptions"></ng-fullcalendar>
</div>
<div *ngIf="showScheduleModal === true" style="width: 450px; background-color: #ffffff; height: 500px; border: 1px solid #cccccc; position: absolute; top: 120px; z-index: 10; left: 50%; margin-left: -225px; ">
  <p>{{dayClickDate}}</p>
</div>

The .ts

export class BoardComponent implements OnInit {
  showScheduleModal: boolean = false;
  dayClickDate: any = 'test';

  this.scheduleCalendarOptions = {
    dayClick: (date, jsEvent, view) => this.clickDay(date, jsEvent, view),
  };

  clickDay(date, jsEvent, view) {
    const clickedDate = new Date(date).toLocaleString('en-US', {timeZone: 'UTC'}).split(', ');
    console.log(clickedDate[0]);
    this.showScheduleModal = true;
    this.dayClickDate = clickedDate;
    console.log('this.dayClickDate: ', this.dayClickDate);
  }

}

The calendar shows up fine. The dayClick even fires and enters the clickDay method. The console.log(clickedDate[0]) works just fine. But showScheduleModal and dayClickDate are not being updated. If I manually show the hidden div the date isn't ever updated. I'm guessing the problem is the this in this.showScheduleModal and may have something to do with the arrow function? Any suggestions would be greatly appreciated! Thanks.

Update... I added another console.log at end of clickDay method and it outputs what I expect, the stored date. but the html template looking at dayClickDate isn't updating, even though the variable clearly holds the proper value. So confused.

score 0 · Answer 1 · answered Feb 26 '18 at 23:51

0

You might want to change your if statement to

*ngIf="showScheduleModal === true"

or just

*ngIf="showScheduleModal"

Not quite sure if that's your exact issue, but could be a step on the way. You can read more about equals and booleans in typescript here.

answered Feb 26 '18 at 23:51

Lars

372
2
12

Thank you for the suggestion Lars... that was likely part of the issue. Keep forgetting to make sure type is checked as well as value. Though that didn't seem to solve the problem with getting the value of showScheduleModal to be true, this would probably have been an issue down the road so thank you. – mycroft16 Feb 27 '18 at 00:13
So the if statement returns true when it should, but the string interpolation doesn't work? – Lars Feb 27 '18 at 00:20
So I've stripped it down to ignore the date and just focus on the showScheduleModal. Okay, so if I make the initial declaration in the export true by default, the popup shows immediately on page render. however, if tied the to the dayclick event, the console log fires immediately showing that it has changed to true. Sometimes the popup shows up after 20 or 30 seconds. Mostly it never shows up at all. Despite the value being true. It is really weirding me out. – mycroft16 Feb 27 '18 at 00:45
That is a bit weird. Is there a specific reason you're using an *ngIf to show the modal? You might want to use some of bootstraps modals and their services instead. You can read about them [here](https://ng-bootstrap.github.io/#/components/modal/examples) – Lars Feb 27 '18 at 10:23
Mainly because I'm adding functionality to a large onboarding wizard that was built by a 3rd party programmer and trying to stay consistent with what's .already present. I'm not against using bootstrap modals, but would this be something that would cause this behavior? Using a show/hide div with ngIf vs a modal? – mycroft16 Feb 27 '18 at 15:53

data bindings when using ng-fullcalendar dayClick

1 Answers1