Creating timeline view in Angular

#1

I’m trying to get a timeline view working in Angular with scheduler. I’m following this tutorial https://docs.dhtmlx.com/scheduler/timeline_view.html but I’m getting the error below.

I’ve installed the PRO version.

The tutorial does not specify how to include the timeline files for angular. I was wondering if anyone was able to get this to work.

`timeline` view is not defined. 
Please check parameters you pass to `scheduler.init` or `scheduler.setCurrentView` in your code and ensure you've imported appropriate extensions. 
Related docs: https://docs.dhtmlx.com/scheduler/timeline_view.html
You're probably missing ext/dhtmlxscheduler_timeline.js, ext/dhtmlxscheduler_treetimeline.js, ext/dhtmlxscheduler_daytimeline.js.

    at Object.g.render_view_data (dhtmlxscheduler.js:228)
    at Object.g.update_view (dhtmlxscheduler.js:144)
    at Object.g.updateView (dhtmlxscheduler.js:147)
    at Object.g.setCurrentView (dhtmlxscheduler.js:148)
    at HTMLDivElement.dhx_cal_tab [as __zone_symbol__ON_PROPERTYclick] (dhtmlxscheduler.js:113)
    at HTMLDivElement.wrapFn (zone.js:1188)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)```
#2

Hi @turnip314,
please, check if you included the dhtmlxscheduler_timeline.js extension to your .angular-cli.json file:

"scripts”: [ 
...
"/node_modules/dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_timeline.js” 
],
#3

I added the files from the trial in angular.json

      "scripts": [
          "ext-lib/scheduler/codebase/ext/dhtmlxscheduler_timeline.js",
          "ext-lib/scheduler/codebase/ext/dhtmlxscheduler_treetimeline.js",
          "ext-lib/scheduler/codebase/ext/dhtmlxscheduler_daytimeline.js"
        ]

But I get this error:
dhtmlxscheduler_timeline.js:11 Uncaught TypeError: Scheduler.plugin is not a function
at dhtmlxscheduler_timeline.js:11:1
(anonymous) @ dhtmlxscheduler_timeline.js:11
core.js:6210 ERROR Error: scheduler.createTimelineView is not implemented. Be sure to add the required extension: ext/dhtmlxscheduler_timeline.js, ext/dhtmlxscheduler_treetimeline.js, ext/dhtmlxscheduler_daytimeline.js
Related docs: https://docs.dhtmlx.com/scheduler/timeline_view.html
at Object.g.createTimelineView (dhtmlxscheduler.js:88:335)
at SchedulerComponent.ngOnInit (scheduler.component.ts:20:15)
at callHook (core.js:2573:1)
at callHooks (core.js:2542:1)
at executeInitAndCheckHooks (core.js:2493:1)
at refreshView (core.js:9495:1)
at refreshComponent (core.js:10651:1)
at refreshChildComponents (core.js:9277:1)
at refreshView (core.js:9530:1)
at renderComponentOrTemplate (core.js:9594:1)

Is there an example of a trial for the scheduler with pro features???

#4

Hello @Cesar_Smerling ,

These issues can occur if you didn’t add the timeline extension to your project, for example if you are using the GPL package(that doesn’t contain Pro extensions), so you can check the package version(by the path in your project, readme file).

You also can just import required extensions in the scheduler.component file, like follows:

import "*path*/dhtmlxscheduler_timeline.js";

Example for the evaluation:

import 'dhtmlx-scheduler-evaluation';
import 'dhtmlx-scheduler-evaluation/codebase/ext/dhtmlxscheduler_timeline.js'

I also sent you a demo with a trial version of scheduler with included timeline extension in PM.