How to use both Tree and Scheduler

Scheduler Javascript
#1

Hi all,

I want to use both Tree and scheduler at a time so that i can list out all the Service Engineer grouped by Region using Tree and display the scheduler of each on slecting each Service Engineer

for that i want to use 2 divs left is for the SE list and the Right is to display the Schedular.

how can i achieve the same,and how to refresh the schedular with the activities of the selected SE.

I want to use Ajax Call and JOSN to fetch the Tasks/Appointments of SE.

Thanks and Regards
Tirupathi Rao.P

#2

Hello,

You can attach onClick handler for the tree and within it delete old events and load new.

In code it may look like this:

tree.attachEvent("onClick", function(itemId){ scheduler.clearAll(); // deleting old events loaded in the scheduler scheduler.load("php/events.php?id="+itemId+"); // loading events related to the selected tree branch };

Best regards,
Ilya

#3

Hi ,

I had table with 2 TDS in which for 1 TD i initialized the Tree which is rendering fine,where as in the other tree i intialized the Schedular But it is not rendering why?

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" ></meta>
	<title></title>
</head>
	<script src="codebase/dhtmlxscheduler.js?v=091201" type="text/javascript" charset="utf-8"></script>
	<script src="codebase/ext/dhtmlxscheduler_agenda_view.js?v=091201" type="text/javascript" charset="utf-8"></script>
	<script src="codebase/ext/dhtmlxscheduler_year_view.js?v=091201" type="text/javascript" charset="utf-8"></script>
	 <link rel="stylesheet" type="text/css" href="codebase/dhtmlxtree.css"></link>
     <script  src="codebase/dhtmlxcommon.js"></script>
	<script  src="codebase/dhtmlxtree.js"></script>
	<script  src="codebase/ext/dhtmlxtree_start.js"></script>

	<link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8"></link>
	<link rel="stylesheet" href="codebase/ext/dhtmlxscheduler_ext.css" type="text/css" title="no title" charset="utf-8"></link>
 
	
<style type="text/css" media="screen"> 
	html, body{
		margin:0px;
		padding:0px;
		height:100%;
		overflow:hidden;
	}	
</style>
 
<script type="text/javascript" charset="utf-8"> 



	function init() {
		 var tree = new dhtmlXTreeObject("treeBox","100%","100%",0);
		 tree.setImagePath("codebase/imgs/");	
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		scheduler.config.first_hour = 8;
		 scheduler.config.last_hour = 20;
		scheduler.config.date_step = "5";
		scheduler.init('scheduler_here');
		scheduler.load("events.xml");
		
	}
</script>
 
<body onload="init();">
<table>
<tr>
<td>
 <div id="treeboxbox_tree" setImagePath="codebase/imgs/csh_bluebooks/" 
 						class="dhtmlxTree" style="width:250px; height:218px; 
 						background-color:#f5f5f5;border :1px solid Silver;">
    <ul>
        <li>SE
        <ul>
            <li>SouthZone
            <ul>
                <li>Region Head</li>
            </ul>
            </li>
            <li>EastZone</li>
                   </ul>
        </li>
    </ul>
</div>


</td>
<td><div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:75%;'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_cal_tab" name="day_tab" style="right:332px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:268px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="year_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="agenda_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>		
	</div>
	
</td>
</tr>

</table>
</body>

What went rong can u help me in sorting out the issue ???

#4

Hello,

Checkout answer in the nearby topic - How to use DHTMX Scheduler in TABLE CELL.

Best regards,
Ilya

#5

Hi,
I am facing one problem when i am clicking one node(user) in a tree i am displaying all the events of him in the Scheduler, but if i click the other node and coming back to this previous visited node i am facing error… Please do help me in sorting this issue


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" ></meta>
	<title></title>
</head>
	<script src="codebase/dhtmlxscheduler.js?v=091201" type="text/javascript" charset="utf-8"></script>
	<script src="codebase/ext/dhtmlxscheduler_agenda_view.js?v=091201" type="text/javascript" charset="utf-8"></script>
	<script src="codebase/ext/dhtmlxscheduler_year_view.js?v=091201" type="text/javascript" charset="utf-8"></script>
	 <link rel="stylesheet" type="text/css" href="codebase/dhtmlxtree.css"></link>
     <script  src="codebase/dhtmlxcommon.js"></script>
	<script  src="codebase/dhtmlxtree.js"></script>
	<script  src="codebase/ext/dhtmlxtree_start.js"></script>
	<script  src="codebase/ext/dhtmlxtree_json.js"></script>
	<script src="codebase/ext/dhtmlxtree_ed.js"></script>
<script src="codebase/ext/dhtmlxtree_er.js"></script>


	<link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8"></link>
	<link rel="stylesheet" href="codebase/ext/dhtmlxscheduler_ext.css" type="text/css" title="no title" charset="utf-8"></link>
 
	
<style type="text/css" media="screen"> 
	html, body{
		margin:0px;
		padding:0px;
		height:100%;
		overflow:hidden;
	}	
</style>
 
<script type="text/javascript" charset="utf-8">
var doctorData = {
		id : 0,text:"Physicians",
		item : [ {
			id : 1,
			"text" : "Cardiology",
			item : [ {
				id : "11",
				"text" : "Dr.Ramesh"
			}, {
				id : "12",
				text : "Dr.Zakir"
			}, {
				id : "13",
				text : "Dr.Danial"
			} ]
		}, {
			id : 2,
			text : "OrthoPedic",
			child : "1",
			img0 : "book.gif",
			item : [ {
				id : "21",
				text : "Dr.Rao"
			}, {
				id : "22",
				text : "Dr.KesuBhai"
			}, {
				id : "23",
				text : "Dr.Devi"
			} ]
		}, {
			id : 3,
			text : "Gynecology",
			item : [ {
				id : "31",
				text : "Dr.Ruksar"
			}, {
				id : "32",
				text : "Dr.Prasanthi"
			}, {
				id : "33",
				text : "Dr.Meri"
			} ]
		} ]
	};


var phlebotomistData = {
		id : 0,text:"Phlebotomist",
		item : [ {
			id : 1,
			text : "Pathology",
			item : [ {
				id : "11",
				text : "Dr.Ramesh"
			}, {
				id : "12",
				text : "Dr.Zakir"
			}, {
				id : "13",
				text : "Dr.Danial"
			} ]
		}, {
			id : 2,
			text : "Oncology",
			child : "1",
			img0 : "book.gif",
			item : [ {
				id : "21",
				text : "Dr.Rao"
			}, {
				id : "22",
				text : "Dr.KesuBhai"
			}, {
				id : "23",
				text : "Dr.Devi"
			} ]
		}, {
			id : 3,
			text : "Radiology",
			item : [ {
				id : "31",
				text : "Dr.Ruksar"
			}, {
				id : "32",
				text : "Dr.Prasanthi"
			}, {
				id : "33",
				text : "Dr.Meri"
			} ]
		} ]
	};



	function init() {
		

		initPhysicianList();
		initPhlebotomist();
        initScheduler();
		
	}
	function initPhysicianList(){

		var tree = new dhtmlXTreeObject("doctor_tree","100%","100%",0);
		tree.setImagePath("codebase/imgs/csh_bluebooks/");
		tree.loadJSONObject(doctorData);
		tree.attachEvent("onSelect",function(id){
				   if(scheduleData[tree.getItemText(id)]){
				   scheduler.clearAll();
				   
				   alert(scheduleData[tree.getItemText(id)]);
					   scheduler.parse(scheduleData[tree.getItemText(id)],"json");
			   }
			
		      return true;
		    });
	}

	function initPhlebotomist(){

		var tree1 = new dhtmlXTreeObject("lab_tree","100%","100%",0);
		tree1.setImagePath("codebase/imgs/csh_bluebooks/");
		tree1.loadJSONObject(phlebotomistData);
		tree1.attachEvent("onSelect",function(id){
			   if(scheduleData[tree1.getItemText(id)]){
			       scheduler.clearAll();
			       
			       
				   scheduler.parse(scheduleData[tree1.getItemText(id)],"json");
		   }
		
	      return true;
	    });
		
	}

	
var scheduleData={

"Dr.Prasanthi":[
		{ start_date:"2010-10-25 6:00", end_date:"2010-10-25 8:00", text:"Dr.Prasanthi"},
		{ start_date:"2010-10-26 10:00", end_date:"2010-10-26 13:00", text:"Some text"}
	],
	"Dr.KesuBhai":[
			{ start_date:"2010-10-25 6:00", end_date:"2010-10-25 8:00", text:"Dr.KesuBhai"},
			{ start_date:"2010-10-26 10:00", end_date:"2010-10-26 13:00", text:"Some text"}
		],
		"Dr.Zakir":[
				{ start_date:"2010-10-25 6:00", end_date:"2010-10-25 8:00", text:"Dr.Zakir"},
				{ start_date:"2010-10-26 10:00", end_date:"2010-10-26 13:00", text:"Some text"}
			],
			"Dr.Meri":[
					{ start_date:"2010-10-25 6:00", end_date:"2010-10-25 8:00", text:"Dr.Meri"},
					{ start_date:"2010-10-26 10:00", end_date:"2010-10-26 13:00", text:"Some text"}
				]
		
};
var tempData=scheduleData;
	
	function initScheduler(){

		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		scheduler.config.first_hour = 8;
		scheduler.config.last_hour = 20;
		scheduler.config.date_step = "5";
		
		scheduler.init('scheduler_here',new Date(),"week");
		
		
	}
</script>
 
<body onload="init();">


<div>
<table align="center" border=0 cellspacing="0" cellpadding="0"
		width="100%" bgcolor="#F1F4F8">
		<tr>
			<td bgcolor="#D6E1E9"><img src="images/img1.gif" height="100" />
			</td>
		</tr>

		<tr>
			<td valign="top"><img src="images/img3.gif" width="100%"
				height="20" /></td>
		</tr>
		</table>

</div>
<table  style='width:100%; height:405px;' cellspacing="0" cellpadding="0">
<tr>
<td valign="top">

<div style="background-color:#C5DEFA;border :1px solid Silver;font-family: arial;font-size: 12px;font-weight: bold;">Physicians List</div>
<div id="doctor_tree"
	style="width: 250px; height: 180px; background-color: #f5f5f5; border: 1px solid Silver;"></div>
	
<div style="background-color:#C5DEFA;border :1px solid Silver;font-family: arial;font-size: 12px;font-weight: bold;">Phlebotomist List</div>
<div id="lab_tree"
	style="width: 250px; height: 182px; background-color: #f5f5f5; border: 1px solid Silver;"></div>
    
</td>
<td style='width:100%; height:405px;' valign="top">

<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:400px;'>
		<div class="dhx_cal_navline">
			<div class="dhx_cal_prev_button">&nbsp;</div>
			<div class="dhx_cal_next_button">&nbsp;</div>
			<div class="dhx_cal_today_button"></div>
			<div class="dhx_cal_date"></div>
			<div class="dhx_cal_tab" name="day_tab" style="right:332px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:268px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:204px;"></div>
			<div class="dhx_cal_tab" name="year_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="agenda_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>		
	</div>
	
</td>
</tr>

</table>
<div>
<table width="100%">
<tr>
			<td valign="top"><img src="images/img3.gif" width="100%"
				height="20" /></td>
		</tr>


	</table>
</div>
</body>
#6

Hello,

scheduler.parse method is parsing original array and additionally converts dates, adds properties and so on.
So a copy of the original array should be given to the scheduler in such case.
Though note there won’t be such problem if you are going to get list of events by AJAX request as new object will be parsed each time.

Edit the sample the following way to get it working:

[code]function initPhysicianList(){
var tree = new dhtmlXTreeObject(“doctor_tree”,“100%”,“100%”,0);
tree.setImagePath("…/…/codebase/imgs/csh_bluebooks/");
tree.loadJSONObject(doctorData);
tree.attachEvent(“onSelect”,function(id){
if(scheduleData[tree.getItemText(id)]){
scheduler.clearAll();
var events = _cloneEventsArray(scheduleData[tree.getItemText(id)]);
scheduler.parse(events,“json”);
}
return true;
});
}
function initPhlebotomist(){
var tree1 = new dhtmlXTreeObject(“lab_tree”,“100%”,“100%”,0);
tree1.setImagePath("…/…/codebase/imgs/csh_bluebooks/");
tree1.loadJSONObject(phlebotomistData);
tree1.attachEvent(“onSelect”,function(id){
if(scheduleData[tree1.getItemText(id)]){
scheduler.clearAll();
var events = _cloneEventsArray(scheduleData[tree1.getItemText(id)]);
scheduler.parse(events,“json”);
}
return true;
});
}

function _cloneEventsArray(arr) {
var copied_object = [];
for(var i=0; i<arr.length; i++) {
copied_object[i] = {}
for(var k in arr[i]) {
copied_object[i][k] = arr[i][k];
}
}
return copied_object;
} [/code]

Best regards,
Ilya