完成的形象 de

就是这样的。 pic.twitter.com/CvOFjFq2th— げん げんと (@gento34165638) 2019年11月2日

首先

环境如下:
– Ionic4
– 使用Capacitor作为与原生桥接工具
– 采用了名为ionic2-calendar的库来实现日历功能

上次进行了实机测试。
上一篇文章在这里。

Firebase的设置

我会参考这个并继续努力。

安装图书馆。

在项目文件夹内

npm install firebase @angular/fire

我已经成功在项目中引入了Firebase。

在Firebase侧创建项目。

在消息发送方ID下可能添加了应用程序ID。

将Firebase信息添加到Ionic项目中。

将”environment”文件添加进去。

打开 src/environments/environment.ts 文件。

export const environment = {
  production: true,
  firebase: {
   apiKey: "YOUR_API_KEY",
   authDomain: "YOUR_AUTH_DOMAIN",
   databaseURL: "YOUR_DATABASE_URL",
   projectId: "YOUR_PROJECT_ID",
   storageBucket: "YOUR_STORAGE_BUCKET",
   messagingSenderId: "YOUR_SENDER_ID"
   appId: "YOUR_APP_ID"
  }
};

将信息放入名为firebase的变量中。

顺便提一下，默认情况下，创建的环境文件是environment.prod.ts作为生产环境的文件，而environment.ts则是用于开发环境的文件。

将environment信息存储在app.module中。

将app.module.ts文件进行如下更改：

import { NgModule, LOCALE_ID } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

//カレンダー関係
import { NgCalendarModule  } from 'ionic2-calendar';
import { registerLocaleData } from '@angular/common';
import localeJa from '@angular/common/locales/ja';

//Firebaseを利用するためのモジュール
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';

//Firebase設定情報ファイルをインポート
import { environment } from '../environments/environment';

registerLocaleData(localeJa);


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    NgCalendarModule,
    AngularFireModule.initializeApp(environment.firebase, 'myCarendar'),
    AngularFirestoreModule,
    AngularFireAuthModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    NativeStorage,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: LOCALE_ID, useValue: 'ja-JP' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

如果说AngularFireModule的话，那就是Firebase的核心部分。

AngularFirestoreModule是Firebase核心中的一个功能，用于访问数据库Cloud Firestore。

AngularFireAuthModule是用于将来用户认证（登录等）所使用的功能。

//Firebaseを利用するためのモジュール
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';

用这个准备工作已经完成。呼。。

在日历上添加事件。

随便在日历上加一个按钮。

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      {{ viewTitle }}
    </ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="today()">Today</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
<ion-button (click)="addNewEvent()">イベント追加</ion-button>

  <calendar
  [eventSource]="eventSource" 
  [calendarMode]="calendar.mode" 
  [currentDate]="calendar.currentDate"
    (onCurrentDateChanged)="onCurrentDateChanged($event)" 
    (onEventSelected)="onEventSelected($event)" 
    (onTitleChanged)="onViewTitleChanged($event)"
    (onTimeSelected)="onTimeSelected($event)"
     step="30">  
  </calendar>
</ion-content>

编写addNewEvent函数并将事件添加到数据库中。

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  eventSource = [];
  viewTitle;
  selectedDate = new Date();
  calendar = {
    mode: 'month',
    currentDate: new Date(),
    locale: 'ja-JP'
  };

  constructor(
    private db: AngularFirestore,
) { }

  onViewTitleChanged(title) {
    this.viewTitle = title;
  }

  // 選択した日付を取得
  onTimeSelected(ev) {
    this.selectedDate = ev.selectedTime;
  }

  today() {
    this.calendar.currentDate = new Date();
  }

  async onEventSelected() {
    console.log('onEventSelected');
  }

  eventSelected(event) {

  }


  onCurrentDateChanged(event: Date) { }

}

addNewEvent() {
    let start = this.selectedDate;
    let end = this.selectedDate;
    end.setMinutes(end.getMinutes() + 60);

    let event = {
      title: 'イベント' + start.getMinutes(),
      startTime: start,
      endTime: end,
      allDay: false
    };
    console.log(event);
    this.db.collection(`events`).add(event);
  }

当你点击事件添加按钮后，查看Firebase数据库，是否在名为events的集合中存在事件的文档。

如果对“收藏”和“文档”的含义不清楚，请了解Cloud Firestore的数据模型。点击此处了解更多详情。

将事件获取并显示在日历上

在home.page.ts的构造函数中添加以下内容。

 constructor(
    private db: AngularFirestore,
) { 
         this.db.collection(`events`)
          .snapshotChanges()
          .subscribe(colSnap => {
            this.eventSource = [];
            colSnap.forEach(snap => {
              const event: any = snap.payload.doc.data();
              event.id = snap.payload.doc.id;
              event.startTime = event.startTime.toDate();
              event.endTime = event.endTime.toDate();
              this.eventSource.push(event);
            });
          });
 }

暫時這樣是否能在日曆上顯示事件？

最后

从第4天的页面中添加活动。
在第4天的页面中增加活动。
从day4页面添加事件。

如果你感兴趣的话，可以在各个商店进行下载。请随便试用一下。

苹果商店

谷歌应用商店