Custom section style

Scheduler Javascript
#1

Hi,

I’ve a timeline with their sections and subsections loaded from a database. Is it possible to style the subsection depending on its properties?

For example, this subsection have this properties:

I’d like that, based on the “contracte” property, apply some CSS to the row or the TD of the subsection text.

#2

Hi,
yes, you can use this template to return your additional CSS class to the cell of the row label:
docs.dhtmlx.com/scheduler/api__s … plate.html

#3

Thx! It seems the good way to go… but it didn’t work for me? :frowning:

I added this after scheduler initialization (the timeline name is “timeline_week”):

scheduler.templates.timeline_week_scaley_class = function(key, label, section) { return "test"; };

And in the CSS file I added this class:

.test { background-color: yellow !important; color: red !important; border: 1px solid red; }

But nothing changes, as you can see in the generated DOM there isn’t any test class:

If I only change "scheduler.templates.timeline_week_scaley_class = function(key, label, section) { " by the “scheduler.templates.timeline_cell_class = function(evs, date, section){” the event columns get the yellow background.

Why it didn’t work for the scaley_class? At which element of the DOM the class is added?

Thx

#4

If you are using

createTimelineView({ name:"timeline"

template name will be

scheduler.templates.timeline_scaley_class

not a timeline_week_scaley_class

Also, beware that scales are repainted only when you are changing active view, so you can move the template initialization before init command, to be safe.

#5

I’m using

scheduler.createTimelineView({ name:"timeline_week",

So the scheduler.templates.timeline_week_scaley_class seems ok. Indeed if I put an alert inside it is showed.

Do you mean setting the

scheduler.templates.timeline_week_scaley_class = function(key, label, section) { return "test"; };

Before the

scheduler.init('calendari', new Date(),"timeline_week");

?

I tried without luck :frowning:

Do you have a demo?
How can I debug?

#6

Hi,
I can confirm this issue in the tree view of the timeline. Please find attached a fixed version.
dhtmlxscheduler_treetimeline.js_20140520_scale_class.zip (2.64 KB)

#7

Thx, it works!!! It will be part of the next version?

#8

You are welcome. I think yes, it will be included in the update.

#9

It isn’t fixed in v4

#10

Can I have an v4 dhtmlxscheduler_treetimeline.js version with this issue fixed?

#11

Hi Dimass, thanks for reporting.
The fix will be included in the upcoming version of the component, which will be released in the nearest days. If you send me a PM in a couple of hours, i’ll be able to send you a pre-release build

#12

hi Dimass,

I understand from your post that you are able to load the section and subsections from a database. I am new in this and i was wondering if you can give sample codes on how to do this.

I am using the default example from dhtmlxScheduler_v4.1.0\samples\06_timeline\03_tree.html and i was trying to replace the code

var elements = [ // original hierarhical array to display
    {key:10, label:"Web Testing Dep.", open: true, children: [
        {key:20, label:"Elizabeth Taylor"},
        {key:30, label:"Managers",  children: [
            {key:40, label:"John Williams"},
            {key:50, label:"David Miller"}
        ]},
        {key:60, label:"Linda Brown"},
        {key:70, label:"George Lucas"}
    ]},
    {key:110, label:"Human Relations Dep.", open:true, children: [
        {key:80, label:"Kate Moss"},
        {key:90, label:"Dian Fossey"}
    ]}
];

with something like

var elements = mytree.load("mytree.php");

with server mytree.php code as

<?php   
require_once(".\dhtmlxScheduler_v4.1.0\samples\common\connector\tree_group_connector.php");
  
$res = pg_connect(" ... ");   

$tree = new TreeGroupConnector($res);
$tree->render_table("employee", "id", "name", "", "dept");
$tree->enable_log("events.log",true);
?>

But i am not sure where to get the module “mytree” to call “mytree.load” or if this is correct at all.

Please advise. Thanks.

#13

Hi,

Anyone who can answer my previous post would also be really appreciated.

Thanks.

#14

I managed to find the answer here : http://forum.dhtmlx.com/viewtopic.php?f=6&t=34328

Cheers :smiley: