dhtmlxscheduler_flat.css problems

Scheduler Javascript
#1

I like the dhtmlxscheduler_flat.css but it has some issues:

Trying to control the hour_date format on the Week View doesn’t work:

scheduler.config.hour_date = “%g:%i %A”;

…and when you export to PDF…you see   in there for the y-axis hour labels

Are there ways to get around these issues as I would like to continue to use the dhtmlxscheduler_flat.css

Thanks,
-Chris

#2

In flat skin scheduler uses custom template for hour scale, you can reset it back by using the next code after scheduler.init

scheduler.templates.hour_scale = scheduler.date.date_to_str("%g:%i %A"); scheduler.updateView();

As for export - please check it now, it works correctly for me ( result of scheduler.exportToPNG({ skin:“flat” }) is attached

calendar.png1120×1190 38.6 KB

#3

Awesome. Looks good now…thanks!! :slight_smile:

#4

There is one minor outstanding issue…I have attached both PDF outputs using the default css and the flat css…as you can see there is missing AM/PM indicator for 10:00 and 11:00…but only when I use the flat css.

dhtmlxScheduler_FLAT_CSS.jpg770×542 53.4 KB


dhtmlxScheduler_DEFAULT_CSS.jpg816×562 52 KB

#5

I can confirm the issue, it will be fixed in the next update of export service.
Meanwhileб as quick solution, you can fix the problem by adding the next line to the scheduler’s init

scheduler.xy.scale_width = 52;
#6

That makes sense…with how flexible your components are…there always seems to be a work-around :slight_smile: Nice job and thanks!

#7

Hi

You say earlier in this thread that “In flat skin scheduler uses custom template for hour scale, you can reset it back by using the next code after scheduler.init”

I would like to customize the template that is used. Where can I find the code for this custom template so that I can modify it?

Thanks,
Rob

PS. I LOVE this tool. Really nice work!

#8

I figured it out. To using the flat theme and customize I used the following:

 scheduler.templates.hour_scale = function(date) {
    var hour = scheduler.date.date_to_str('%h')(date),
        min = scheduler.date.date_to_str('%i')(date),
        ampm = scheduler.date.date_to_str('%a')(date);
    return '<span class="dhx_scale_h">' + hour + '</span>' +
           '<span class="dhx_scale_m" ' + 
           'style="line-height: 15px;margin-top: 10px;">&nbsp;' + min + '<br>' + ampm + '</span>';
};
scheduler.updateView();

Worked like a charm!