Not working with webpack

[MikaAK]

When used with webpack via npm it complains about not finding fullCalendar. This is due to fullCalendar not being a dependency within the package.json. Can this be fixed please for all the people who use npm over bower?

[simon-nguyen]

@MikaAK Have you tried installed 'fullcalendar' package via npm? I'm using webpack too and trying to make the UI Calendar work... but I got 'moment is not defined' error (I've install moment and angularMoment before). Any idea for this?

[MikaAK]

@simon-nguyen yes if you go via that route you must include moment and fullcalendar into scripts-loader

[simon-nguyen]

@MikaAK Thanks for the suggestion. I did npm-install --save script-loader and inside my webpack.config.js I put

require('script!../../../node_modules/moment/moment.js');
require('script!../../../node_modules/fullcalendar/dist/fullcalendar.js');
...
module.exports: {
...
}

Now I've got a new error

> webpack-dev-server.cmd --content-base src/client --history-api-fallback --hot --inline

path-to-app\node_modules\fullcalendar\dist\fullcalendar.js:25
$.fn.fullCalendar = function(options) {
                  ^

TypeError: Cannot set property 'fullCalendar' of undefined
    at path-to-app\node_modules\fullcalendar\dist\fullcalendar.js:25:1
9
    at $.fullCalendar.version (path-to-app\node_modules\fullcalendar\d
ist\fullcalendar.js:12:20)
    at Object.<anonymous> (path-to-app\node_modules\fullcalendar\dist\
fullcalendar.js:17:3)
    at Module._compile (module.js:435:26)
    at Object.Module._extensions..js (module.js:442:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (...app\webpack.config.js:10:1)

Could you help me with it? Much appreciation!

[MikaAK]

@simon-nguyen You must include jquery with script-loader as well. All things to do with this and moment will need to be put through script-loader due to this. It's not super friendly!

[stringbeans]

+1 please add full calendar as an npm dependency

[simon-nguyen]

@MikaAK Thank you so much for your reply... Sadly, I have to move to Angular Bootstrap Calendar, it's more friendly and easy to use for my case.

[aneurysmjs]

npm please, I'm refactoring a big app with webpack and es6, this is not cool to do it, please please, npm npm :)

[MikaAK]

@blackendstudios I've forked the repo and added the nessisary requires if you wanna use that till they support this. https://github.com/MikaAK/ui-calendar. In your package.json put 'angular-ui-calendar': 'mikaak/ui-calendar'

[aneurysmjs]

@MikaAK mmmmm I saw that momment, fullcalendar and jquery are in npm, if I install them, then I would need to make it work just with the ui-calendar? ... why too much trouble to make it compatible with npm, is too much to get it work?

[aneurysmjs]

seriously, too much trouble to make this on npm??? wow

[johankvint]

Have someone got this to work with npm and webpack? Seams no matter what I do I only get "scope.calendar.fullCalendar is not a function".

I am trying to use this in a angular component from angular 1.5

[MikaAK]

@cybercomkvint I forked it and we use the fork successfully at work see Here

[phdesign]

Hi, I have this working happily with webpack, here's my setup.

package.json

"dependencies": {
    ...
    "angular-ui-calendar": "^1.0.2",
    "fullcalendar": "^3.0.0",
    "jquery": "~2.1.4",
    "moment": "~2.15.0",
    ...
}

webpack.config.js

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        "window.jQuery": "jquery",
        "moment": "moment"
    })
]

directive.js

var angular = require('angular');
require('fullcalendar');
require('angular-ui-calendar');

angular
    .module('my-calendar-view', [ 'ui.calendar' ])
    .directive(...)

[rfsbsb]

@phdesign this should be on the official documentation!

[gintsgints]

Acctually this directive should be updated, so it works correctly with webpack.

[wesley100002001]

Using ES6 working as a charm as well

import angular from 'angular';
import fullcalendar from 'fullcalendar';
import uicalendar from 'angular-ui-calendar';

angular.module('calendar-view', ['ui.calendar'])