如何实现离子2
问题描述:
完整的日历我想在离子2像一个高于这个完整的日历。
我安装科尔多瓦calendaree插件离子2
$ 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;
}
答
日历在离子2可以成就我们荷兰国际集团 “ionic2日历”
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;
For Video reference看看YouTube
与事件日历的实现看看CodeExpertz
什么是你所得到的错误?什么是问题? – n00b
我想像上面的图像像完整的日历... –
@ n00b我没有得到错误,但我得到这样的离子滚动日历:https://ionicframework.com/docs/v2/components/#datetime –