Schedule staff and their works

Scheduler Javascript
#1

Hi everyone!

My first post here. Im quite a newbie, so I need a little help please.

I want to have the following (no need for week or month view)

When calendar loads. The staff working that day are showed. Staff not working arent showed at all. All of us works shift. So we work days, evenings and weekends after a schedule for 6 weeks. Then our schedule starts over again. (recurrency)

Every workday, we have our assignments. So they should be placed (even this is recurrent)
But, if someone is sick. We would love to drag and drop the assignment for the sick person to rest of staff working that day.
All assignment for each staff should have its own colors, so we can see what assignments were moved that day.

And everything should be saved in database (mysql)

Im started with 01_recurring_events.html which loads/adds from database fine, but how to show each staff working?

#2

Check
samples\03_extensions\02_units_view.html
samples\06_timeline\02_lines.html

Both modes allows to show tasks-per-person and can be combined with recurring view.

#3

So far it looks like this:
No data from database and if I create a new appointment nothing is saved.
And how to add reccurent appointments?

<!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">
	<title></title>
</head>
	<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../codebase/ext/dhtmlxscheduler_units.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="../../codebase/dhtmlxscheduler_glossy.css" type="text/css" title="no title" charset="utf-8">

	
<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() {
		window.resizeTo(950,700)
		modSchedHeight();
		
		var sections=[
			{key:1, label:"Rad 1"},
			{key:2, label:"Rad 2"},
			{key:3, label:"Rad 3"},
			{key:3, label:"Rad 4"},
			{key:4, label:"Rad 5"}
		];
		
		scheduler.locale.labels.unit_tab = "Persons"
		scheduler.locale.labels.section_custom="Assigned to";
		scheduler.config.details_on_create=true;
		scheduler.config.details_on_dblclick=true;
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		scheduler.config.lightbox.sections=[	
			{name:"description", height:130, map_to:"text", type:"textarea" , focus:true},
			{name:"custom", height:23, type:"select", options:sections, map_to:"section_id" },
			{name:"time", height:72, type:"time", map_to:"auto"}
		]
		
		scheduler.createUnitsView("unit","section_id",sections);
		
		scheduler.init('scheduler_here',new Date(2009,5,30),"unit");

		scheduler.load("php/events_rec.php");
		
		var dp = new dataProcessor("php/events_rec.php");
		dp.init(scheduler);

	}
</script>

<body onload="init();" onresize="modSchedHeight()">
	
	
	
	
	
	<!-- info block 
		href-prev
		href-next
		title
		desc-short
		desc-long
-->
	<script>
		function modSchedHeight(){
			var headHeight = 100;
			var sch = document.getElementById("scheduler_here");
			sch.style.height = (parseInt(document.body.offsetHeight)-headHeight)+"px";
			var contbox = document.getElementById("contbox");
			contbox.style.width = (parseInt(document.body.offsetWidth)-300)+"px";
		}
	</script>
	<div style="height:95px;background-color:#3D3D3D;border-bottom:5px solid #828282;">
		<a style="float:left;margin:22px 0 0 25px;" href="sample_recurring.shtml"><img src="images/btn-left.gif"></a>
		<div id="contbox" style="float:left;color:white;margin:22px 75px 0 75px; overflow:hidden;font: 17px Arial,Helvetica;color:white">
			<div style="border-right:5px solid #2D8EB6;color:#2D8EB6;width:175px;height:50px;float:left;text-align:right;padding-right:25px;">Resources View</div>
			<div style="font-size:12px;padding-left:225px;width:400px;">Manage appointments, tasks and schedulers for multiple resources (people, projects, etc.)</div>
			<div style="font-size:12px;padding-left:225px;margin-top:5px;color:#949292;width:400px;">You can add/edit/delete events, but changes will be available only until the demo is reloaded.</div>
		</div>
		<a style="float:right;margin:22px 25px 0 0;" href="sample_timeline.shtml"><img src="images/btn-right.gif"></a>
	</div>
	<!-- end. info block -->
	
	<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
		<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:204px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
			<div class="dhx_cal_tab" name="unit_tab" style="right:280px;"></div>
			<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">
		</div>		
	</div>
</body>
#4

You need to edit config.php file

(common/config.php)

and also import dump.sql file in your database

#5

Try to load php/events_rec.php in new window and check that it responds with correct data.
As for recurring events - check
docs.dhtmlx.com/doku.php?id=dhtm … ing_events