Angular 2 Support

It's in the works, stay tuned!

Do you need Alpha/Beta Testers?

Hi there

Has there been any progress on this?

Thanks

It will be available by the end of September.

Updates will be posted here. You can subscribe to e-mail notifications using this link:

http://forums.daypilot.org/question/notifications/3304

The first Angular 2 version of the Scheduler is now available:

https://code.daypilot.org/67423/angular-2-scheduler-tutorial-typescript

It's in an early stage. However, the following is working:

• DayPilot Pro for Angular 2 is available as a npm module. It's based on DayPilot Pro for JavaScript.
• It's published at npm.daypilot.org as a tar.gz file so you can reference it in your package.json file.
• TypeScript definitions for DayPilot.Scheduler are included (very limited at the moment but will be extended).
• The tutorial includes a working sample project (in TypeScript).
• The tutorial will be updated with new features as they are available.

Limitations:

• This version supports Scheduler only.
• The TypeScript definitions are not complete.
• It's not optimized for performance.

Full Angular 2 Scheduler support will be included in 8.3 release which is scheduled for early October.

Update:

The tutorial now includes a new version of DayPilot Pro with complete TypeScript definitions (for the Scheduler and related controls).

It also includes a more complex project that shows how to use the Scheduler with a server-side backend (it uses PHP).

There are two download packages available:

• TutorialAngular2Scheduler.20160919.zip (a boilerplate project that includes a minimum client-side part, without any server integration)
• TutorialAngular2SchedulerPhp.20160919.zip (a project with PHP backend, it loads events and resource from a database and supports drag and drop actions)

I am getting the following errors when I add to my A2 project: I am on Angular Final using Angular-cli Beta.15

app.module.ts:38Uncaught TypeError: Cannot read property 'Angular' of undefined(anonymous function)

\node_modules\daypilot-pro-angular\daypilot-angular.min.d.ts:65:19
Parameter cannot have question mark and initializer.errors

\node_modules\daypilot-pro-angular\daypilot-angular.min.d.ts:65:19
A parameter initializer is only allowed in a function or constructor implementation.

This problem should be fixed now in build 8.2.2386. There is now a special tutorial for Angular 2 CLI available:

https://code.daypilot.org/50247/using-scheduler-with-angular-2-cli

Thanks for reporting the issue!

Ok that fixed the last 2 of the 3 errors. Still getting the first one. It happens only when I have your line , DayPilot.Angular.Scheduler, in the declarations section of the app.module.ts

app.module.ts:30Uncaught TypeError: Cannot read property 'Angular' of undefined(anonymous function) @ app.module.ts:30(anonymous function) @ app.module.ts:55__webpack_require__ @ bootstrap 845d69b…:52(anonymous function) @ employee.routes.ts:21__webpack_require__ @ bootstrap 845d69b…:52(anonymous function) @ src async:7__webpack_require__ @ bootstrap 845d69b…:52(anonymous function) @ main.bundle.js:98101__webpack_require__ @ bootstrap 845d69b…:52webpackJsonpCallback @ bootstrap 845d69b…:23(anonymous function) @ main.bundle.js:1

If I remove you from the declarations, the error goes away.

I cannot past the image here, but I am showing an error on that line in the Chrome Developer tools.

One other point you should probably put in the directions, but correct me if I am wrong...

I think you need to add to the angular-cli-json under scripts the following line:
"../node_modules/daypilot-pro-angular/daypilot-angular.min.js"

If not you will not grab the dependent file during a "prod" build.

> Still getting the first one. It happens only when I have your line , DayPilot.Angular.Scheduler, in the declarations section of the app.module.ts

Strange thing, it seems to work fine for me. I thought it might be a missing import in app.module.ts:

import { DayPilot } from "daypilot-pro-angular";

But if I comment it out it gives me a different error during build: "Cannot find name 'DayPilot'."

> One other point you should probably put in the directions, but correct me if I am wrong...

I tried to build the project using

ng build --prod

and it packs daypilot-angular.min.js from "daypilot-pro-angular" module into dist/main.xxxx.bundle.js. It can be found in the sources and the dist project also seems to work.

Do you get these errors when you run the downloaded project from the CLI tutorial?

If there is a way to send you an image I think you can see where it is complaining.

I have not tried the sample app, I will have to try that later tonight.

You can open a new question using this link:
http://forums.daypilot.org/question/new

It's possible to attach images to questions. We can continue the debugging in that new thread.

hello, any idea how to remove the word "DEMO"?

The "DEMO" label indicates that you are using the trial version of DayPilot Pro. If you have a DayPilot Pro for JavaScript license you can get a custom NPM link in the customer area that lets you use a version without "DEMO".

See also:
https://doc.daypilot.org/scheduler/angular-2/