nekken / ng2-fullcalendar Goto Github PK

could somebody help to fix issue. suddenly project compile error:

ERROR in Error: Metadata version mismatch for module node_modules/ap-angular2-fullcalendar/index.d.ts, found version 4, expected 3, resolving symbol SystemModule in
src/app/system/system.module.ts, resolving symbol SystemModule in /src/app/system/system.module.ts

cli: 1.4.1
node: 6.9.1

package.json "ap-angular2-fullcalendar": "^1.3.5", how can I fix that?

Hello,
I'm facing a problem while using this fullcalender in angular 2.
I followed same steps and got
EXCEPTION: Cannot read property 'length' of null
Here in my ts file
`import {Component, OnInit,ViewEncapsulation} from '@angular/core';
import {coreService} from './../../services/core.service';
import {CalendarComponent} from "angular2-fullcalendar/src/calendar/calendar";
declare let jquery: any;
declare let moment: any;
@component({
templateUrl: './events.html',
styleUrls: ['./../../../assets/calender/fullcalender.css'],
encapsulation: ViewEncapsulation.None,
providers: [coreService, CalendarComponent]
})
export class EventsComponent implements OnInit {
calendarOptions:Object = {
height: 'parent',
fixedWeekCount: false,
defaultDate: '2016-09-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2016-09-01'
},
{
title: 'Long Event',
start: '2016-09-07',
end: '2016-09-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-09-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2016-09-16T16:00:00'
},
{
title: 'Conference',
start: '2016-09-11',
end: '2016-09-13'
},
{
title: 'Meeting',
start: '2016-09-12T10:30:00',
end: '2016-09-12T12:30:00'
},
{
title: 'Lunch',
start: '2016-09-12T12:00:00'
},
{
title: 'Meeting',
start: '2016-09-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2016-09-12T17:30:00'
},
{
title: 'Dinner',
start: '2016-09-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2016-09-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2016-09-28'
}
]
};

constructor(protected coreService: coreService) {
    this.coreService.sendRequest("events/getEvents").subscribe(res=> {
        // this.calendarOptions.events = res.list;
    });
}
ngOnInit() {
    require('./../../../assets/calender/moment.min');
    require('./../../../assets/calender/fullcalender.min');
}

}
Here, I'm simply using events array that is given in the documentation but still it is not working. I have to use json array that is coming from another file in json format. I also changed the code like this : public calendarOptions = {
// code //
}`
then i got the error
EXCEPTION: Cannot read property 'each' of null

Here is my module
`import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {EventsComponent} from './../../components/events';
import {CalendarComponent} from "angular2-fullcalendar/src/calendar/calendar";

@NgModule({
imports: [
SharedModule,
RouterModule.forChild([
{
path: '', component: EventsComponent
}
]),

],
declarations: [EventsComponent,CalendarComponent]

})
export class EventsModule {

}
Here is my tsconfig.json file{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
}
}
Here is my package.json file{
"name": "dep",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint "src/**/*.ts"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "~2.1.0",
"@angular/compiler": "~2.1.0",
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
"@angular/platform-browser": "~2.1.0",
"@angular/platform-browser-dynamic": "~2.1.0",
"@angular/router": "~3.1.0",
"angular-calendar": "^0.7.2",
"angular2-fullcalendar": "^1.1.1",
"@types/jquery": "^2.0.34",
"@types/moment": "^2.11.29",
"angular2-modal": "^2.0.2",
"core-js": "^2.4.1",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"@types/jasmine": "^2.2.30",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.19-3",
"codelyzer": "1.0.0-beta.1",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "~2.0.3",
"webdriver-manager": "10.2.5"
}`

Hi guys,

thank you very much for this component!
Is it possibile to fix this small error that causes a warning during compilation?

WARNING in ./~/angular2-fullcalendar/src/calendar/calendar.ts
[44, 5]: Switch statement should include a 'default' case

It would be really appreciated.

Thank you very mush

Isaia

I have this bit of code in my component, the dropAccept class is working but drop event is not.

