• Ionic
  • 通过Ionic 3 和Angular 5构建日历界面

    IonicLois 1年前 968次点击 来自 Ionic

    将事件添加到日历UI
    要将事件添加到日历UI,请打开并再次编辑src / pages / home / home.ts,然后修改并添加此导入。

    import { NavController, AlertController } from ‘ionic-angular’;
    import { Calendar } from ‘@ionic-native/calendar’;
    为保持和填充事件添加这些变量。

    eventList: any;
    selectedEvent: any;
    isSelected: any;
    将日历本机插件注入到构造函数中。

    constructor(private alertCtrl: AlertController,
    public navCtrl: NavController,
    private calendar: Calendar) {}
    添加此功能以加载当月的所有事件。

    loadEventThisMonth() {
    this.eventList = new Array();
    var startDate = new Date(this.date.getFullYear(), this.date.getMonth(), 1);
    var endDate = new Date(this.date.getFullYear(), this.date.getMonth()+1, 0);
    this.calendar.listEventsInRange(startDate, endDate).then(
    (msg) => {
    msg.forEach(item => {
    this.eventList.push(item);
    });
    },
    (err) => {
    console.log(err);
    }
    );
    }
    创建一个函数来检查特定日期的事件。

    checkEvent(day) {
    var hasEvent = false;
    var thisDate1 = this.date.getFullYear()+“-”+(this.date.getMonth()+1)+“-”+day+“ 00:00:00”;
    var thisDate2 = this.date.getFullYear()+“-”+(this.date.getMonth()+1)+“-”+day+“ 23:59:59”;
    this.eventList.forEach(event => {
    if(((event.startDate >= thisDate1) && (event.startDate <= thisDate2)) || ((event.endDate >= thisDate1) && (event.endDate <= thisDate2))) {
    hasEvent = true;
    }
    });
    return hasEvent;
    }
    创建一个显示所选日期事件的函数。

    selectDate(day) {
    this.isSelected = false;
    this.selectedEvent = new Array();
    var thisDate1 = this.date.getFullYear()+“-”+(this.date.getMonth()+1)+“-”+day+“ 00:00:00”;
    var thisDate2 = this.date.getFullYear()+“-”+(this.date.getMonth()+1)+“-”+day+“ 23:59:59”;
    this.eventList.forEach(event => {
    if(((event.startDate >= thisDate1) && (event.startDate <= thisDate2)) || ((event.endDate >= thisDate1) && (event.endDate <= thisDate2))) {
    this.isSelected = true;
    this.selectedEvent.push(event);
    }
    });
    }
    最后,创建一个删除事件的函数。

    deleteEvent(evt) {
    // console.log(new Date(evt.startDate.replace(/\s/, ‘T’)));
    // console.log(new Date(evt.endDate.replace(/\s/, ‘T’)));
    let alert = this.alertCtrl.create({
    title: ‘Confirm Delete’,
    message: ‘Are you sure want to delete this event?’,
    buttons: [
    {
    text: ‘Cancel’,
    role: ‘cancel’,
    handler: () => {
    console.log(‘Cancel clicked’);
    }
    },
    {
    text: ‘Ok’,
    handler: () => {
    this.calendar.deleteEvent(evt.title, evt.location, evt.notes, new Date(evt.startDate.replace(/\s/, ‘T’)), new Date(evt.endDate.replace(/\s/, ‘T’))).then(
    (msg) => {
    console.log(msg);
    this.loadEventThisMonth();
    this.selectDate(new Date(evt.startDate.replace(/\s/, ‘T’)).getDate());
    },
    (err) => {
    console.log(err);
    }
    )
    }
    }
    ]
    });
    alert.present();
    }
    现在,打开并再次编辑src / pages / home / home.html,然后用<ion-content>替换所有标签。




    <ion-col col-2 (click)=“goToLastMonth()”>
    {{currentMonth}} {{currentYear}}
    <ion-col col-2 (click)=“goToNextMonth()”>





    Su
    Mo
    Tu
    We
    Th
    Fr
    Sa


    <ion-col col-1 *ngFor=“let lastDay of daysInLastMonth” class=“last-month” (click)=“goToLastMonth()”>{{lastDay}}
    <ion-col col-1 *ngFor=“let day of daysInThisMonth” (click)=“selectDate(day)”>
    <span class=“currentDate” *ngIf=“currentDate === day; else otherDate”>{{day}}
    <ng-template #otherDate class=“otherDate”>
    {{day}}

    <div class=“event-bullet” *ngIf=“checkEvent(day)”>



    <ion-col col-1 *ngFor=“let nextDay of daysInNextMonth” class=“next-month” (click)=“goToNextMonth()”>{{nextDay}}



    <div class=“selected-event” *ngIf=“isSelected”>

    <ion-item *ngFor=“let se of selectedEvent”>

    <button ion-button clear icon-only (click)=“deleteEvent(se)”>



    {{se.title}}


    {{se.message}}


    Start Date: {{se.startDate}}

    Start Date: {{se.endDate}}





    目前暂无回复
    关于 广告投放
    ©2016 - 2019 V4.1.6 Powered by 北京雏森科技有限公司