search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Angular 2 Support

Asked by Anonymous
4 years ago.

Hi there

Is there any plan to support Angular 2 for the DayPilot Scheduler component?

Thanks
Matt

Comment posted by Dan Letecky [DayPilot]
4 years ago.

It's in the works, stay tuned!

Comment posted by Aaron
4 years ago.

Do you need Alpha/Beta Testers?

Comment posted by Anonymous
4 years ago.

Hi there

Has there been any progress on this?

Thanks

Comment posted by Dan Letecky [DayPilot]
4 years ago.

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

Answer posted by Dan Letecky [DayPilot]
4 years ago.

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.

Comment posted by Dan Letecky [DayPilot]
4 years ago.

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)
Comment posted by Aaron
4 years ago.

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.

Comment posted by Dan Letecky [DayPilot]
4 years ago.

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!

Comment posted by Aaron
4 years ago.

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.

Comment posted by Aaron
4 years ago.

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.

Comment posted by Dan Letecky [DayPilot]
4 years ago.

> 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?

Comment posted by Aaron
4 years ago.

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.

Comment posted by Dan Letecky [DayPilot]
4 years ago.

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.

Comment posted by Drix
3 years ago.

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

Comment posted by Dan Letecky [DayPilot]
3 years ago.

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/

This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.