如何在离子2中实现完整日历

Question

我希望这个完整的日历在离子2中像上面一样。

我安装了离子2的cordova calendaree插件

$ ionic plugin add cordova-plugin-calendar

此代码也

html

<ion-item>
    <ion-label>Date</ion-label>
    <ion-datetime min={{currentDate}}  displayFormat="DD/MM/YYYY" [(ngModel)]="chosenDate"></ion-datetime>
</ion-item>

ts.file

export class InviteDates {
public currentDate: String;
public chosenDate: String;

constructor(public navCtrl: NavController,private platform:Platform) {
  this.currentDate = (new Date()).toISOString();
  this.chosenDate = this.currentDate;
}

Answer 1

Ionic 2中的日历可以使用“ ionic2-calendar ”

来实现

npm install ionic2-calendar --save

然后，使用

在app.module.ts中导入日历

import { NgCalendarModule } from 'ionic2-calendar';

使用以下代码

创建随机事件

    var events = [];
    for (var i = 0; i < 50; i += 1) {
        var date = new Date();
        var eventType = Math.floor(Math.random() * 2);
        var startDay = Math.floor(Math.random() * 90) - 45;
        var endDay = Math.floor(Math.random() * 2) + startDay;
        var startTime;
        var endTime;
        if (eventType === 0) {
            startTime = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + startDay));
            if (endDay === startDay) {
                endDay += 1;
            }
            endTime = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + endDay));
            events.push({
                title: 'All Day - ' + i,
                startTime: startTime,
                endTime: endTime,
                allDay: true
            });
        } else {
            var startMinute = Math.floor(Math.random() * 24 * 60);
            var endMinute = Math.floor(Math.random() * 180) + startMinute;
            startTime = new Date(date.getFullYear(), date.getMonth(), date.getDate() + startDay, 0, date.getMinutes() + startMinute);
            endTime = new Date(date.getFullYear(), date.getMonth(), date.getDate() + endDay, 0, date.getMinutes() + endMinute);
            events.push({
                title: 'Event - ' + i,
                startTime: startTime,
                endTime: endTime,
                allDay: false
            });
        }
    }
    return events;

对于视频参考，请查看YouTube

要实现带事件的日历，请查看CodeExpertz