Angular-calendar: In month view the event container slider automatically opens for the current day even if no event scheduled

[zolee]

Describe the bug

In month view the event container slider automatically opens (without any interaction) for the current day even if no event scheduled for that date.

Minimal reproduction of the problem with instructions

You can see the code where you can reproduce the issue:
https://stackblitz.com/edit/angular-calendar-month-view-empty-event-container

Reproduction steps

1. Open the above mentioned StackBlitz example where the week view will be automatically activated. Click on the month view and you will see the slider below today automatically opens without any content.
2. Another way is to modify the default calendar view in demo/component.ts on line 50 to CalendarView.Month. Refresh the page and you will see the appearance of the same issue.

Note
If you click on a day in month view where any event scheduled the action will open the event container slider of that day and the issue won't happen again as you cannot click on today.

Screenshots

Versions
angular-calendar 0.27.1
Chrome 73/Firefox 66 I think it is a browser independent problem.

[matts-bot[bot]]

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider supporting me on Patreon

[mattlewis92]

Hey, so to remain as un-opinionated as possible, the calendar doesn't handle any business logic for opening and closing the open day events (sometimes people want it to open on no events so they can provide a custom template with a "Add new" button inside). Because you initialise the activeDayIsOpen to true it remains open. You can use the beforeViewRender hook though to add some custom logic to keep any days with 0 events closed:

beforeMonthViewRender(lastRender: CalendarMonthViewBeforeRenderEvent): void {
    lastRender.body.forEach(cell => {
      if (isSameDay(cell.date, this.viewDate) && cell.events.length === 0) {
        this.activeDayIsOpen = false;
        this.changeDetectorRef.detectChanges();
      }
    })
  }

Here's a working example: https://stackblitz.com/edit/angular-calendar-month-view-empty-event-container-fcmvld?file=demo%2Ftemplate.html

Hope that helps! 😄

[zolee]

Hey, so to remain as un-opinionated as possible, the calendar doesn't handle any business logic for opening and closing the open day events (sometimes people want it to open on no events so they can provide a custom template with a "Add new" button inside). Because you initialise the activeDayIsOpen to true it remains open. You can use the beforeViewRender hook though to add some custom logic to keep any days with 0 events closed:

beforeMonthViewRender(lastRender: CalendarMonthViewBeforeRenderEvent): void {
    lastRender.body.forEach(cell => {
      if (isSameDay(cell.date, this.viewDate) && cell.events.length === 0) {
        this.activeDayIsOpen = false;
        this.changeDetectorRef.detectChanges();
      }
    })
  }

Here's a working example: https://stackblitz.com/edit/angular-calendar-month-view-empty-event-container-fcmvld?file=demo%2Ftemplate.html

Hope that helps! 😄

Thank you for the effort to make this explanation. I just raised this issue because for me it seemed a little inconsistent the way it works. I mean basically you cannot click on a day which contains no events so the slider won't open. But the this.activeDayIsOpen overwrites this behavior and for me that worth to have this double check.

Anyway thank you very much for the answer.