Add event action to week and day calendar views

src/app/calendar-app/calendar-app.component.html

@@ -97,6 +97,18 @@
     </span>
 </ng-template>
 
+<ng-template #addEventInViewButton>
+    <button mat-icon-button
+        *ngIf="view === RunboxCalendarView.Week || view === RunboxCalendarView.Day"
+        id="addEventInViewButton"
+        aria-label="Add event"
+        matTooltip="Add event"
+        (click)="addEvent(viewDate)"
+    >
+        <mat-icon svgIcon="plus-circle"></mat-icon>
+    </button>
+</ng-template>
+
 <mat-sidenav-container autosize>
     <mat-sidenav #sidemenu
         [opened]="sideMenuOpened"
@@ -220,6 +232,9 @@ <h3 class="sideNavHeader">Calendar Menu</h3>
                 <ng-container *ngTemplateOutlet="calendarTitle">
                 </ng-container>
 
+                <ng-container *ngTemplateOutlet="addEventInViewButton">
+                </ng-container>
+
                 <ng-container *ngTemplateOutlet="viewModeButtons"></ng-container>
             </div>
 
@@ -233,6 +248,9 @@ <h3 class="sideNavHeader">Calendar Menu</h3>
 
                     <ng-container *ngTemplateOutlet="nextPeriodButton">
                     </ng-container>
+
+                    <ng-container *ngTemplateOutlet="addEventInViewButton">
+                    </ng-container>
                 </div>
             </ng-template>
         </mat-toolbar>

src/app/calendar-app/calendar-app.component.spec.ts

@@ -265,6 +265,30 @@ END:VCALENDAR
         expect(events.length).toBe(1, 'events are back on the screen');
     });
 
+    it('should show an add event action in week and day views', () => {
+        spyOn(component, 'addEvent');
+        fixture.detectChanges();
+
+        expect(fixture.debugElement.nativeElement.querySelector('button#addEventInViewButton'))
+            .toBeFalsy('month view already has per-day add event buttons');
+
+        component.setView(component.RunboxCalendarView.Week);
+        fixture.detectChanges();
+        let addEventButton = fixture.debugElement.nativeElement.querySelector('button#addEventInViewButton');
+        expect(addEventButton).toBeTruthy('week view has an add event action');
+
+        addEventButton.click();
+        expect(component.addEvent).toHaveBeenCalledOnceWith(component.viewDate);
+
+        component.setView(component.RunboxCalendarView.Day);
+        fixture.detectChanges();
+        addEventButton = fixture.debugElement.nativeElement.querySelector('button#addEventInViewButton');
+        expect(addEventButton).toBeTruthy('day view has an add event action');
+
+        addEventButton.click();
+        expect(component.addEvent).toHaveBeenCalledWith(component.viewDate);
+    });
+
     it('should display recurring events', () => {
         mockData['events'] = recurringEvents;
         component.calendarservice.syncCaldav(true);

src/app/calendar-app/calendar-app.component.ts

@@ -330,29 +330,31 @@ export class CalendarAppComponent implements OnDestroy {
 
     setView(view: RunboxCalendarView): void {
         this.view = view;
+
+        switch (this.view) {
+            case RunboxCalendarView.Overview: {
+                this.mwlView = null;
+                break;
+            }
+            case RunboxCalendarView.Month: {
+                this.mwlView = CalendarView.Month;
+                break;
+            }
+            case RunboxCalendarView.Week: {
+                this.mwlView = CalendarView.Week;
+                break;
+            }
+            case RunboxCalendarView.Day: {
+                this.mwlView = CalendarView.Day;
+                break;
+            }
+        }
+
         if (this.settings.lastUsedView !== view) {
             this.settings.lastUsedView = this.view;
             this.preferenceService.set(this.prefGroup, 'calendarSettings', this.settings);
-
-            switch (this.view) {
-                case RunboxCalendarView.Overview: {
-                    this.mwlView = null;
-                    break;
-                }
-                case RunboxCalendarView.Month: {
-                    this.mwlView = CalendarView.Month;
-                    break;
-                }
-                case RunboxCalendarView.Week: {
-                    this.mwlView = CalendarView.Week;
-                    break;
-                }
-                case RunboxCalendarView.Day: {
-                    this.mwlView = CalendarView.Day;
-                    break;
-                }
-            }
         }
+        this.cdr.markForCheck();
     }
 
     showAddCalendarDialog(): void {