MOBILE-3021 calendar: Add a button to view current month or day

src/addon/calendar/components/calendar/addon-calendar-calendar.html

@@ -1,3 +1,11 @@
+
+<!-- Add buttons to the nav bar. -->
+<core-navbar-buttons end>
+    <button [hidden]="!canNavigate || isCurrentMonth || !displayNavButtons" ion-button icon-only clear (click)="goToCurrentMonth()">
+        <core-icon  name="fa-calendar-times-o"></core-icon>
+    </button>
+</core-navbar-buttons>
+
 <core-loading [hideUntil]="loaded" class="core-loading-center">
     <!-- Period name and arrows to navigate. -->
     <ion-grid padding-top>

src/addon/calendar/components/calendar/calendar.ts

@@ -37,6 +37,7 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
     @Input() courseId: number | string;
     @Input() categoryId: number | string; // Category ID the course belongs to.
     @Input() canNavigate?: string | boolean; // Whether to include arrows to change the month. Defaults to true.
+    @Input() displayNavButtons?: string | boolean; // Whether to display nav buttons created by this component. Defaults to true.
     @Output() onEventClicked = new EventEmitter<number>();
     @Output() onDayClicked = new EventEmitter<{day: number, month: number, year: number}>();
 
@@ -45,6 +46,7 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
     weeks: any[];
     loaded = false;
     timeFormat: string;
+    isCurrentMonth: boolean;
 
     protected year: number;
     protected month: number;
@@ -106,7 +108,8 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
 
         this.year = this.initialYear ? Number(this.initialYear) : now.getFullYear();
         this.month = this.initialMonth ? Number(this.initialMonth) : now.getMonth() + 1;
-        this.canNavigate = typeof this.canNavigate == 'undefined' ? true : this.utils.isTrueOrOne(this.canNavigate);
+
+        this.calculateIsCurrentMonth();
 
         this.fetchData();
     }
@@ -115,6 +118,9 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
      * Detect changes on input properties.
      */
     ngOnChanges(changes: {[name: string]: SimpleChange}): void {
+        this.canNavigate = typeof this.canNavigate == 'undefined' ? true : this.utils.isTrueOrOne(this.canNavigate);
+        this.displayNavButtons = typeof this.displayNavButtons == 'undefined' ? true :
+                this.utils.isTrueOrOne(this.displayNavButtons);
 
         if ((changes.courseId || changes.categoryId) && this.weeks) {
             this.filterEvents();
@@ -274,6 +280,7 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
             this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
             this.decreaseMonth();
         }).finally(() => {
+            this.calculateIsCurrentMonth();
             this.loaded = true;
         });
     }
@@ -290,6 +297,7 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
             this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
             this.increaseMonth();
         }).finally(() => {
+            this.calculateIsCurrentMonth();
             this.loaded = true;
         });
     }
@@ -312,6 +320,39 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
         this.onDayClicked.emit({day: day, month: this.month, year: this.year});
     }
 
+    /**
+     * Check if user is viewing the current month.
+     */
+    calculateIsCurrentMonth(): void {
+        const now = new Date();
+
+        this.isCurrentMonth = this.year == now.getFullYear() && this.month == now.getMonth() + 1;
+    }
+
+    /**
+     * Go to current month.
+     */
+    goToCurrentMonth(): void {
+        const now = new Date(),
+            initialMonth = this.month,
+            initialYear = this.year;
+
+        this.month = now.getMonth() + 1;
+        this.year = now.getFullYear();
+
+        this.loaded = false;
+
+        this.fetchEvents().then(() => {
+            this.isCurrentMonth = true;
+        }).catch((error) => {
+            this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
+            this.year = initialYear;
+            this.month = initialMonth;
+        }).finally(() => {
+            this.loaded = true;
+        });
+    }
+
     /**
      * Decrease the current month.
      */

src/addon/calendar/pages/day/day.html

@@ -5,6 +5,9 @@
             <button *ngIf="courses && courses.length" ion-button icon-only (click)="openCourseFilter($event)" [attr.aria-label]="'core.courses.filter' | translate">
                 <ion-icon name="funnel"></ion-icon>
             </button>
