Include "LAYOUT" in the "SCHEDULER" ??

Hey guys …

i want to include the Layout Script in my Scheduler. I put the example as an attachment file.

  1. What i have to do for this?
  2. Can i put any data in this box?

here is my code:

<!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>
	<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>	
 	<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>    
   <script src="extra/dhtmlxlayout.js" type="text/javascript" charset="utf-8"></script>
	<script src="extra/dhtmlxcontainer.js" type="text/javascript" charset="utf-8"></script>   
	<script src="../../codebase/ext/dhtmlxscheduler_map_view.js" type="text/javascript" charset="utf-8"></script>
   <script src="../../codebase/ext/dhtmlxscheduler_minical.js" type="text/javascript" charset="utf-8"></script>
   <script src="../../codebase/ext/dhtmlxscheduler_year_view.js" type="text/javascript" charset="utf-8"></script>
   <script src="../../codebase/ext/dhtmlxscheduler_units.js" type="text/javascript" charset="utf-8"></script>
   <script src="../../sources/locale_de.js" type="text/javascript" charset="utf-8"></script>
	
	<link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css" title="no title" charset="utf-8">
   <link rel="stylesheet" href="../../codebase/ext/dhtmlxscheduler_ext.css" type="text/css" media="screen" title="no title" charset="utf-8">
   <link rel="stylesheet" href="extra/dhtmlxlayout.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<link rel="stylesheet" href="extra/skins/dhtmlxlayout_dhx_skyblue.css" type="text/css" media="screen" 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() {
			var sections = scheduler.serverList("type");
			var dp2 = new dataProcessor("php/events_map_view.php");
			var dp3 = new dataProcessor("php/types.php");
			dp2.init(scheduler);
			dp3.init(scheduler);	
			
			var layout = new dhtmlXLayoutObject(document.body, "2U");    <--------  ???
		   layout.cells("a").setWidth(250);    <--------  ???
		   layout.cells("b").hideHeader();    <--------  ???
		   layout.cells("b").attachScheduler();    <--------  ???
					
			scheduler.config.xml_date="%Y-%m-%d %H:%i";
			scheduler.config.prevent_cache = true;
			scheduler.config.details_on_create = true;
		   scheduler.config.details_on_dblclick = true;
			scheduler.config.multi_day = true;		
						
			scheduler.locale.labels.unit_tab = "Techniker";
			scheduler.locale.labels.map_tab = "Google Map";
			scheduler.locale.labels.year_tab = "Jahresansicht";
			scheduler.locale.labels.section_description = "Auftragsnummer";
			scheduler.locale.labels.section_custom = "Techniker";
			scheduler.locale.labels.section_time = "Zeit";
									
			scheduler.xy.map_date_width = 180; // date column width
			scheduler.xy.map_description_width = 400; // description column width           

            // updating dates to display on before view change
            scheduler.attachEvent("onBeforeViewChange", function(old_mode, old_date, new_mode, new_date) {
                scheduler.config.map_start = scheduler.date.month_start(new Date((new_date||old_date).valueOf()));
                scheduler.config.map_end = scheduler.date.add(scheduler.config.map_start, 1, "month");
                return true;
            });

            // defining add function for prev/next arrows
            scheduler.date.add_map = function(date, inc) {
                return scheduler.date.add(date, inc, "month");
            };

            // defining date header 
            var format = scheduler.date.date_to_str("%Y-%m-%d");
            scheduler.templates.map_date = function(start, end, mode){
                return format(start)+" — "+format(end);
            };
			
			scheduler.config.map_inital_zoom = 8;
			
			scheduler.config.lightbox.sections=[	
	 		    {name:"description", height:18, map_to:"text", type:"textarea" , focus:true}, 			    
			//	{name:"location", height:43, map_to:"event_location", type:"textarea" },
				{name:"custom", height:23, type:"select", options:sections, map_to:"type" },
			//	{name:"recurring", height:115, type:"recurring", map_to:"rec_type", button:"recurring"},
			    {name:"time", height:72, type:"time", map_to:"auto"}
		    ]
			
			// Bis zu 9 Techniker
			scheduler.createUnitsView({name:"unit",property:"type",list:sections});
			
			// Bei mehr als 9 Technikern
			//scheduler.createUnitsView({name:"unit",property:"type",list:sections,size:9,step:5});			
			
			scheduler.init('scheduler_here',new Date(2011,9,1),"unit");	
			scheduler.load("php/types.php");
			//scheduler.load("php/events_map_view.php");			
		}	
		
		function show_minical(){
		if (scheduler.isCalendarVisible())
			scheduler.destroyCalendar();
		else
			scheduler.renderCalendar({
				position:"dhx_minical_icon",
				date:scheduler._date,
				navigation:true,
				handler:function(date,calendar){
					scheduler.setCurrentView(date);
					scheduler.destroyCalendar()
				}
			});
	     }
    </script>
</head>

<body onload="init();" >
	<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_minical_icon" id="dhx_minical_icon" onclick="show_minical()">&nbsp;</div>
         <div class="dhx_cal_tab" name="unit_tab" style="right:542px;"></div>
         <div class="dhx_cal_tab" name="map_tab" style="right:450px;"></div>
			<div class="dhx_cal_tab" name="day_tab" style="right:316px;"></div>
			<div class="dhx_cal_tab" name="week_tab" style="right:224px;"></div>			
			<div class="dhx_cal_tab" name="month_tab" style="right:132px;"></div>
            <div class="dhx_cal_tab" name="year_tab" style="right:40px;"></div>
		</div>
		<div class="dhx_cal_header"></div>
		<div class="dhx_cal_data"></div>		
	</div>
</body>

I want that the scheduler is on the right side like in the example but i didn’t work :frowning:

Thank you


Hello,

Please check scheduler\samples\05_calendar\04_layout.html sample.

Kind regards,
Ilya

Hello

This example you can see on the foto! I noticed this example but don’t understand why it works there and mine not :frowning:

Hello,

Call

layout.cells("b").attachScheduler();    <--------  ???

just before scheduler.load and instead of scheduler.init as it replaces it when you use scheduler with layout.

As to what those function do please check Layout API documentation.

Kind regards,
Ilya