Customizing week unit scale text

dani7115 · August 18, 2019, 3:47pm

Hi i want to know how i can customize scheduler.templates.week_unit_scale_text with some dynamic content.

Lets say i have some LIST that i want to change under date section as you can see in screen shot below.
I want to add dynamic content which could be able to update later with calendar layout… lets say if i add a table… after date… below part should be push more below… and my new table should be in the middle of date section and the 2nd section which i have made.

52%20PM

Plus the most important thing i need is i want to get date in below function while rendering layout.
i have to put some conditions by date wise or Day wise…

scheduler.templates.week_unit_scale_text=function(key;label,unit){



}

Please tell me asap
thanks

Polina · August 19, 2019, 1:56pm

Hi,

To put html into the cell of the X-axis, return it in this template and set appropriate CSS rules according to your requirements.

Please check the link of template in the documentation:
https://docs.dhtmlx.com/scheduler/api__scheduler_{unitsname}_scale_text_template.html
There are 4 parameters, including ‘date’.

dani7115 · August 21, 2019, 10:54am

Hi ,

I have checked your solution. But it isn’t working

My scheduler version is 5.1.1 .
Is that the correct one ?

Also if it works, Then will it work also for these? :-

scheduler.templates.week_unit_scale_text
scheduler.templates.single_unit_scale_text

Waiting for your answer…
Regards
Thanks

dani7115 · August 21, 2019, 11:30am

And for the other issue…

let me explain you now with screen shots…

this is calendar and please not the height generated for (dhx_cal_header) by SCHEDULER’S JS is 60px as in screen shot and i have extra layout added after unit view lablel… which isn’t showing right now. You will see it next…
16%20PM

What i really want to achieve

is below

As you can see i have overwrite the layout for unit view by using

scheduler.templates.week_unit_scale_text

But i am unable see my layout if i don’t change the height for (dhx_cal_header) manually

Like this.
34%20PM

So my problem is that i should be automatically generate height for the total length of my layout.
Plus later on if one of these layout BLOCKS gets added or removed… It should become responsive in layout generating.

Can u help me in this?

Waiting
Thanks Regards

Polina · August 21, 2019, 1:36pm

Yes, templates should work, if names of Units views are week_unit and single_unit in your app.

Polina · August 21, 2019, 1:47pm

As I understand, you need to configure the value of scheduler.xy.scale_height to change the height X-axis.
https://docs.dhtmlx.com/scheduler/api__scheduler_xy_other.html#day

dani7115 · August 21, 2019, 1:52pm

Yes this kind of thing i was looking for. Rest i will see what i can do for dynamic changes in height.
Thanks for this

dani7115 · August 21, 2019, 1:53pm

Well for this issue… i don’t know why this is telling me that DATE is undefined.

scheduler.templates.week_unit_scale_text=function(key,label,unit,date){

  console.log(date);

}

Polina · August 22, 2019, 9:58am

I added your code into the sample from the package, date value is defined in unit_scale_text template as expected: http://prntscr.com/ow0e74

If that doesn’t help you with the issue, please attach the demo where the problem can be reproduced.

dani7115 · August 22, 2019, 11:29am

Hi…

We are close to solve one issue of adding dynamic section below unit view…
I have found another problem for you that you may help me…

By using your given solution

scheduler.xy.scale_height=100;

Giving me this…

As you can see unknown margin coming between dates and unit view section.
Also i studied it works if i give 100 xy.scale.height that will be multiplied by the number of units i have.

I don’t want that margin.
Till now what i could find is that in ( dhtmlxscheduler_units.js) …

line number 149
e.xy.scale_height=Math.ceil(n/2),d.call(this,t,s,i,o,Math.ceil(e.xy.scale_height));

if i just fix a value for this

e.xy.scale_height=Math.ceil(n/2)

As

e.xy.scale_height=20

And the rest i use your solution in scheduler’s config as below.

scheduler.xy.scale_height=100;

I have my this problem fixed as you can see below

I don’t understand 100% what is that in the core code.
I just need to know if i could pass this value from scheduler to your core code dynamically… NOT BY CHANGING CORE CODE?

Thanks
Regards

dani7115 · August 22, 2019, 12:30pm

For other issue i have created a snippet

http://snippet.dhtmlx.com/81ff359cb

In console.log i can’t see my date parameter’s result for

scheduler.templates.week_unit_scale_text=function(key,label,unit,date)

Polina · August 26, 2019, 2:16pm

Hi,

I’m not sure that I fully understand the issue. When you set xy.scale_height=100, both lines in the week units will have height = 100px: DHTMLX Snippets
If you want to change it dynamically, you don’t need to change the source code.
Just update this value each time when you change the view in the onBeforeViewChange handler.

The demo contains Scheduler v.4.3.25. Use the template in the build of the latest version.

dani7115 · August 27, 2019, 7:50am

Hi ,

Firstly my version is 5.1.

This is exactly my issue that appears in your snippet as well.
setting this xy.scale_height=100 is fine it should increase height of date section.
like in below screen shot.

But i needed the increase in height for just unit view section
like below

That is what i asked you earlier, And you told me to use

scheduler.xy.scale_height=100;

Which is increasing height of both dates and unit section

I only need long height here in unit section

For that i was checking core code of ( dhtmlxscheduler_units.js) and i found on line no 149

e.xy.scale_height=Math.ceil(n/2),d.call(this,t,s,i,o,Math.ceil(e.xy.scale_height));

if i just fix a value for this

e.xy.scale_height=Math.ceil(n/2)

As

e.xy.scale_height=20

And also by using this scheduler.xy.scale_height=100;

My this issue got solved. Now i have increase in height in only Unit section my date section is fixed.

As i have edited this picture to make you understand what i want.

This is what i am asking for, How i can achieve this by not changing the core code.

Regards thanks

dani7115 · September 3, 2019, 7:36am

Hi @Polina , Can u update me about this issue?

Polina · September 3, 2019, 9:39am

An alternative way without changing the source code is updating CSS.

Please check this example to understand the direction of how to do that:
https://docs.dhtmlx.com/scheduler/snippet/311f175f

dani7115 · September 3, 2019, 9:42am

I would like as in the picture that the height of the date section scale stays fixed standard size and Unit section area which is under the date section to have a custom size for height. As when I’m applying the fixes that you suggested . Both section are getting increased… I would only the increase height for unit section separately.

As show in the photoshopped image that i’ve linked below.

The reply you have given me recently with the demo link is just making font bigger and increasing a little height for date section.

I have updated the snippet what i’m trying to achieve but i’m getting a space between date and unit section.
As you can see in the link below
http://docs.dhtmlx.com/scheduler/snippet/1c6a4ab8

thanks

dani7115 · September 9, 2019, 7:29am

hi @Polina, Can u update me about this ?

Polina · September 12, 2019, 3:04pm

Hi

Without changing the source code, this can only be done by changing CSS.
Demo for your case: http://docs.dhtmlx.com/scheduler/snippet/f7595832

dani7115 · September 12, 2019, 3:07pm

Hi Thanks for reply…

okay if i use this css settings and following xy.scale.height

scheduler.attachEvent("onTemplatesReady", function() {  
  scheduler.xy.scale_height = 170;  
});

it becomes this .
http://docs.dhtmlx.com/scheduler/snippet/414d8899

I want to assure that if i use this css settings with any height it should work

Polina · September 12, 2019, 3:08pm

This is not a universal solution. Each time you need to change CSS.