+            <button *ngIf="!isCurrentDay" ion-button icon-only clear (click)="goToCurrentDay()">
+                <core-icon name="fa-calendar-times-o"></core-icon>
+            </button>
             <core-context-menu>
                 <core-context-menu-item [hidden]="!loaded || !hasOffline || !isOnline"  [priority]="400" [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(null, $event, true)" [iconAction]="syncIcon" [closeOnClick]="false"></core-context-menu-item>
             </core-context-menu>

src/addon/calendar/pages/day/day.ts

@@ -73,6 +73,7 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
     hasOffline = false;
     isOnline = false;
     syncIcon: string;
+    isCurrentDay: boolean;
 
     constructor(localNotificationsProvider: CoreLocalNotificationsProvider,
             navParams: NavParams,
@@ -196,7 +197,8 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
      * View loaded.
      */
     ngOnInit(): void {
-        this.currentMoment = moment().year(this.year).month(this.month - 1).date(this.day);
+        this.calculateCurrentMoment();
+        this.calculateIsCurrentDay();
 
         this.fetchData(true, false);
     }
@@ -533,6 +535,52 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
         this.navCtrl.push('AddonCalendarEditEventPage', params);
     }
 
+    /**
+     * Calculate current moment.
+     */
+    calculateCurrentMoment(): void {
+        this.currentMoment = moment().year(this.year).month(this.month - 1).date(this.day);
+    }
+
+    /**
+     * Check if user is viewing the current day.
+     */
+    calculateIsCurrentDay(): void {
+        const now = new Date();
+
+        this.isCurrentDay = this.year == now.getFullYear() && this.month == now.getMonth() + 1 && this.day == now.getDate();
+    }
+
+    /**
+     * Go to current day.
+     */
+    goToCurrentDay(): void {
+        const now = new Date(),
+            initialDay = this.day,
+            initialMonth = this.month,
+            initialYear = this.year;
+
+        this.day = now.getDate();
+        this.month = now.getMonth() + 1;
+        this.year = now.getFullYear();
+        this.calculateCurrentMoment();
+
+        this.loaded = false;
+
+        this.fetchEvents().then(() => {
+            this.isCurrentDay = true;
+        }).catch((error) => {
+            this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
+
+            this.year = initialYear;
+            this.month = initialMonth;
+            this.day = initialDay;
+            this.calculateCurrentMoment();
+        }).finally(() => {
+            this.loaded = true;
+        });
+    }
+
     /**
      * Load next month.
      */
@@ -545,6 +593,7 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
             this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
             this.decreaseDay();
         }).finally(() => {
+            this.calculateIsCurrentDay();
             this.loaded = true;
         });
     }
@@ -561,6 +610,7 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
             this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
             this.increaseDay();
         }).finally(() => {
+            this.calculateIsCurrentDay();
             this.loaded = true;
         });
     }

src/addon/calendar/pages/index/index.html

@@ -6,7 +6,7 @@
                 <ion-icon name="list"></ion-icon>
             </button>
             <button *ngIf="!showCalendar" ion-button icon-only (click)="toggleDisplay()" [attr.aria-label]="'addon.calendar.monthlyview' | translate">
-                <ion-icon name="calendar"></ion-icon>
+                <core-icon name="fa-calendar-o"></core-icon>
             </button>
             <button *ngIf="courses && courses.length" ion-button icon-only (click)="openCourseFilter($event)" [attr.aria-label]="'core.courses.filter' | translate">
                 <ion-icon name="funnel"></ion-icon>
@@ -28,7 +28,7 @@
         <ion-icon name="warning"></ion-icon> {{ 'core.hasdatatosync' | translate:{$a: 'addon.calendar.calendar' | translate} }}
     </ion-card>
 
-    <addon-calendar-calendar [hidden]="!showCalendar" [initialYear]="year" [initialMonth]="month" [courseId]="courseId" [categoryId]="categoryId" (onEventClicked)="gotoEvent($event)" (onDayClicked)="gotoDay($event)"></addon-calendar-calendar>
+    <addon-calendar-calendar [hidden]="!showCalendar" [initialYear]="year" [initialMonth]="month" [courseId]="courseId" [categoryId]="categoryId" [displayNavButtons]="showCalendar" (onEventClicked)="gotoEvent($event)" (onDayClicked)="gotoDay($event)"></addon-calendar-calendar>
 
     <addon-calendar-upcoming-events *ngIf="loadUpcoming" [hidden]="showCalendar" [courseId]="courseId" [categoryId]="categoryId" (onEventClicked)="gotoEvent($event)"></addon-calendar-upcoming-events>