Thought I’d share this trick with the community.
If you’ve never used the qTip-library, you should definitely check it out. Craig Thompson over at http://craigsworks.com has done a tremendeous job developing this flexible and versatile tooltip-library.
Given how configurable the Scheduler and the qTip-libs are, I thought I’d combine them and replace the lightbox supplied with Scheduler, with a modal tooltip from the qTip2 library, using JQuery to “glue” it together, so to speak 
Alrighty, here we go:
So what you’ll need, is a copy of the qTip2 nightly from [url]http://craigsworks.com/projects/qtip2/download/[/url] , the Scheduler (of course), and JQuery. Once you’ve included those on your page, you should be ready.
Ok, first off. Configure the qTip-instance we want to use to replace the default lightbox:
<script type="text/javascript" language="Javascript">
qtip_conf = {
id: 'box',
position: {
my: 'center',
at: 'center',
target: $(document.body)
},
show: {
modal: {
on: true,
blur: false
},
},
content: {
title: $('div#box > span').html(),
text: $('div#box > div').html(),
},
style: {
classes: 'ui-tooltip-jtools',
},
};
</script>Ok, now the most important part: Overloading the default Schedule-functions for manipulating the lightbox and the inputs inside the lightbox:
<script type="text/javascript" language="Javascript">
// Overload the default showLightbox function. This one is called when starting to edit an event
scheduler.showLightbox = function(id)
{
// Fetch Scheduler's event-object
var event = scheduler.getEvent(id);
scheduler._lightbox_id = id;
// Tell the qTip to show itself
$('#box').qtip('show');
// Fetch the tooltip-element
var lb = $('#ui-tooltip-box');
// Here we set the inputs inside the lightbox based on what's stored in Scheduler's event-object
$('input, select, textarea', lb).each(function(){
// First get the current element's name
var name = $(this).attr('name');
// Now set it's value to the value stored in Scheduler
$(this).val( event[name] );
});
}
// This function is called from the save-button inside the tooltip
function save_form()
{
// Fetch Scheduler's event
var event = scheduler.getEvent(scheduler.getState().lightbox_id);
// Then the tooltip-element
var lb = $('#ui-tooltip-box');
// Iterate through the input-elements inside the tooltip
$('input, select, textarea', lb).each(function(){
// Get the current element's name
var name = $(this).attr('name');
// Insert the value in the event-object
event[name] = $(this).val();
});
// Now hide the qtip
$('#box').qtip('hide');
// Then call the reset_form-function so that our tooltip is empty the next time around
reset_form();
// Lastly call scheduler's native function and tell it to make the necessary changes to the calendar-views
scheduler.endLightbox(true, null)
}
// This function is called when just closing the form with the button inside the tooltip
function close_form()
{
// Tell the qtip to hide
$('#box').qtip('hide');
// Reset the form
reset_form();
// Inform Scheduler that no changes were made and that the tooltip is gone
scheduler.endLightbox(false, null);
}
// Simple function to reset the inputs and selects inside the tooltip
function reset_form()
{
var lb = $('#ui-tooltip-box');
$('input, select, textarea', lb).val('');
}
</script>Now for the body.onLoad()-function:
$(function(){
// Init the qTip
$('#box').qtip(qtip_conf);
// Prepare Scheduler for initialization:
scheduler.config.details_on_create = true;
// Init Scheduler and load data
scheduler.init('schedule', null, 'month');
scheduler.load('path/to/ur/data', 'format');
});Finally, the HTML required for this setup is as follows:
<body>
<!-- Default Scheduler HTML Structure -->
<div id="schedule" class="dhx_cal_container" style='width:100%; height:700px;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </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="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header"></div>
<div class="dhx_cal_data"></div>
</div>
<!-- The HTML we will use as a replacement for the lightbox -->
<div id="box" style="display:none"> <!-- Note display:none -->
<!-- Tooltip title inside the span - $('#box > span').html() -->
<span>
<h3>Tooltip Title</h3>
</span>
<!-- Tooltip content inside the div - $('#box > div').html() -->
<div>
Text: <input type="text" name="text" />
Details: <input type="text" name="details" />
Duration:
<select name="duration">
<option value="allday">All Day</option>
<option value="halfday">Half a Day</option>
<option value="other">Other</option>
</select>
Display as:
Busy <input type="radio" name="display" value="busy">
Available <input type="radio" name="display" value="available" />
<button onclick="close_form()">Cancel</button>
<button onclick="save_form()">Save</button>
</div>
</div>
</body>I haven’t tested this particular setup, but I’ve got another implementation workingas evidenced by this image (a work in progress, I might add): [url]http://cl.ly/010E0c1X2T0k0P3h1n1G[/url]. Also, I’ve uploaded a file with all the code from this post - example.zip (2.01 KB)
Good luck!