calendarOptions:Object = {
        //height: 'parent',
        defaultView: 'agendaDay',
        fixedWeekCount : false,
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        droppable: true, // this allows things to be dropped onto the calendar !!!
        dropAccept: '.list-group-item.mp-item-media',
        drop: (date, jsEvent, ui, resourceId ) => {
          console.log("Hi");
        }
      
      }; 

Thanks

Hi - a great piece of work. I have this loading in Angular 2 (in an Ionic2 web page) and can adjust the options nicely. However, how do I add /remove events and generally access the calendar? With angular1 you reference the calendar with the following type of syntax:

$('#cal').fullCalendar('action',data)..
where cal refers to the id='cal' in the HTML (in the DOM).

What is the equivalent for referencing the calendar here? I have used
<angular2-fullcalendar [options]="calendarOptions">
as per your documentation which instantiates it nicely... but I don't know how then to access the instance. I.e. I need to knwo the syntax to do the equivalent of $('#cal').fullCalendar('action',data)..
Thanks
Chris

Hi nekken,

im get this error. Im using Angular cli and Follow all your instructions. What can i do to wolve this issue.

Uncaught TypeError: Cannot set property 'fullCalendar' of undefined
at Object. (fullcalendar.js:28)
at $.fullCalendar.version (fullcalendar.js:9)
at Object. (fullcalendar.js:17)
at webpack_require (bootstrap 97f1a6f…:52)
at Object. (vendor.bundle.js:100441)
at webpack_require (bootstrap 97f1a6f…:52)
at Object.549 (main.ts:12)
at webpack_require (bootstrap 97f1a6f…:52)
at Object.555 (login.component.ts:16)
at webpack_require (bootstrap 97f1a6f…:52)
at Object.426 (src async:7)
at webpack_require (bootstrap 97f1a6f…:52)
at Object.811 (.$:7)
at webpack_require (bootstrap 97f1a6f…:52)
at webpackJsonpCallback (bootstrap 97f1a6f…:23)
(anonymous) @ fullcalendar.js:28
$.fullCalendar.version @ fullcalendar.js:9
(anonymous) @ fullcalendar.js:17
webpack_require @ bootstrap 97f1a6f…:52
(anonymous) @ vendor.bundle.js:100441
webpack_require @ bootstrap 97f1a6f…:52
549 @ main.ts:12
webpack_require @ bootstrap 97f1a6f…:52
555 @ login.component.ts:16
webpack_require @ bootstrap 97f1a6f…:52
426 @ src async:7
webpack_require @ bootstrap 97f1a6f…:52
811 @ .$:7
webpack_require @ bootstrap 97f1a6f…:52
webpackJsonpCallback @ bootstrap 97f1a6f…:23
(anonymous) @ main.bundle.js:1

I followed all the steps but the table does not seem to show up. When I inspect the element, it shows that every row has height 0...

When scrolling up and down, the entire view is scrolled.
In the original plugin, the title and "all-day" sections are not scrolling.
This behaviour has a direct impact on the 'scrollTime' option, which does not work.
Can you experience the same issue?

@nekken
Thank you for your great work.
I have a question about angular2-fullcalendar.
Is there a possibility to adjust the

locale: to 'de'

and if so how.

Thank you for your help.

Greetings from Germany

Kai

I'm getting a compile error with Angular CLI AOT:

[0] ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported.
Consider replacing the function or lambda with a reference to an exported function,
resolving symbol Injectable in .../node_modules/ap-angular2-fullcalendar/node_modules/@angular/core/src/di/metadata.d.ts,
resolving symbol OpaqueToken in .../node_modules/ap-angular2-fullcalendar/node_modules/@angular/core/src/di/opaque_token.d.ts,
resolving symbol OpaqueToken in .../node_modules/ap-angular2-fullcalendar/node_modules/@angular/core/src/di/opaque_token.d.ts

I found this which might be relevant: angular/angular-cli#3707, and this might present some solutions: https://medium.com/@isaacplmann/making-your-angular-2-library-statically-analyzable-for-aot-e1c6f3ebedd5#.ef2zp48wa

I was previously using the ng2-fullcalendar, but then changed it to ap-ng2-fullcalendar, then started getting this isssue.

I am getting above error? Am I suppose to do some setup in systemjs.config.js?

Scheduler doesn't work, and it also not included...
check out official page, they have files to download
https://fullcalendar.io/scheduler/download/

When I compile in development (ng build) the project is compiled without errors.

But when I compile in production mode (ng build --prod) the following error is displayed:

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in C:/Workspaces/ANGULAR/controle/node_modules/angular2-fullcalendar/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in C:/Workspaces/ANGULAR/controle/node_modules/angular2-fullcalendar/node_modules/@angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in C:/Workspaces/ANGULAR/controle/node_modules/angular2-fullcalendar/node_modules/@angular/core/src/di/opaque_token.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\Workspaces\ANGULAR\controle\src'
@ ./src/main.ts 6:29-76
@ multi ./src/main.ts

If the dependency angular2-fullcalendar is removed, the project compiles into production without errors.

Here's the log:

C:\Users\Zhant\Documents\Angular2\awam>ng build --aot --deploy-url awam/
Hash: 335a50cc5a921f034480
Time: 4988ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 157 kB {5} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 224 kB {5} [initial] [rendered]
chunk    {2} scripts.bundle.js, scripts.bundle.js.map (scripts) 163 kB {5} [initial] [rendered]
chunk    {3} main.bundle.js, main.bundle.js.map (main) 1.1 kB {4} [initial] [rendered]
chunk    {4} vendor.bundle.js, vendor.bundle.js.map (vendor) 813 kB [initial] [rendered]
chunk    {5} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported.
Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in 
C:/Users/Zhant/Documents/Angular2/awam/node_modules/angular2-fullcalendar/node_modules/@angular/core/src/di/metadata.d.ts, 
resolving symbol OpaqueToken in C:/Users/Zhant/Documents/Angular2/awam/node_modules/angular2-fullcalendar/node_modules/@angular/core/src/di/opaque_token.d.ts, 
resolving symbol OpaqueToken in C:/Users/Zhant/Documents/Angular2/awam/node_modules/angular2-fullcalendar/node_modules/@angular/core/src/di/opaque_token.d.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in 'C:\Users\Zhant\Documents\Angular2\awam\src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts

Hi,

I've got the Calendar up and running in Ionic 3 and it works great, I'm trying to use custom buttons for the next/prev events but I'm running into an issue...

@ViewChild('calendar') myCalendar: CalendarComponent;
myCalendar.fullCalendar('prev');

@ViewChild('calendar', { read: ElementRef }) myCalendar: ElementRef;
myCalendar.nativeElement.fullCalendar('prev');

Cannot read property 'fullCalendar' of undefined

any help appreciated.

/angular2-fullcalendar/src/calendar/calendar
return 404 not found error

Hello, I've installed this module according to npm instructions, I have fickered a lot with it to try to get it work without luck. But I did find a very interesting thing.

I used this with .NET Core, and webpack hot replacement. And if I do all the changes and I let hot replacment get injected to the site ng2-fullcalendar works fine, but once I refresh, I get this ugly exception.

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: TypeError: Cannot set property 'fullCalendar' of undefined
at C:\Users\Kai\Documents\Projects\aspnetcoreSpa\node_modules\fullcalendar\dist\fullcalendar.js:28:19
at $.fullCalendar.version (C:\Users\Kai\Documents\Projects\aspnetcoreSpa\node_modules\fullcalendar\dist\fullcalendar.js:12:20)
at Object. (C:\Users\Kai\Documents\Projects\aspnetcoreSpa\node_modules\fullcalendar\dist\fullcalendar.js:17:3)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (C:\Users\Kai\Documents\Projects\aspnetcoreSpa\node_modules\angular2-fullcalendar\src\calendar\calendar.js:13:1)
MoveNext

Im using angular/cli 1.2.3 ..
In my index.html I put

but it does not load css file

Hello guys,

As you've written into the doc, I created a new component that has '<angular2-fullcalendar [options]="calendarOptions">' in the template.

Then I put my calendarOptions during the ngAfterViewInit(). My events display well.
Now, I added '@output('change') valueChange: EventEmitter = new EventEmitter();' into my component because when eventClick or dayClick are triggered, I want to do a this.valueChange.emit({value: this.eventOut}). (because after that, I want to do a this.nav.push or something from my current page)

But unfortunately, it says "cannot read emit of undefined". Maybe I'm wrong but what I understand is that this method is not called from my component but into $('angular2-fullcalendar') so that it can't find my valueChange variable.

Now, my question is "What is the best practice to do it correctly ?".

The last release of angular 4 has a running problem "Error: Uncaught (in promise): Error: Unexpected value 'CalendarComponent' declared by the module "

Current Angular Version used on project 4.1.3 and Angular CLI 1.1.0

I need to get events from server, there after i can update my calendar. How may i proceed from there.

Event object:
events: any [] : [];

Angular Calander Options:
calendarOptions: Options = {}

ngViewInit (){}

getting data from server
...
updating the cal...

updateCalander (){ this.calendarOptions.events = this events;}

I event tried using ViewChild and directly using Jquery to do it but it is not Woking.

Can you suggest me something?

Two calendar inside same view, show only one calendar

So I'm trying to use this module however, when i start my application i get the following error.

System.Exception: Call to Node module failed with error: Prerendering failed because of error: TypeError: Cannot set property 'fullCalendar' of undefined
    at c:\Users\andrew\Documents\Visual Studio 2015\Projects\Angular2Application1\Angular2Application1\node_modules\fullcalendar\dist\fullcalendar.js:31:19
    at $.fullCalendar.version (c:\Users\andrew\Documents\Visual Studio 2015\Projects\Angular2Application1\Angular2Application1\node_modules\fullcalendar\dist\fullcalendar.js:12:20)
    at Object.<anonymous> (c:\Users\andrew\Documents\Visual Studio 2015\Projects\Angular2Application1\Angular2Application1\node_modules\fullcalendar\dist\fullcalendar.js:17:3)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)

I think im getting this issue because im trying to pre-render all my angular2 stuff on the server, and for some reason node.js doesn't recognize this module.

Any ideas on how to fix this issue ?

Components/Typescript

import { Component, } from '@angular/core';

@Component({
    selector: 'home',
    template: require('./home.component.html'),
    styles: [require('./home.component.css')]
})
export class HomeComponent {
    viewDate: Date = new Date();
    events = [];
    calendarOptions = null; 
    constructor() {
        console.log("Test");
        this.calendarOptions = {
        height: 'parent',
        fixedWeekCount : false,
        defaultDate: '2016-09-12',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: [
          {
            title: 'All Day Event',
            start: '2016-09-01'
          },
          {
            title: 'Long Event',
            start: '2016-09-07',
            end: '2016-09-10'
          },
          {
            id: 999,
            title: 'Repeating Event',
            start: '2016-09-09T16:00:00'
          },
          {
            id: 999,
            title: 'Repeating Event',
            start: '2016-09-16T16:00:00'
          },
          {
            title: 'Conference',
            start: '2016-09-11',
            end: '2016-09-13'
          },
          {
            title: 'Meeting',
            start: '2016-09-12T10:30:00',
            end: '2016-09-12T12:30:00'
          },
          {
            title: 'Lunch',
            start: '2016-09-12T12:00:00'
          },
          {
            title: 'Meeting',
            start: '2016-09-12T14:30:00'
          },
          {
            title: 'Happy Hour',
            start: '2016-09-12T17:30:00'
          },
          {
            title: 'Dinner',
            start: '2016-09-12T20:00:00'
          },
          {
            title: 'Birthday Party',
            start: '2016-09-13T07:00:00'
          },
          {
            title: 'Click for Google',
            url: 'http://google.com/',
            start: '2016-09-28'
          }
        ]
      };
    }
}

