Our pure JavaScript Scheduler component


Post by nico-lgtech »

Hello,
I would like to have a separation between the days ? :)

I see when i inspect element the difference between two pictures it's this line of css

background-image : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACWAAAAAUCAYAAAAJZgZqAAAIaElEQVR4Xu3asXEcURADUV0oDI2RiIqEoTEUypMhYw1UYQjjyaUwH9VdOGtfvx7+fX5+frxer9/f399/3t/fP57+r7/1CXx9ff3z8fb2xkcf+eMLfPywgP+e54OPLQJbbeyDjy0CW23sg48tAltt7IOPLQJbbeyDjy0CW23sg48tAltt7IOPLQJbbeyDjy0CW23sg48tAltt7IOPLQJbbezj3sfr6UkfYN0LeXrRQPjYIrDVxj742CKw1cY++NgisNXGPvjYIrDVxj742CKw1cY++NgisNXGPvjYIrDVxj742CKw1cY++NgisNXGPvjYIrDVxj742CKw1cY+7n34AOueefyigcToKkE+Kljjo3zE6CpBPipY46N8xOgqQT4qWOOjfMToKkE+Kljjo3zE6CpBPipY46N8xOgqQT4qWOOjfMToKkE+Kljjo3zE6CpBPipY46N8xOgqQT4qWOOjfMToKkE+Kljjo3zE6CpBPipY46N8xOjioA+wYnT3QQO5Z/70Ih98bBHYamMffGwR2GpjH3xsEdhqYx98bBHYamMffGwR2GpjH3xsEdhqYx98bBHYamMffGwR2GpjH3xsEdhqYx98bBHYamMffGwRuG/jA6x75vGLfrBidJUgHxWs8VE+YnSVIB8VrPFRPmJ0lSAfFazxUT5idJUgHxWs8VE+YnSVIB8VrPFRPmJ0lSAfFazxUT5idJUgHxWs8VE+YnSVIB8VrPFRPmJ0lSAfFazxUT5idJUgHxWs8VE+YnSVIB8VrPFRPmJ0cdAHWDG6+6CB3DN/epEPPrYIbLWxDz62CGy1sQ8+tghstbEPPrYIbLWxDz62CGy1sQ8+tghstbEPPrYIbLWxDz62CGy1sQ8+tghstbEPPrYIbLWxDz62CNy38QHWPfP4RT9YMbpKkI8K1vgoHzG6SpCPCtb4KB8xukqQjwrW+CgfMbpKkI8K1vgoHzG6SpCPCtb4KB8xukqQjwrW+CgfMbpKkI8K1vgoHzG6SpCPCtb4KB8xukqQjwrW+CgfMbpKkI8K1vgoHzG6SpCPCtb4KB8xujjoA6wY3X3QQO6ZP73IBx9bBLba2AcfWwS22tgHH1sEttrYBx9bBLba2AcfWwS22tgHH1sEttrYBx9bBLba2AcfWwS22tgHH1sEttrYBx9bBLba2AcfWwTu2/gA6555/KIfrBhdJchHBWt8lI8YXSXIRwVrfJSPGF0lyEcFa3yUjxhdJchHBWt8lI8YXSXIRwVrfJSPGF0lyEcFa3yUjxhdJchHBWt8lI8YXSXIRwVrfJSPGF0lyEcFa3yUjxhdJchHBWt8lI8YXSXIRwVrfJSPGF0c9AFWjO4+aCD3zJ9e5IOPLQJbbeyDjy0CW23sg48tAltt7IOPLQJbbeyDjy0CW23sg48tAltt7IOPLQJbbeyDjy0CW23sg48tAltt7IOPLQJbbeyDjy0C9218gHXPPH7RD1aMrhLko4I1PspHjK4S5KOCNT7KR4yuEuSjgjU+ykeMrhLko4I1PspHjK4S5KOCNT7KR4yuEuSjgjU+ykeMrhLko4I1PspHjK4S5KOCNT7KR4yuEuSjgjU+ykeMrhLko4I1PspHjK4S5KOCNT7KR4wuDvoAK0Z3HzSQe+ZPL/LBxxaBrTb2wccWga029sHHFoGtNvbBxxaBrTb2wccWga029sHHFoGtNvbBxxaBrTb2wccWga029sHHFoGtNvbBxxaBrTb2wccWgfs2PsC6Zx6/6AcrRlcJ8lHBGh/lI0ZXCfJRwRof5SNGVwnyUcEaH+UjRlcJ8lHBGh/lI0ZXCfJRwRof5SNGVwnyUcEaH+UjRlcJ8lHBGh/lI0ZXCfJRwRof5SNGVwnyUcEaH+UjRlcJ8lHBGh/lI0ZXCfJRwRof5SNGFwd9gBWjuw8ayD3zpxf54GOLwFYb++Bji8BWG/vgY4vAVhv74GOLwFYb++Bji8BWG/vgY4vAVhv74GOLwFYb++Bji8BWG/vgY4vAVhv74GOLwFYb++Bji8B9Gx9g3TOPX/SDFaOrBPmoYI2P8hGjqwT5qGCNj/IRo6sE+ahgjY/yEaOrBPmoYI2P8hGjqwT5qGCNj/IRo6sE+ahgjY/yEaOrBPmoYI2P8hGjqwT5qGCNj/IRo6sE+ahgjY/yEaOrBPmoYI2P8hGjqwT5qGCNj/IRo4uDPsCK0d0HDeSe+dOLfPCxRWCrjX3wsUVgq4198LFFYKuNffCxRWCrjX3wsUVgq4198LFFYKuNffCxRWCrjX3wsUVgq4198LFFYKuNffCxRWCrjX3wsUXgvo0PsO6Zxy/6wYrRVYJ8VLDGR/mI0VWCfFSwxkf5iNFVgnxUsMZH+YjRVYJ8VLDGR/mI0VWCfFSwxkf5iNFVgnxUsMZH+YjRVYJ8VLDGR/mI0VWCfFSwxkf5iNFVgnxUsMZH+YjRVYJ8VLDGR/mI0VWCfFSwxkf5iNHFQR9gxejugwZyz/zpRT742CKw1cY++NgisNXGPvjYIrDVxj742CKw1cY++NgisNXGPvjYIrDVxj742CKw1cY++NgisNXGPvjYIrDVxj742CKw1cY++NgicN/GB1j3zOMX/WDF6CpBPipY46N8xOgqQT4qWOOjfMToKkE+Kljjo3zE6CpBPipY46N8xOgqQT4qWOOjfMToKkE+Kljjo3zE6CpBPipY46N8xOgqQT4qWOOjfMToKkE+Kljjo3zE6CpBPipY46N8xOgqQT4qWOOjfMTo4qAPsGJ090EDuWf+9CIffGwR2GpjH3xsEdhqYx98bBHYamMffGwR2GpjH3xsEdhqYx98bBHYamMffGwR2GpjH3xsEdhqYx98bBHYamMffGwR2GpjH3xsEbhv8xcfawD2tsU1HgAAAABJRU5ErkJggg==")
Attachments
Result i have
Result i have
scheduler2.PNG (23.82 KiB) Viewed 3108 times
Result i want
Result i want
scheduler1.PNG (22.9 KiB) Viewed 3108 times

