That is what I was do, step by step.
1.- Install all packages:
npm install jquery --save
npm install fullcalendar --save
npm install primeng --save
npm install @angular/router@3.1.1 --save
2.- Import Schendule in app.module.ts:
import { ScheduleModule } from ‘primeng/primeng’;
import * as jQuery from ‘jquery’;
import * as Moment from ‘moment’;
(window as any).$ = (window as any).jQuery = jQuery;
(window as any).moment = Moment;
@NgModule({
declarations: [...],
imports: [..., ScheduleModule],
bootstrap: [IonicApp],
entryComponents: [...],
providers: [...]
})
export class AppModule { }
3.- Add script tag for libs in index.html (order matters):
...
<script src="build/main.js"></script>
<script src="fullcalendar/jquery.min.js"></script>
<script src="fullcalendar/moment.min.js"></script>
<script src="fullcalendar/fullcalendar.min.js"></script>
4.- Create a copy.config.js file to copy js and assets files:
OLD VERSION (Pre ionic-app-scripts 0.0.47):
module.exports = {
include: [
{
src: '{{SRC}}/assets/',
dest: '{{WWW}}/assets/'
},
{
src: '{{SRC}}/index.html',
dest: '{{WWW}}/index.html'
},
{
src: '{{SRC}}/manifest.json',
dest: '{{WWW}}/manifest.json'
},
{
src: '{{SRC}}/service-worker.js',
dest: '{{WWW}}/service-worker.js'
},
{
src: 'node_modules/ionic-angular/polyfills/polyfills.js',
dest: '{{BUILD}}/polyfills.js'
},
{
src: 'node_modules/ionic-angular/fonts/',
dest: '{{WWW}}/assets/fonts/'
},
{
src: 'node_modules/primeng/resources/themes/omega/fonts/',
dest: '{{WWW}}/assets/fonts/'
},
{
src: 'node_modules/primeng/resources/themes/omega/images/',
dest: '{{WWW}}/assets/images/'
},
{
src: 'node_modules/jquery/dist/jquery.min.js',
dest: '{{WWW}}/fullcalendar/jquery.min.js'
},
{
src: 'node_modules/moment/min/moment.min.js',
dest: '{{WWW}}/fullcalendar/moment.min.js'
},
{
src: 'node_modules/fullcalendar/dist/fullcalendar.min.js',
dest: '{{WWW}}/fullcalendar/fullcalendar.min.js'
}
]
};
NEW VERSION (ionic-app-scripts 0.0.47+):
module.exports = {
copyAssets: {
src: ['{{SRC}}/assets/**/*'],
dest: '{{WWW}}/assets'
},
copyIndexContent: {
src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'],
dest: '{{WWW}}'
},
copyFonts: {
src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
dest: '{{WWW}}/assets/fonts'
},
copyPolyfills: {
src: ['{{ROOT}}/node_modules/ionic-angular/polyfills/polyfills.js'],
dest: '{{BUILD}}'
},
copySwToolbox: {
src: ['{{ROOT}}/node_modules/sw-toolbox/sw-toolbox.js'],
dest: '{{BUILD}}'
},
copyCustomFonts: {
src: ['{{ROOT}}/node_modules/primeng/resources/themes/omega/fonts/**/*'],
dest: '{{WWW}}/assets/fonts'
},
copyCustomImages: {
src: ['{{ROOT}}/node_modules/primeng/resources/themes/omega/images/**/*'],
dest: '{{WWW}}/assets/images'
},
copyFullcalendarLibs: {
src: ['{{ROOT}}/node_modules/jquery/dist/jquery.min.js', '{{ROOT}}/node_modules/moment/min/moment.min.js', '{{ROOT}}/node_modules/fullcalendar/dist/fullcalendar.min.js'],
dest: '{{WWW}}/fullcalendar'
}
}
5.- Create a calendar page:
ionic g page Calendar
6.- Edit pages/calendar/calendar.scss:
@import "node_modules/fullcalendar/dist/fullcalendar";
@import "node_modules/primeng/resources/primeng";
@import "node_modules/primeng/resources/themes/omega/theme";
7.- Edit pages/calendar/calendar.html:
...
<ion-content padding>
<p-schedule [events]="events" [header]="header" [eventLimit]="4" [editable]="true" (onDayClick)="handleDayClick($event)" (onEventClick)="handleEventClick($event)"></p-schedule>
</ion-content>
...
8.- Edit pages/calendar/calendar.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-calendar',
templateUrl: 'calendar.html'
})
export class CalendarPage {
events: any[];
header: any;
constructor(public navCtrl: NavController) {
this.header = {
left: 'title',
center: '',
right: 'basicDay,month prev,today,next'
};
this.events = [
{
"title": "All Day Event",
"start": "2016-12-01"
},
{
"title": "Long Event",
"start": "2016-12-07",
"end": "2016-12-10"
},
{
"title": "Repeating Event",
"start": "2016-12-09T16:00:00"
},
{
"title": "Repeating Event",
"start": "2016-12-16T16:00:00"
},
{
"title": "Conference",
"start": "2016-12-11",
"end": "2016-12-13"
}
];
}
ionViewDidLoad() {
}
handleDayClick(event) {
console.log(event);
}
handleEventClick(event) {
console.log('event');
}
}
And you got a nice calendar schedule