<div ng-if="calendarOptions">
    <angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar>
</div>

Hello.

How do I get this to work with the fullcalendar scheduler add-on from fullcalendar? Just including the scheduler.js file on your site and using it as documented from fullcalendar does not work.

I set my calendar options as following in the component ScheduleComponent.ts:

calendarOptions:Object = {
        fixedWeekCount : false,
        editable: true,
        eventLimit: true,
        defaultView: "agendaWeek",
        locale: "es",
        eventClick: this.eventClick,
  };

My event click is inside a component ("ScheduleComponent.ts"), it is:

private eventClick(calEvent, jsEvent, view)
  {
    this.otherFunction("example");
  };

But otherFunction doesn't exist in the callendar scope, it exist in the ScheduleComponent.ts scope, how can I figure it out this problem?

The title says it all...

I receive many errors messages saying 'fetch failed with status code 503'

Hi! I have a problem with the locale. With arrows, i marked where the problem is. In my options, i have property locale: 'pl' but this just not working as well. Any idea why?

Please when I try to use fullcalendar I get the following error:

Module build failed: Error: ENOENT: no such file or directory, open 'X\X\X\node_modules\angular2-fullcalendar\src\calendar\calendar.js' at Error (native)

I installed fullcalendar using: npm install angular2-fullcalendar --save

and I tried to uninstall it and reinstall it and I get the same error.

any help please

I have two calendars inserted to one page (in separate sibling components). Every calendar has its own options:

<angular2-fullcalendar [options]="calendar1Options" id="calendar1"></angular2-fullcalendar

<angular2-fullcalendar [options]="calendar2Options" id="calendar2"></angular2-fullcalendar>

But both calendars are set up by options of the first one.

I have installed the plugin and then I have imported the component into my ngmodule

import { CalendarComponent } from "angular2-fullcalendar/src/calendar/calendar";

