Fullcalendar.io with ionic

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!!

hi, did you make this work?

thanks

yes… But only with beta11…

Now I’m trying with RC2 without sucess =(

Please let us know if you can make it work again with RC2, I would be interested with your solution :slight_smile:

The only way that I made work on RC2 was copying and paste all the .js in the index.html under the <script src="cordova.js"></script> and using JQuery v2.2.4, moment.js 2.15.2 and FullCalendar v2.5.0 in that order

Hello Victor,

I just started using this plugin today so I’m not an expert but here is what I did to make it work.

  1. npm install angular2-fullcalendar --save
  2. Create a new component : ionic g component full-calendar
  3. In full-calendar.html I inserted :
    <angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar>
  4. In full-calendar.ts :
    import { Component } from ‘@angular/core’;

@Component({
selector: ‘full-calendar’,
templateUrl: ‘full-calendar.html’
})
export class FullCalendarComponent {
calendarOptions:Object = {
height: ‘parent’,
contentHeight: ‘auto’,
fixedWeekCount : false,
defaultDate: ‘2016-09-12’,
editable: true,
eventLimit: true, // allow “more” link when too many events
defaultView: ‘agendaWeek’,
allDaySlot: false,
minTime: ‘06:00:00’,
maxTime: ‘23:00:00’,
header: {
left: ‘’,
center: ‘prev, title, next’,
right: ‘’
},
events: [
{
title: ‘All Day Event’,
start: ‘2016-09-01’
},
{
title: ‘Long Event’,
start: ‘2016-09-07’,
end: ‘2016-09-10’
}]
}
}

Finaly, in the page which needs to use it add : <full-calendar></full-calendar>

Don’t forget to import full-calendar component into app.module.ts

And about the scss, I copied and pasted from node-modules/fullcalendar/dist/fullcalendar.css

1 Like

what path did you import on app.module.ts?

1 Like

For the plugin : import {CalendarComponent} from “angular2-fullcalendar/src/calendar/calendar”;
Then for my custom component : import { FullCalendarComponent } from ‘…/components/full-calendar/full-calendar’;

Hi Antoine,

Glad it helped you !

Actually, I have currently the same issue, so I asked the author here : https://github.com/nekken/ng2-fullcalendar/issues/2
In case you find something, I would be happy to know about it !

Actually, you need to write the following in the calendarOptions object:

  eventClick: (event) => {
    this.nav.push(EventPage, {
      id: event.id
    });
  }

It only works when the function is written with the fat arrow

Seems logic, I’ll try it in few moments !

Damn antoinedupont, it works ! Thanks a lot :smiley:

Haha no problem :wink:

Hi,
I am using Fullcalendar plugin for Mobile app.How to render a pop up on long press of date or event??
Please help me.

Hi,
I am using Fullcalendar plugin for Mobile app.How to render a pop up on long press of date or event??
Please help me.

Hi, I am using angular2-fullcalendar and the calendar is properly invoked but I don’t know why the select callback is not working.

Thanks @victorcarvalhosp and @clementinsarant, this thread really helped me out.

I just wanted to add that you can use the following import statement in the full-calendar.scss file rather than copy and pasting the entire module CSS as suggested above:

full-calendar {
  @import '../../../node_modules/fullcalendar/dist/fullcalendar';
}

Cheers!

1 Like

I keep getting no such file or directory, open ‘/Users/Maitham/Developer/Tuto/Tuto/node_modules/angular2-fullcalendar/src/calendar/calendar.js’ ? can anyone help?

Did you install the module first?

npm install angular2-fullcalendar --save

If so navigate to ‘/Users/Maitham/Developer/Tuto/Tuto/node_modules/angular2-fullcalendar/src/calendar/’ and look for the file you are referencing.

<full-calendar [options]=“calendarOptions”>