Extensions don't play nice together. Readonly and Tooltip

Scheduler Javascript
#1

I added extensions recurrring and unit which work great. When adding readonly and tooltip however, not so great. Tooltips don’t show up at all, no matter what view I’m on. The events are still editable and draggable. I have attached my code below.

<?php 
$this->headScript()
	->appendFile($this->baseUrl().'/externals/jquery-lib/jquery.variable.debugger.js')
	->appendFile($this->baseUrl().'/externals/dhtmlxScheduler/dhtmlxscheduler.js')
	->appendFile($this->baseUrl().'/externals/dhtmlxScheduler/ext/dhtmlxscheduler_recurring.js')
	->appendFile($this->baseUrl().'/externals/dhtmlxScheduler/ext/dhtmlxscheduler_units.js')
	->appendFile($this->baseUrl().'/externals/dhtmlxScheduler/ext/dhtmlxscheduler_tooltip.js')
	->appendFile($this->baseUrl().'/externals/dhtmlxScheduler/ext/dhtmlxscheduler_readonly.js');
	
$this->headLink()
	->appendStylesheet($this->baseUrl().'/externals/dhtmlxScheduler/dhtmlxscheduler.css')
	->appendStylesheet($this->baseUrl().'/externals/dhtmlxScheduler/ext/dhtmlxscheduler_recurring.css')
	->appendStylesheet($this->baseUrl().'/externals/dhtmlxScheduler/ext/dhtmlxscheduler_ext.css');
?>

<div id='profile_schedule' style="height:600px;">
 	<script type="text/javascript" charset="utf-8">
 	jQuery(document).ready(function() {
 		var sections=[
 	 		{key:1, label:"KA"},
 	 		{key:2, label:"Crazy Horse"},
 	 		{key:3, label:"Lion Habitat"},
 	 		{key:4, label:"Wet Republic"},
 	 		{key:5, label:"Business Hours"}
 	 	];

 		scheduler.templates.tooltip_date_format=scheduler.date.date_to_str("%Y-%m-%d %H:%i");
	
 	 	scheduler.locale.labels.unit_tab = "Events"
 	 	scheduler.locale.labels.section_custom="Event";
 	 	scheduler.locale.labels.section_description = "Comment";
 	 	scheduler.locale.labels.new_event = "New scheduled time";

 	 	function block_readonly(id){

			if (!id) return true;

			return !this.getEvent(id).readonly;

		}
	 		
		scheduler.config.xml_date="%Y-%m-%d %H:%i";
		scheduler.config.details_on_create=true;
		scheduler.config.details_on_dblclick=true;
		scheduler.config.lightbox.sections=[	
        	{name:"custom", height:23, type:"select", options:sections, map_to:"section_id" },
        	{name:"description", height:40, map_to:"text", type:"textarea", focus:true},
    		{name:"recurring", height:115, map_to:"rec_type", type:"recurring" , button:"recurring"},
        	{name:"time", height:72, type:"time", map_to:"auto"}
        ]
                    		
        scheduler.createUnitsView("unit","section_id",sections);


		scheduler.init('scheduler_here',new Date(2009,6,1),"month");
		scheduler.load("xml/r.xml");

		scheduler.attachEvent("onBeforeDrag",block_readonly)
		scheduler.attachEvent("onClick",block_readonly)

		
	});
	</script>
	
	<style type="text/css">
	.dhx_cal_navline, .dhx_cal_navline div, .dhx_cal_header div {
	    color: #2F3A48;
	}
	.dhx_cal_light select {
		background-color:white;	
	}
	</style>

	<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="unit_tab" style="right:280px;"></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="month_tab" style="right:76px;"></div>
		</div>
		<div class="dhx_cal_header">
		</div>
		<div class="dhx_cal_data">

		</div>		
	</div>

</div>

Here is my xml:

<data>
	<event id="1">
		<start_date><![CDATA[2009-07-01 00:00:00]]></start_date>
		<end_date><![CDATA[9999-02-01 00:00:00]]></end_date>
		<text><![CDATA[Second Friday]]></text>
		<rec_type><![CDATA[month_1_5_2_#no]]></rec_type>
		<event_pid><![CDATA[0]]></event_pid>
		<section_id><![CDATA[1]]></section_id>
		<event_length><![CDATA[86400]]></event_length>
	</event>
	<event id="2">
		<start_date><![CDATA[2009-06-29 10:00:00]]></start_date>
		<end_date><![CDATA[9999-02-01 00:00:00]]></end_date>
		<text><![CDATA[Test build]]></text>
		<rec_type><![CDATA[week_3___0,1,3,6#no]]></rec_type>
		<event_pid><![CDATA[0]]></event_pid>
		<section_id><![CDATA[2]]></section_id>
		<event_length><![CDATA[3600]]></event_length>
	</event>
	<event id="3">
		<start_date><![CDATA[2009-07-22 10:00:00]]></start_date>
		<end_date><![CDATA[2009-07-22 11:00:00]]></end_date>
		<text><![CDATA[]]>
		</text>
		<rec_type><![CDATA[none]]></rec_type>
		<event_pid><![CDATA[2]]></event_pid>
		<section_id><![CDATA[2]]></section_id>
		<event_length><![CDATA[1248246000]]></event_length>
	</event>
	<event id="4">
		<start_date><![CDATA[2009-07-21 00:00:00]]></start_date>
		<end_date><![CDATA[2009-08-30 00:00:00]]></end_date>
		<text><![CDATA[Each 8 days, 5 times]]></text>
		<rec_type><![CDATA[day_8___#5]]></rec_type>
		<event_pid><![CDATA[0]]></event_pid>
		<section_id><![CDATA[3]]></section_id>
		<event_length><![CDATA[172800]]></event_length>
	</event>
	<event id="5">
		<start_date><![CDATA[2009-07-16 10:00:00]]></start_date>
		<end_date><![CDATA[2009-07-16 11:00:00]]></end_date>
		<text><![CDATA[Test build]]></text>
		<rec_type><![CDATA[]]>
		</rec_type>
		<event_pid><![CDATA[2]]></event_pid>
		<section_id><![CDATA[4]]></section_id>
		<event_length><![CDATA[1247814000]]></event_length>
	</event>
	<event id="6">
		<start_date><![CDATA[2009-06-29 10:00:00]]></start_date>
		<end_date><![CDATA[2009-06-29 11:00:00]]></end_date>
		<text><![CDATA[]]>
		</text>
		<rec_type><![CDATA[none]]></rec_type>
		<event_pid><![CDATA[2]]></event_pid>
		<section_id><![CDATA[4]]></section_id>
		<event_length><![CDATA[1246258800]]></event_length>
	</event>
</data>
#2

Hello, Bryan.

Do you use IE? Anyway please update tooltip extension to the latest version (available on the Known issues page).

That’s correct. Readonly extension only creates read-only lightbox form, it doesn’t affect actions.
Though you have added handlers for 2 events:

scheduler.attachEvent("onBeforeDrag",block_readonly) scheduler.attachEvent("onClick",block_readonly)
Now depending on ‘block_readonly’ function result those actions will be blocked or not.

function block_readonly(id){ if (!id) return true; return !this.getEvent(id).readonly; }
That means if event property ‘readonly’ is set to true — event will be blocked. Now please note that all of your events doesn’t have that property, so Click and Drag actions are not blocked for them.

Best regards,
Ilya

#3

Hi Bryan,

Short n Hack …

Can override a blank onDragBefore method to block dragging events

//To make readonly
scheduler.config.readonly_form = true;

//To stop dragging
scheduler.attachEvent(“onBeforeDrag”, function (event_id, mode, native_event_object){
});

Its working for me…
Hope the same for you

Cheers
AmitSharma