declarations: [
.....
CalendarComponent,

After placing the <angular2-fullcalendar [options]="calendarOptions"> tag into my template file I get the following error:

npm version 4.3.0
node version 6.9.0

error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'angular2-fullcalendar'.

1. If 'angular2-fullcalendar' is an Angular component and it has 'options' input, then verify that it is part of this module.

2. If 'angular2-fullcalendar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
   ("

   ][options]="calendarOptions">

<div class="col-md-6">
    [ERROR ->]<angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar>
</div>

<div class="col-md-6">
    [ERROR ->]<angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar>
</div>

1. Using 'locale' options (for example setting 'it'), most of the (textual) content of the calendar is traslated using 'italian' language, but a part of it remains in english (for example the buttons 'month', 'list', 'today' etc, ).

2. Then in my application I can't use the option to get the GoogleCalendar holiday events:

     [..]
   

   googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',
   // US Holidays
   events: 'it.italian#[email protected]',
   [..]

I've copy this code from a (working) demo in javascript, adding those lines into the options array of the angular component, but does not work . This error compare in Chorme console:

the server responded with a status of 404 (Not Found)

:4200/it.italian?start=2017-05-29&end=2017-07-03&_=1497630053596#[email protected] Failed to load resource:

Data is not rendering, when calendar hide(display:none). I try to use this calendar like popup. This kind of scenario, it's not working properly.

I'm using Angular 2 CLI and when I serve the application I get the following message:

ERROR in ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css
Module not found: Error: Can't resolve './fullcalendar/fullcalendar.min.css' in 'C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src'
 @ ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css 3:10-106
 @ ./src/styles.css
 @ multi styles

In the browser console

client?93b6:80 ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css
Module not found: Error: Can't resolve './fullcalendar/fullcalendar.min.css' in 'C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src'
resolve './fullcalendar/fullcalendar.min.css' in 'C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src'
  using description file: C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\package.json (relative path: ./src)
    using description file: C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\package.json (relative path: ./src/fullcalendar/fullcalendar.min.css)
      as directory
        C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css.js doesn't exist
[C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css]
[C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css]
[C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css.ts]
[C:\dev\projects\0052_Ng2_Book\ng2-fullcalendar-test\my-fullcalendar-test\src\fullcalendar\fullcalendar.min.css.js]
 @ ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css 3:10-106
 @ ./src/styles.css
 @ multi styles

I also tried loading the CSS directly in the index.html but I get a 404 error on the browser.

Thanks,
Vasco

Hello,

I just want to know the proper way to add/ update event into calendarOptions.events. I've seen on the full calendar doc that there is a update event function but I can't know how to use it through your component.

Trying this for the fist time using latest Angular 5 / CLI and getting this:

Error: Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in /Users/bostondevin/Desktop/mgx/node_modules/angular2-fullcalendar/node_modules/@angular/core/src/di/metadata.d.ts, resolving symbol OpaqueToken in /Users/bostondevin/Desktop/mgx/node_modules/angular2-fullcalendar/node_modules/@angular/core/src/di/opaque_token.d.ts, resolving symbol OpaqueToken in /Users/bostondevin/Desktop/mgx/node_modules/angular2-fullcalendar/node_modules/@angular/core/src/di/opaque_token.d.ts

It has to do with using the CLI

How can i add an event by calling renderEvent?

Hello.

When writing callback functions for fullcalendar we can't access angular2 elements. "this" is jquery.fn.init.

Like when they click on a day the dayClick callback I would like to route the user to a custom page for that route. I can do this with vanilla JS, but that cause a full page reload, not very desirable when Angular2 is a SPA framework and full page reloads are very heavy on it.

Hi,

I just installed this component in my project and i have followed the installation instructions as specified on the main page.

I can compile my app without errors however when i try to access it in the browser i get this error

Uncaught Error: Unexpected value 'CalendarComponent' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@component annotation.
at syntaxError (http://localhost:4200/vendor.bundle.js:120246:34)
at http://localhost:4200/vendor.bundle.js:133248:40
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:4200/vendor.bundle.js:133230:54)
at JitCompiler._loadModules (http://localhost:4200/vendor.bundle.js:144336:66)
at JitCompiler.compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:144295:52)
at JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:144257:23)
at PlatformRef.bootstrapModuleWithZone (http://localhost:4200/vendor.bundle.js:5022:25)
at PlatformRef.bootstrapModule (http://localhost:4200/vendor.bundle.js:5008:21)
at Object.541 (http://localhost:4200/main.bundle.js:315:124)

Does anyone know what could be causing this?

Thanks in advance!

I have probles with eventclick, can anyone help me?

this.calendarOptions = { height: 'parent', fixedWeekCount : false, firstDay: 1, defaultView: 'agendaWeek', locale: 'es', editable: true, eventLimit: true, // allow "more" link when too many events events: [], eventClick: function(event) { console.log(event); this.showConsulta(event); } };

And the function
showConsulta(event) { console.log(event) }

This I can see on the console, but I get that the function doesn't exist

My goal is to call a function in any event

Hello, when I change the timezone of my computer to UTC-12 and when I select a day, I am getting one day before. This is my code.

...
select: (start, end) => {
this.selectedDate = start._d;
this.GetCalendarEventsByDate();
}

this.selectedDate is producing one day before. When I work locally UTC+2, It is working fine. Any idea why?

in your docs you say:
import {CalendarComponent} from "angular2-fullcalendar/src/calendar/calendar";

but needs to be:

import {CalendarComponent} from "ap-angular2-fullcalendar/src/calendar/calendar";

Hi,
I've been trying to get angular2-fullcalendar working in my angular2 application for two days now...i really have no idea why its not working....i am also quite new to typescript and angular2. So what i did:

i run

npm install angular2-fullcalendar --save

afterwards i added the following line to app.module.ts:
import { CalendarComponent } from "angular2-fullcalendar/src/calendar/calendar";

@NgModule({ imports: [BrowserModule], declarations: [AppComponent, HeadbarComponent, NavigationComponent, CalendarComponent], bootstrap: [AppComponent] })

my tsconfig.json looks like:
{ "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es2015", "dom" ], "noImplicitAny": false, "suppressImplicitAnyIndexErrors": true } }
my application produces the following error:

GET http://localhost:3000/angular2-fullcalendar/src/calendar/calendar 404 (Not Found)
scheduleTask @ zone.js:1645
ZoneDelegate.scheduleTask @ zone.js:255
Zone.scheduleMacroTask @ zone.js:168
(anonymous) @ zone.js:1669
send @ VM322:3
fetchTextFromURL @ system.src.js:1051
(anonymous) @ system.src.js:1778
ZoneAwarePromise @ zone.js:536
(anonymous) @ system.src.js:1777
(anonymous) @ system.src.js:2806
(anonymous) @ system.src.js:3384
(anonymous) @ system.src.js:3707
(anonymous) @ system.src.js:4099
(anonymous) @ system.src.js:4562
(anonymous) @ system.src.js:4831
(anonymous) @ system.src.js:407
ZoneDelegate.invoke @ zone.js:242
Zone.run @ zone.js:113
(anonymous) @ zone.js:520
ZoneDelegate.invokeTask @ zone.js:275
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:418
ZoneTask.invoke @ zone.js:349
(index):25 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/angular2-fullcalendar/src/calendar/calendar
Error: XHR error (404 Not Found) loading http://localhost:3000/angular2-fullcalendar/src/calendar/calendar
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:889:29) []
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:151:47) [ => ]
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:345:33) []
Error loading http://localhost:3000/angular2-fullcalendar/src/calendar/calendar as "angular2-fullcalendar/src/calendar/calendar" from http://localhost:3000/app/app.module.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:889:29) []
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:151:47) [ => ]
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:345:33) []
Error loading http://localhost:3000/angular2-fullcalendar/src/calendar/calendar as "angular2-fullcalendar/src/calendar/calendar" from http://localhost:3000/app/app.module.js
(anonymous) @ (index):25
ZoneDelegate.invoke @ zone.js:242
Zone.run @ zone.js:113
(anonymous) @ zone.js:520
ZoneDelegate.invokeTask @ zone.js:275
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:418
ZoneTask.invoke @ zone.js:349

