Show Schedule for Multiple Days

Author: clevertension

config.xml

@@ -83,6 +83,6 @@
     <plugin name="cordova-plugin-ionic-webview" spec="2.0.0-beta.1" />
     <plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
     <plugin name="cordova-plugin-ionic-keyboard" spec="^2.1.2" />
-    <engine name="ios" spec="^4.5.5" />
     <engine name="android" spec="7.0.0" />
+    <engine name="ios" spec="~4.5.5" />
 </widget>

package-lock.json

@@ -45,7 +45,9 @@
     "rxjs": "6.3.3",
     "sw-toolbox": "3.6.0",
     "tslib": "^1.9.0",
-    "zone.js": "^0.8.26"
+    "zone.js": "^0.8.26",
+    "ion2-calendar": "^3.0.0-rc.0",
+    "moment": "^2.24.0"
   },
   "devDependencies": {
     "@angular-devkit/architect": "0.11.0",

package.json

@@ -24,6 +24,10 @@
     <ion-searchbar [(ngModel)]="queryText" (ionChange)="updateSchedule()" placeholder="Search"></ion-searchbar>
   </ion-toolbar>
 </ion-header>
+<ion-content>
+  <ion-calendar [(ngModel)]="selectDate" (change)="changeDay($event)" [format]="'YYYY-MM-DD'" [options]="calOptions">
+  </ion-calendar>
+</ion-content>
 <ion-content>
   <ion-list #scheduleList [hidden]="shownSessions === 0">
     <ion-item-group *ngFor="let group of groups" [hidden]="group.hide">
@@ -33,7 +37,8 @@
         </ion-label>
       </ion-item-divider>
 
-      <ion-item-sliding *ngFor="let session of group.sessions" #slidingItem [attr.track]="session.tracks[0] | lowercase" [hidden]="session.hide">
+      <ion-item-sliding *ngFor="let session of group.sessions" #slidingItem [attr.track]="session.tracks[0] | lowercase"
+        [hidden]="session.hide">
         <ion-item routerLink="/app/tabs/schedule/session/{{session.id}}">
           <ion-label>
             <h3>{{session.name}}</h3>
@@ -59,7 +64,9 @@ <h3>{{session.name}}</h3>
   </ion-list-header>
 
   <ion-fab slot="fixed" vertical="bottom" horizontal="end" #fab>
-    <ion-fab-button><ion-icon name="share"></ion-icon></ion-fab-button>
+    <ion-fab-button>
+      <ion-icon name="share"></ion-icon>
+    </ion-fab-button>
     <ion-fab-list side="top">
       <ion-fab-button color="vimeo" (click)="openSocial('Vimeo', fab)">
         <ion-icon name="logo-vimeo"></ion-icon>

src/app/pages/schedule/schedule.html

@@ -6,13 +6,15 @@ import { IonicModule } from '@ionic/angular';
 import { SchedulePage } from './schedule';
 import { ScheduleFilterPage } from '../schedule-filter/schedule-filter';
 import { SchedulePageRoutingModule } from './schedule-routing.module';
+import { CalendarModule } from 'ion2-calendar';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    SchedulePageRoutingModule
+    SchedulePageRoutingModule,
+    CalendarModule
   ],
   declarations: [
     SchedulePage,

src/app/pages/schedule/schedule.module.ts

@@ -5,6 +5,9 @@ import { AlertController, IonList, LoadingController, ModalController, ToastCont
 import { ScheduleFilterPage } from '../schedule-filter/schedule-filter';
 import { ConferenceData } from '../../providers/conference-data';
 import { UserData } from '../../providers/user-data';
+import { map } from 'rxjs/operators';
+import { CalendarComponentOptions, DayConfig, DefaultDate } from 'ion2-calendar';
+import * as moment from 'moment';
 
 @Component({
   selector: 'page-schedule',
@@ -15,14 +18,18 @@ export class SchedulePage implements OnInit {
   // Gets a reference to the list element
   @ViewChild('scheduleList') scheduleList: IonList;
 
-  dayIndex = 0;
   queryText = '';
   segment = 'all';
   excludeTracks: any = [];
   shownSessions: any = [];
   groups: any = [];
   confDate: string;
-
+  selectDate: string;
+  daysConfig: DayConfig[] = [];
+  calOptions: CalendarComponentOptions = {
+    from: 1293683278, // the start unix timestamp
+    daysConfig: this.daysConfig
+  };
   constructor(
     public alertCtrl: AlertController,
     public confData: ConferenceData,
@@ -35,16 +42,33 @@ export class SchedulePage implements OnInit {
 
   ngOnInit() {
     // this.app.setTitle('Schedule');
-    this.updateSchedule();
+    this.findFirstSchedueDay();
+  }
+
+  findFirstSchedueDay() {
+    this.confData.load().pipe().subscribe((data: any) => {
+      this.selectDate = data.schedule[0].date;
+      data.schedule.forEach((v) => {
+        this.daysConfig.push({
+          date: moment(v.date, 'YYYY-MM-DD').toDate(),
+          marked: true
+        });
+      });
+      this.updateSchedule();
+    });
+  }
+
+  changeDay($event) {
+    this.updateSchedule($event);
   }
 
-  updateSchedule() {
+  updateSchedule(date: string = this.selectDate) {
     // Close any open sliding items when the schedule updates
     if (this.scheduleList) {
       this.scheduleList.closeSlidingItems();
     }
 
-    this.confData.getTimeline(this.dayIndex, this.queryText, this.excludeTracks, this.segment).subscribe((data: any) => {
+    this.confData.getTimeline(date, this.queryText, this.excludeTracks, this.segment).subscribe((data: any) => {
       this.shownSessions = data.shownSessions;
       this.groups = data.groups;
     });

src/app/pages/schedule/schedule.ts

@@ -65,14 +65,21 @@ export class ConferenceData {
   }
 
   getTimeline(
-    dayIndex: number,
+    selectDate: string,
     queryText = '',
     excludeTracks: any[] = [],
     segment = 'all'
   ) {
     return this.load().pipe(
       map((data: any) => {
-        const day = data.schedule[dayIndex];
+        let day = data.schedule.filter((scheduleEntity: any) => {
+          return scheduleEntity.date === selectDate;
+        })[0];
+        if (!day) {
+          day = {};
+          day.shownSessions = 0;
+          return day;
+        }
         day.shownSessions = 0;
 
         queryText = queryText.toLowerCase().replace(/,|\.|-/g, ' ');