Getting calendar.fullCalendar is not a function error while using the calendar with a minimal config.

[qburst-hrishikesh]

Im trying to use the ui calendar with a minimal setup

function wrapperController($scope) { $scope.uiConfig = { calendar:{ height: 450, header:{ left: 'title', center: '', right: 'today,prev,next' } } }; $scope.events = [{title: 'Event1',start: '2014-07-19'},{title: 'Event2',start: '2011-07-20'}]; $scope.eventSources = [$scope.events]; }

I'm expecting the calendar to render here but stuck with the error

TypeError: calendar.fullCalendar is not a function

Am I doing anything wrong here, or do I have to add some other configuration? Can anybody please help me out here?

[jmlweb]

Try to install fullcalendar also as a dependency:

npm install --save fullcalendar or bower install --save fullcalendar

[qburst-hrishikesh]

@jmlweb I have tried that also no luck yet? But the UI calendar's dependency is supposed to include the fullCalendar right?

[jmlweb]

@hrishikeshqb In some threads the suggestion is to use jQuery instead of angular.element or calling jQuery before Angular, I don't know if it's your case https://github.com/angular-ui/ui-calendar/issues/267

I wasn't getting fullcalendar dependency installed using npm, so I installed it by hand.

[magx2]

I have the same problem

[magx2]

Also I want to mention that I included fullcalendar

[jklmaynard]

This answer sort of worked for me: I'm creating a calendar with an angular front end and rails back end: so I required both "fullcalendar" and "moment" sprockets in application.js and it seems to have done the trick ~ at least, the error is gone.

//= require jquery //= require angular //= require angular-rails-templates //= require angular-ui-router //= require angular-ui-calendar //= require moment //= require fullcalendar //= require_tree .

[kasjerJanusz]

I'm having similar problem with using angular-ui-calendar, can't make it even work, even this demo app doesn't work.

Main main app.js:

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import uiBootstrap from 'angular-ui-bootstrap';
import cookies from 'angular-cookies';
import ngTranslate from 'angular-translate';
import uiNotification from 'angular-ui-notification';
import sanitize from 'angular-sanitize';
import uiSelect from 'ui-select';
import uiMask from 'angular-ui-mask';

import Common from './common/common';
import Components from './components/components';
import AppComponent from './app.component';

import 'fullcalendar/dist/fullcalendar.js';

import i18n from './common/i18n/i18n.json';

import 'angular-acl/angular-acl.js';
import 'angular-i18n/angular-locale_pl.js';
import 'pdfjs-dist/build/pdf.combined.js';
import 'angular-ui-calendar/src/calendar.js';
import 'bootstrap-ui-datetime-picker/dist/datetime-picker.js';

import 'bootstrap/dist/css/bootstrap.css';
import 'intro.js/introjs.css';
import 'angular-ui-notification/dist/angular-ui-notification.css';
import 'ui-select/dist/select.css';

const app = angular
  .module('app', [
    uiRouter,
    uiBootstrap,
    'ui.bootstrap.datetimepicker',
    'ui.calendar',
    uiMask,
    cookies,
    ngTranslate,
    sanitize,
    uiSelect,
    uiNotification,
    'mm.acl',
    Common.name,
    Components.name
  ])
  .config(($locationProvider) => {
    'ngInject';
    $locationProvider.html5Mode(true).hashPrefix('!');
  })
  .config(($translateProvider) => {
    'ngInject';

    $translateProvider.useLoader('i18nService', {
      url: i18n
    });
  })
  .config((uibDatepickerConfig, uibDatepickerPopupConfig) => {
    'ngInject';

    uibDatepickerConfig.showWeeks = false;
    uibDatepickerConfig.startingDay = 1;
    uibDatepickerPopupConfig.showButtonBar = false;
  })
  .config((uiDatetimePickerConfig) => {
    'ngInject';

    uiDatetimePickerConfig.buttonBar.show = false;
    uiDatetimePickerConfig.html5Types = {
      date: 'yyyy-MM-dd',
      'datetime-local': 'yyyy-MM-ddTHH:mm:ss',
      'month': 'yyyy-MM'
    };
  })
  .config(($uibTooltipProvider) => {
    'ngInject';

    $uibTooltipProvider.options({
      appendToBody: true
    });
  })

  .component('app', AppComponent);

export default app;

Imported fullcalendar as in import 'fullcalendar/dist/fullcalendar.js';, but still having js stacktraces like: TypeError: Object doesn't support property or method 'fullCalendar' or ReferenceError: 'moment' is undefined. What am I missing what I don't realize/see yet?