Dhtmlx Scheduler, JQuery and the qTip 2 tooltip-library

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 :slight_smile: 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',

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

// 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
// Then call the reset_form-function so that our tooltip is empty the next time around
// 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
// Reset the 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('');

Now for the body.onLoad()-function:

	// Init the qTip
	// 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:

<!-- 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">&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="month_tab" style="right:76px;"></div>
	<div class="dhx_cal_header"></div>
	<div class="dhx_cal_data"></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() -->
		<h3>Tooltip Title</h3>
	<!-- Tooltip content inside the div - $('#box > div').html() -->
		Text: <input type="text" name="text" />

		Details: <input type="text" name="details" />
		<select name="duration">
			<option value="allday">All Day</option>
			<option value="halfday">Half a Day</option>
			<option value="other">Other</option>

		Display as: 
		&nbsp; Busy <input type="radio" name="display" value="busy"> &nbsp;
		&nbsp; Available <input type="radio" name="display" value="available" />

		<button onclick="close_form()">Cancel</button> &nbsp;
		<button onclick="save_form()">Save</button>

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!


Thank you for sharing it with us, looks nice :slight_smile:

Kind regards,