at first i thought, it is the wrong path, so i added a "node_modules/" to the beginning of the path. This made the path look correctly, but i still received the same error. I am pretty sure that i did everything correct, i also updated node and npm...what is going wrong here?

best regards,
Ole

In my package.json file, I have install "@types/jquery"as a development library; which worked fine before I installed ng2-fullcalendar.

Now if I try to compile the project, I got the following errors:

`
ERROR in [at-loader] ./node_modules/@types/jquery/index.d.ts:3786:5
TS2300: Duplicate identifier 'export='.

ERROR in [at-loader] ./node_modules/angular2-fullcalendar/node_modules/@types/jquery/index.d.ts:745:5
TS2374: Duplicate string index signature.

ERROR in [at-loader] ./node_modules/angular2-fullcalendar/node_modules/@types/jquery/index.d.ts:3351:5
TS2375: Duplicate number index signature.

ERROR in [at-loader] ./node_modules/angular2-fullcalendar/node_modules/@types/jquery/index.d.ts:3779:5
TS2300: Duplicate identifier 'export='.
`

Warning on npm install: npm WARN deprecated @types/[email protected]: This is a stub types definition for Moment (https://github.com/moment/moment). Moment provides its own type definitions, so you don't need @types/moment installed!

And on import I'm getting this error: Cannot find type definition for moment

Hi, I using the fullcalendar for Angular 4. The style seems to be different with the demo sample. Could you please help if any configuration was missing ?

Hello,
I'm using this seed for my project: https://github.com/mgechev/angular-seed
After npm install angular2-fullcalendar --save and having set the css in my project.config.ts,

I have the following error while compiling:

error TS2403: Subsequent variable declarations must have the same type.
Variable '$' must be of type 'JQueryStatic', but here has type 'cssSelectorHelper'

and when loading the component that uses full-calendar in his template, this is in my browser console:

GET XHR http://localhost:5555/node_modules/jquery.js [HTTP/1.1 404 Not Found 1ms]
GET XHR http://localhost:5555/node_modules/fullcalendar.js [HTTP/1.1 404 Not Found 3ms]
"EXCEPTION: Uncaught (in promise): Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/jquery.js
	patchProperty/desc.set/wrapFn@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:1039:26 [angular]
	NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:4382:32 [angular]
	ZoneDelegate.prototype.invokeTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:274:21 [angular]
	Zone.prototype.runTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:151:28 [<root> => angular]
	ZoneTask/this.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:345:28 [<root>]
	
	Error loading http://localhost:5555/node_modules/jquery.js as "jquery" from http://localhost:5555/node_modules/angular2-fullcalendar/src/calendar/calendar.js
(SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/jquery.js
	patchProperty/desc.set/wrapFn@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:1039:26 [angular]
	NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:4382:32 [angular]
	ZoneDelegate.prototype.invokeTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:274:21 [angular]
	Zone.prototype.runTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:151:28 [<root> => angular]
	ZoneTask/this.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:345:28 [<root>]
	
	Error loading http://localhost:5555/node_modules/jquery.js as "jquery" from http://localhost:5555/node_modules/angular2-fullcalendar/src/calendar/calendar.js"  core.umd.js:3472:13
ORIGINAL STACKTRACE:  core.umd.js:3477:17
resolvePromise@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:501:31 [angular]
resolvePromise@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:486:17 [angular]
scheduleResolveOrReject/<@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:535:17 [angular]
NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:4382:32 [angular]
ZoneDelegate.prototype.invokeTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:274:21 [angular]
Zone.prototype.runTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:151:28 [<root> => angular]
drainMicroTaskQueue@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:433:25 [<root>]
ZoneTask/this.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:349:25 [<root>]
  core.umd.js:3478:17
Unhandled Promise rejection: "(SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/jquery.js
	patchProperty/desc.set/wrapFn@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:1039:26 [angular]
	NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:4382:32 [angular]
	ZoneDelegate.prototype.invokeTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:274:21 [angular]
	Zone.prototype.runTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:151:28 [<root> => angular]
	ZoneTask/this.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:345:28 [<root>]
	
	Error loading http://localhost:5555/node_modules/jquery.js as "jquery" from http://localhost:5555/node_modules/angular2-fullcalendar/src/calendar/calendar.js" ; Zone: angular ; Task: Promise.then ; Value: Object { __zone_symbol__error: Error, fileName: Getter, lineNumber: Getter, columnNumber: Getter, message: Getter, name: Getter, stack: Getter, originalStack: Getter, zoneAwareStack: Getter, toString: createMethodProperty/props[key].value(), 4 more… } "(SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/jquery.js
	patchProperty/desc.set/wrapFn@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:1039:26 [angular]
	NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:4382:32 [angular]
	ZoneDelegate.prototype.invokeTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:274:21 [angular]
	Zone.prototype.runTask@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:151:28 [<root> => angular]
	ZoneTask/this.invoke@http://localhost:5555/node_modules/zone.js/dist/zone.js?1484745236072:345:28 [<root>]
	
	Error loading http://localhost:5555/node_modules/jquery.js as "jquery" from http://localhost:5555/node_modules/angular2-fullcalendar/src/calendar/calendar.js"  zone.js:420:13
Object { __zone_symbol__error: Error, fileName: Getter, lineNumber: Getter, columnNumber: Getter, message: Getter, name: Getter, stack: Getter, originalStack: Getter, zoneAwareStack: Getter, toString: createMethodProperty/props[key].value(), 7 more… }

In my package.json I tried to pass protractor to "^4.0.14". No changes.

Any idea?
Also, don't I need to add a fullcalendar.js to my index in order to make it work? Which .js to use?

Thanks
Dex