Post by sergey.maltsev »

Hi!

Please check these docs for configuring ColumnLines feature.

https://www.bryntum.com/docs/scheduler/#Scheduler/feature/ColumnLines

As you could see example in docs has darker line separator between weeks , the same would be between days if you use viewPreset : 'hourAndDay',.

You could check here
https://www.bryntum.com/examples/scheduler/basic/
Just update code to show more days.
    startDate        : new Date(2017, 0, 1, 6),
    endDate          : new Date(2017, 0, 2, 20),
DaySeparator.png
DaySeparator.png (10.11 KiB) Viewed 3104 times

You also could add some other color for this line.
.b-column-line-major {
  border-left-color: gray;
}

Post by nico-lgtech »

thank you for the answer.

But in the two screenshot, i send.

I have the same code but in one scheduler the line is visible an in the second not :/

Post by sergey.maltsev »

Hi!

You could debug yourself your js code and css parts to find the differences between schedulers.
Check applied view presets first.

If you can't find the reason please attach your app here we can run and test.
It is hard to say without seen the code.

P.S. Also make sure you use the same latest versions in both cases.

Post by nico-lgtech »

I have the same code in both scheduler :/ And the same viewPreset :/

Post by nico-lgtech »

I found the problem is when I specify WorkingTime when creating the schedule

Post by saki »

Is the issue resolved or you need more help – we need a runnable showcase in that case?

Post by nico-lgtech »

I send two pictures with the code, when i set the workingTIme the line between the day disappears :/
Attachments
scheduler without between day.PNG
scheduler without between day.PNG (93.8 KiB) Viewed 2967 times
scheduler with line between day.PNG
scheduler with line between day.PNG (93.25 KiB) Viewed 2967 times

Post by nico-lgtech »

I send you the difference with the code ? :/

Post by saki »

Yes please, give us the code. We will run and debug it and will resolve the issue – this can only be done after we have reproduced it locally.

Post Reply