working hours in mobile scheduler

Discontinued products Scheduler for Mobile and Touch devices
#1

Hi,

I’m trying to limit the mobile scheduler to working hours (8am to 6pm). I’ve read through the forums and the documentation but cant get the control to limit the hours. can someone tell me where I’m going wrong. I’ve listed my code below.

<link type="text/css" rel="stylesheet" href="css/schedule.css"/>
<link type="text/css" rel="stylesheet" href="codebase/dhtmlxscheduler_mobile.css"/>    

<script type="text/javascript" src="javascript/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="codebase/dhtmlxscheduler_mobile.js"></script>
<script type="text/javascript" src="codebase/ext/dhtmlxscheduler_limit.js"></script>
<script type="text/javascript" language="Javascript">

	dhx.ready(function(){
		
		scheduler.config.header_date = "%m-%d-%Y"		
		scheduler.config.show_loading=true;
		scheduler.config.readonly = true;
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		
		scheduler.config.limit_view  = true;
		scheduler.config.first_hour = 8;
		scheduler.config.last_hour = 18;
		
		dhx.ui.fullScreen();
		dhx.ui({
			view: "scheduler",
			id: "scheduler"
		});
		
		$$("scheduler").parse(
			[ { start_date:"2011-09-10 18:00", end_date:"2011-09-10 19:00", text:"Event 1"},
				{ start_date:"2011-09-10 19:00", end_date:"2011-09-10 21:00", text:"Event 2"} ],
			"json"		
		);

	});
#2

Try to use

dhx.ui({ view: "scheduler", id: "scheduler" }); $$('scheduler').$$('dayevents').define("firstHour", 8); $$('scheduler').$$('dayevents').define("lastHour", 16);

#3

Hi,

I tried the code listed above but it gave me this error.

dhtmlxscheduler_limit.js : Uncaught TypeError: Object # has no method ‘attachEvent’.

Simon

#4

Hello,

Correct code:

$$('scheduler').$$('dayList').define("firstHour", 8); $$('scheduler').$$('dayList').define("lastHour", 16);
Kind regards,
Ilya

#5

Hi,

I’ve tried the new code above but I still get the same error.

dhtmlxscheduler_limit.js Uncaught TypeError: Object # has no method 'attachEvent.

Thanks

Simon

#6

Can you provide some kind of demo?

You are refering to dhtmlxscheduler_limit.js, but it is part of desktop scheduler and can’t be used with mobile version.

#7

Hi,

I was under the assumption that the mobile client needed the same set of JS files as the desktop client. Once I removed the dhtmlxscheduler_limit.js file the sample code worked.

Thanks

Simon

#8

the only file which is necessary for mobile version

dhtmlxscheduler_mobile.js

it contains all necessary code.
( mobile client doesn’t have all functionality of browser version )

#9

I’m also able to get this working.

However, what I really want to do is shade the non-work hours, not remove them.

Events could still show for non work hours, just like any other event.

Any ideas on this

Thanks jim

#10

However, what I really want to do is shade the non-work hours, not remove them.

There is not a ready solution. However, you may use the following approach - after the “dayList”
is rendered, you may loop through its child items and change background color for scale nodes that repesent non-work hours:

var startHour = 8; var endHour = 18; $$("scheduler").$$("dayList").attachEvent("onAfterRender",function(){ var i,j,nodes; nodes = $$("scheduler").$$("dayList").$view.firstChild.childNodes; for(i=0; i< nodes.length; i++){ if(nodes[i].className == "dhx_dayevents_scale_item"){ if(!j){ j = i; } if((i-j)<startHour||(i-j)>endHour){ nodes[i].style.backgroundColor = "#eee"; } } } });

#11

Outstanding, this does exactly what I was hoping.

Thanks for looking into this…