fullcalendar.io with ionic2

时间:2016-09-13 21:38:03

标签: angular fullcalendar ionic2

我试图在我的angular2项目中使用fullcalendar.io,但它根本不起作用......有人也可以尝试看看我做错了什么?

首先我安装了(我已经在npm安装了一个jquery) npm install fullcalendar

后来我安装了这些类型: typings安装dt~fulccalendar --global --save

在我的calendario.html中,我添加了id =' calendar'

在我的.ts上:

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {CalendarEvent} from '../calendario/calendar-event'
import * as $ from 'jquery'
import * as moment from "moment";

@Component({
templateUrl: 'build/pages/calendario/calendario.html',
})
export class CalendarioPage {

constructor(private navCtrl:NavController) {

}

initiateCalendar(calEvents:CalendarEvent[]):void {
    var calendar: JQuery = $("#calendar");
    calendar.fullCalendar({
        header: {
            left: "month,agendaWeek,agendaDay",
            center: "title",
            right: "today prev,next"
        },
        events: calEvents,
        firstDay: 1,
        weekMode: "fluid",
        dayClick: (date:Date, allDay:boolean, jsEvent:Event, view:FullCalendar.ViewObject) => {
            //this.goToDay(calendar, date, view);
        }
    });
}

goToDay(calendar:JQuery, date:Date, currentView:FullCalendar.ViewObject) {
    if (currentView.name !== "agendaDay") {
        calendar.fullCalendar("changeView", "agendaDay");
    }
    calendar.fullCalendar("gotoDate", date);
}

onPageLoaded(){
    setTimeout(() => {
        var events: CalendarEvent[] = [
            new CalendarEvent(1, "Test Event 1", false, moment(new Date()), moment(new Date())),
            new CalendarEvent(2, "Test All Day Event 1", true, moment(new Date()), moment(new Date()))
        ];
        this.initiateCalendar(events);
    }, 2000);

    /*var me = this;
    $(document).ready(function () {
        //window.setTimeout(function () {
            var events: CalendarEvent[] = [
                new CalendarEvent(1, "Test Event 1", false, moment(new Date()), moment(new Date())),
                new CalendarEvent(2, "Test All Day Event 1", true, moment(new Date()), moment(new Date()))
            ];
            me.initiateCalendar(events);
        //},200);
    });*/
}

}

我根本没有工作,控制台上没有显示任何错误... 如果我使用Chrome开发者工具进行调试,我可以看到' calendar.fullCalendar'是空的......

显然没有加载fullcalendar.js ...有人可以帮忙吗?

谢谢!

0 个答案:

没有答案