PrimeNG (fullcalendar) almost working with Ionic2 (need font help)

I have added primeng to my ionic2 app, and the Schedule (fullcalendar wrapper) is working except for the fonts. Looking for any feedback on my approach so far, and any help with how to get the fonts working.

npm install jquery --save
npm install angular2-moment --save
npm install fullcalendar --save
npm install primeng --save

In app.module.ts:

import * as jQuery from “jquery”
import { MomentModule } from ‘angular2-moment’;
import { ScheduleModule } from ‘primeng/primeng’;
(window).jQuery = (window).$ = jQuery; // without this, the schedule can’t find jQuery (not sure if better way)

and then:

  imports: [
    IonicModule.forRoot(MyApp), MomentModule, ScheduleModule
  ],

app.scss:

@import “node_modules/primeng/resources/primeng”;
@import “node_modules/primeng/resources/themes/omega/theme”;

In my app’s appointment-list.component.html:

<p-schedule [events]=“calendarEvents” [header]=“header” [eventLimit]=“4” [editable]=“true”
(onDayClick)=“handleDayClick($event)” (onEventClick)=“calendarEventClick($event)”>

(where I have the relevant properties/functions in my component’s typescript file, as per the PrimeNG instructions)

This works great except for one thing. The fonts for the Next/Prev buttons are not showing up, and I see console errors that it can’t find the font files:

GET http://localhost:8100/build/fonts/roboto-v15-latin-regular.woff2
(index):1 GET http://localhost:8100/build/fonts/roboto-v15-latin-regular.woff
(index):1 GET http://localhost:8100/build/fonts/roboto-v15-latin-regular.ttf

What is the proper way to reference these files in my ionic app? The files are in the folder: node_modules\primeng\resources\themes\omega\fonts

I know I can manually copy them to a lib folder and manually reference them in my index.html or some such, but that feels clunky. What is the best way to include them?

Thanks!

2 Likes

Check for mimetypes configuration at your server.

I have an issue like that and have solved configuring the IIS (my web server) like this: https://github.com/jvitor83/angular-seed-cli-admin/blob/master/src/web.config

Thanks for the response @jvitor83 . I’m using ionic serve at the moment, so I’m not sure if the IIS config applies at this point

I am trying to do it work but throws “Cannot find name ‘Router’” errors. Using Ionic RC3 and Primeng 1.1.0. Did you have same issue? How did you solve it?

Also I am getting X does not exist does not exist on type ‘Window’ on you fix for jQuery. I solved it writting (window as any).$ = (window as any).jQuery = jQuery; instead.

@Ramonsan You may need to install @angular/router

Try and move the fonts from the original location into www/assets/fonts folder.

Thanks @mark2k. Yeah I got something working with a custom copy.config.js
to copy them to the assets folder. Seems like there should be an easier
way

That was the first thing I tried, but webpack did not build. I just realized that I was installing latest version and getting unmet peer dependencies of other @angular modules. I aligned version of router with other ionic 2 rc3 angular modules and worked :slight_smile:

Hi,

I am trying to do the same with rc4.
I have applied what’s on the first post, but corrected using:

(window as any).$ = (window as any).jQuery = jQuery;

I am still getting an error:
this.schedule.fullCalendar is not a function

Does anyone have found a solution for that (I tried to import fullcalendar but without success)

Thanks!

@Ramonsan FYI - I am a newbie to ionic2.
what are the changes that you did? Can you please elaborate a bit more.

Got it working, was missing:
(window as any).$ = (window as any).fullCalendar = fullCalendar;

I installed router 3.1.1 because I have angular core 2.1.1.

In my package.json:

 "dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@angular/router": "3.1.1",
    "@ionic/storage": "1.1.6",
    "fullcalendar": "3.1.0",
    "ionic-angular": "2.0.0-rc.3",
    "primeng": "1.1.0",
    [...]
  }

I have tried this implementation but I am getting the error :smirk: I have write below about the error please help me.:tired_face:

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 :slight_smile:

Thanks for the help! I am currently trying to get the fullcalendar component to work with Ionic 2. I followed your step by step but I was unable to find the config.js file to edit. I am fairly new to Ionic 2 so I don’t 100% understand the config.js section. Despite this I compiled and when I run I get the error:

Runtime Error
Error in ./CalendarPage class CalendarPage - caused by: this.schedule.fullCalendar is not a function
Stack
TypeError: this.schedule.fullCalendar is not a function
at Schedule.initialize (http://localhost:8100/build/main.js:151257:23)
at Schedule.ngAfterViewChecked (http://localhost:8100/build/main.js:151252:18)
at CompiledTemplate.proxyViewClass.View_CalendarPage0.detectChangesInternal (/AppModule/CalendarPage/component.ngfactory.js:182:33)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:118127:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:118220:44)
at CompiledTemplate.proxyViewClass.View_CalendarPage_Host0.detectChangesInternal (/AppModule/CalendarPage/host.ngfactory.js:29:19)
at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:8100/build/main.js:118127:14)
at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:8100/build/main.js:118220:44)
at ViewRef_.detectChanges (http://localhost:8100/build/main.js:61933:20)
at NavControllerBase._viewAttachToDOM (http://localhost:81

I am missing something?

Thanks,

The copy.config.ts is a default config file for a build task. If you use default, you will not have any file in your source code, the default is at ./node-modules/@ionic/app-scripts/config/. If you want to override it, you simply create another new copy.config.ts in you root folder of your project. Then, copy de default lines from original file, and add your custom lines to file.

This will copy external libraries from source code folder into www build folder every time you do ionic serve (or run, emulate, build).