View in Scheduler


#1

I really like your team’ work. I have attached a link of snapShot that what actual view is required from my side and needed in AngularJS. Any help will be highly appreciated.


#2

Hello @OsamaMunawar,

The screenshot looks like a timeline view with little customization.
Timeline:
https://docs.dhtmlx.com/scheduler/timeline_view.html

Please note that the Timeline view is available only in PRO versions of the scheduler. Here is a guide on how to add PRO version to your app:
https://docs.dhtmlx.com/scheduler/install_with_bower.html#addingproeditionintoproject

List of configs, that I can suggest from the screenshot:

“Images in label cells”:
You can implement it with the timeline_scale_label template:
https://docs.dhtmlx.com/scheduler/api__scheduler_{timelinename}_scale_label_template.html

The thing that you have to do is to return the “image” in addition to the section name, example of code:

scheduler.templates.timeline_scale_label = function(key, label, section){ 
 
    return  `<div class="bg"> <img src="${section.bg}" width="100" height="100"> ${label}</div> `; 
};

Demo “Images in label cells”:
http://snippet.dhtmlx.com/5/3a22c11cc

“Different colors of events”:
You can colorize events in a few ways which are described in the following guide:
https://docs.dhtmlx.com/scheduler/custom_events_color.html

Demo “Different colors of events”:
https://docs.dhtmlx.com/scheduler/samples/02_customization/01_events_coloring.html

“The format of dates in the date scale”:
You can change the format of dates with the scale_date template:
https://docs.dhtmlx.com/scheduler/api__scheduler_{timelinename}_scale_date_template.html
and
second_scale_date template:
https://docs.dhtmlx.com/scheduler/api__scheduler_{timelinename}_second_scale_date_template.html

If you have some difficulties especially in angular integration, you can use the following demo of Angular integration as a code reference:

Feel free to clarify if I missed some points from the screenshot.

Kind regards


#3

@Siarhei Thank you very much for you reply and provided links.