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