0

I am using the ng-fullcalender wrapper for the fullcalendar widget in my angular 5 project. The fullcalendar without the fullcalendar-scheduler plugin works fine. But when I try to extend the calendar with the fullcalendar-scheduler plugin, several 'undefined' strings appear in the title of the widget.

I am importing the fullcalendar-scheduler plugin in the component where I want to use the plugin. I use the ng-fullcalendar component at different locations in my project. Strangely when I import the fullcalendar-scheduler plugin in just one component, the described behavoir appears to every fullcalenar element in the whole project. I've also tried to import the fullcalendar-scheduler plugin in the ".angular-cli.json" in the "scripts" part. But then the chrome console says: "Uncaught TypeError: Cannot read property 'Mixin' of undefined". It also displays "ERROR TypeError: spec.class is not a constructor" which is always shown when the fullcalendar-scheduler plugin is not loaded. I've already read the following post: jQuery fullCalendar displayed undefined on title. But none of their suggestions solves my problem because ng-fullcalendar component is importing the fullcalendar not me. They also propose to include the moment package but, as you can see in my example, this has also no effect.

I've set up my configuration with the described behaviour at stackblitz: https://stackblitz.com/edit/angular-vjydy4.

badhazelnoot
  • 59
  • 5

1 Answers1

1

I've solved the problem (after two days): I suspected that there was an issue loading the fullcalendar. So I created my own wrapper based on the source code of the ng-fullcalendar. With the wrapper in my project I now have full control over loading of the individual js files. Instead of importing fullcalendar

import * as $ from 'jquery';
import 'fullcalendar';

importing only the fullcalendar-scheduler

import * as $ from 'jquery';
import 'fullcalendar-scheduler';

in the wrapper solves the problem.

You also have to put the following in your .angular-cli.json:

 "styles": [
    "styles.scss",
    "../node_modules/fullcalendar-scheduler/dist/scheduler.min.css"
 ],
 "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/moment/min/moment.min.js",
    "../node_modules/fullcalendar-scheduler/node_modules/fullcalendar/dist/fullcalendar.min.js",
    "../node_modules/fullcalendar-scheduler/dist/scheduler.min.js"
 ],

And in your style.css you have to include the css of fullcalendar:

@import "~fullcalendar/dist/fullcalendar.min.css";

Then everything worked on my side.

badhazelnoot
  • 59
  • 5