Hello! I’m trying to use fullcalendar.io on my angular2 project, but it simply don’t work… Someone can try too and see what I’m doing wrong?
First of all I installed(I already had installed moment an jquery by npm)
npm install fullcalendar
later I installed the typings:
typings install dt~fullcalendar --global --save
In my calendario.html I add the div with id=‘calendar’ .
And on my .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);
});*/
}
}
I simply don’t work and no errors are showed on console…
If I debug with Chrome developer tools I can see that ‘calendar.fullCalendar’ is null…
Apparently the fullcalendar.js is not being loaded… Someone can help?
Thanks!!
