Scale of time in unit view

Scheduler Javascript
#1

I want to display time in a very focus way.
For now, the only thing I have done is to display the hour on the left (00:00 01:00 etc.) and use time_step and hour_size_px to stretch an hour to give more details.
What I would like to do , is to have on the left a more detailed scale (for exemple displaying 00:00 00:15 00:30 00:45 01:00 etc.)
Is it possible ?

#2

Hello,

If you want to edit hour scale display then you need to modify scheduler.templates.hour_scale, here is an example for 30 min step:

var format = scheduler.date.date_to_str("%H:%i"); scheduler.templates.hour_scale = function(date) { var cstep = 30; var html = ""; for (var i = 0; i < 60 / cstep; i++) { html += "<div style='height:21px;line-height:21px;'>" + format(date) + "</div>"; date = scheduler.date.add(date, cstep, "minute"); } return html; };
Best regards,
Ilya

#3

ok I have made a few more changes to adapt to the scheduler configuration values.
I also want to display only round hours and half hours.

Here is my code

    scheduler.templates.hour_scale = function(date) {
         var cstep = scheduler.config.time_step;
         var html = "";
         for (var i = 0; i < scheduler.config.hour_size_px / cstep; i++) {		    
		    strformatdate = format(date);
		    if(strformatdate.substring(strformatdate.length-2)=="00" || strformatdate.substring(strformatdate.length-2)=="30") {  
				html += "<div style='height:"+scheduler.config.time_step+"px;line-height:"+scheduler.config.time_step+"px;vertical-align:text-top;'>" + strformatdate + "</div>";
			}
			else
				html += "<div style='height:"+scheduler.config.time_step+"px;line-height:"+scheduler.config.time_step+"px;vertical-align:text-top;'>&#160;</div>";
			
			date = scheduler.date.add(date, cstep, "minute");
         }
         return html;
    };

Did you have another idea for how to do this ?

#4

hello, where do we have to put this code ? In wich file ? Thanks and this scheduler is really cool.

#5

Hello,

It could be any file but before scheduler.init call.
Be sure to check our samples - each is a single html file with the script part which is executed in body.onload function, you can place this code there.

Best regards,
Ilya

#6

hello Ilya and thanks for your response. In fact I asked this question for JOOMLA. I tried to add it in Event Template but nothing changed. It seems I have to add something in js but I don’t know how to ?
best regards

#7

Hello,

In case of plugin version you need to use scheduler_include.html and add following there:

<script type="text/javascript"> // code here </script>
Best regards,
Ilya

#8

thank you Ilya, it works. this calendar is really well made and thank you for your quick response :wink: