MOBILE-2795 calendar: Show date dividers

src/addon/calendar/pages/list/list.html

@@ -21,12 +21,21 @@
             </core-empty-box>
 
             <ion-list *ngIf="filteredEvents && filteredEvents.length" no-margin>
-                <a ion-item text-wrap *ngFor="let event of filteredEvents" [title]="event.name" (click)="gotoEvent(event.id)" [class.core-split-item-selected]="event.id == eventId">
+                <ng-container *ngFor="let event of filteredEvents">
-                    <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" item-start class="core-module-icon">
+                    <ion-item-divider *ngIf="event.showDate">
-                    <core-icon *ngIf="event.icon && !event.moduleIcon" [name]="event.icon" item-start></core-icon>
+                        {{ event.timestart * 1000 | coreFormatDate: "strftimedayshort" }}
-                    <h2><core-format-text [text]="event.name"></core-format-text></h2>
+                    </ion-item-divider>
-                    <p>{{ event.timestart | coreToLocaleString }}</p>
+                    <a ion-item text-wrap [title]="event.name" (click)="gotoEvent(event.id)" [class.core-split-item-selected]="event.id == eventId">
-                </a>
+                        <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" item-start class="core-module-icon">
+                        <core-icon *ngIf="event.icon && !event.moduleIcon" [name]="event.icon" item-start></core-icon>
+                        <h2><core-format-text [text]="event.name"></core-format-text></h2>
+                        <p>
+                            {{ event.timestart * 1000 | coreFormatDate: "strftimetime" }}
+                            <span *ngIf="event.timeduration && event.endsSameDay"> - {{ (event.timestart + event.timeduration) * 1000 | coreFormatDate: "strftimetime" }}</span>
+                            <span *ngIf="event.timeduration && !event.endsSameDay"> - {{ (event.timestart + event.timeduration) | coreToLocaleString }}</span>
+                        </p>
+                    </a>
+                </ng-container>
             </ion-list>
 
             <core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreEvents($event)" [error]="loadMoreError"></core-infinite-loading>

src/addon/calendar/pages/list/list.ts

@@ -26,6 +26,7 @@ import { CoreCoursePickerMenuPopoverComponent } from '@components/course-picker-
 import { CoreEventsProvider } from '@providers/events';
 import { CoreAppProvider } from '@providers/app';
 import { CoreSplitViewComponent } from '@components/split-view/split-view';
+import * as moment from 'moment';
 
 /**
  * Page that displays the list of calendar events.
@@ -147,6 +148,10 @@ export class AddonCalendarListPage implements OnDestroy {
             } else {
                 // Sort the events by timestart, they're ordered by id.
                 events.sort((a, b) => {
+                    if (a.timestart == b.timestart) {
+                        return a.timeduration - b.timeduration;
+                    }
+
                     return a.timestart - b.timestart;
                 });
 
@@ -160,6 +165,12 @@ export class AddonCalendarListPage implements OnDestroy {
                     this.events = this.utils.mergeArraysWithoutDuplicates(this.events, events, 'id');
                 }
                 this.filteredEvents = this.getFilteredEvents();
+
+                // Calculate which evemts need to display the date.
+                this.filteredEvents.forEach((event, index): any => {
+                    event.showDate = this.showDate(event, this.filteredEvents[index - 1]);
+                    event.endsSameDay = this.endsSameDay(event);
+                });
                 this.canLoadMore = true;
 
                 // Schedule notifications for the events retrieved (might have new events).
@@ -308,6 +319,40 @@ export class AddonCalendarListPage implements OnDestroy {
         });
     }
 
+    /**
+     * Check date should be shown on event list for the current event.
+     * If date has changed from previous to current event it should be shown.
+     *
+     * @param {any} event       Current event where to show the date.
+     * @param {any} [prevEvent] Previous event where to compare the date with.
+     * @return {boolean}  If date has changed and should be shown.
+     */
+    protected showDate(event: any, prevEvent?: any): boolean {
+        if (!prevEvent) {
+            // First event, show it.
+            return true;
+        }
+
+        // Check if day has changed.
+        return !moment(event.timestart * 1000).isSame(prevEvent.timestart * 1000, 'day');
+    }
+
+    /**
+     * Check if event ends the same date or not.
+     *
+     * @param {any} event Event info.
+     * @return {boolean}  If date has changed and should be shown.
+     */
+    protected endsSameDay(event: any): boolean {
+        if (!event.timeduration) {
+            // No duration.
+            return true;
+        }
+
+        // Check if day has changed.
+        return moment(event.timestart * 1000).isSame((event.timestart + event.timeduration) * 1000, 'day');
+    }
+
     /**
      * Show the context menu.
      *