it’s included in the download of dhtmlxScheduler v.3.7. After extracting the zip file you should find a samples folder. Open the HTML sample page that stanislav suggested and by reading the source code you can have an idea on how to achieve that functionality.
There’s also some documentation here:
http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:sizing
and here:
http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:custom_events_display
I’ve playing around with that example and I think is working as you wanted now. Maybe you’ll have to make some adjustements to the css if you use other skins. It’s also possible to separate some css. Please note that the html tags have been stripped at the time of posting. Also keep in mind that "scheduler.xy.min_event_height = 14; " using the unit scale height of the sample sets the minimum duration of the event in 15 minutes. If I set a lower value the text of the event is cutted, so the solution is to increase the scale unit height.
[code]
dhtmlxScheduler: Custom event box
<script src="../../codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../../codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title"
charset="utf-8">
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.multi_day = false;
scheduler.config.xml_date = "%Y-%m-%d %H:%i";
scheduler.config.first_hour = 4;
scheduler.config.details_on_create = true;
scheduler.config.details_on_dblclick = true;
scheduler.config.icons_select = ["icon_details","icon_delete"];
scheduler.xy.min_event_height = 14;
scheduler.renderEvent = function(container, ev) {
var container_width = container.style.width; // e.g. "105px"
var container_height = container.style.height;
// move section
var html = "<div class='dhx_event_move dhx_header' style='width: " + (parseFloat(container_width) - 2) + 'px' + ";'></div>";
// container for event contents
html += "<div class='dhx_event_move dhx_body' style='cursor:pointer;padding-top:0px;padding-bottom:0px;height: " + container_height + ";width: " + (parseFloat(container_width) - 10) + 'px' + "'>";
// displaying event text
html += scheduler.templates.event_text(ev.start_date, ev.end_date, ev) + "</div>";
// resize section
html += "<div class='dhx_event_resize dhx_footer' style='width: " + (parseFloat(container_width) - 4) + 'px' + ";'></div>";
container.innerHTML = html;
return true; // required, true - we've created custom form; false - display default one instead
};
scheduler.init('scheduler_here', new Date(2010, 0, 10), "week");
scheduler.addEvent({
start_date: new Date(2010,0,7,13,0),
end_date: new Date(2010,0,7,13,30),
text: "30 minutes fit"
});
scheduler.addEvent({
start_date: new Date(2010,0,7,15,0),
end_date: new Date(2010,0,7,15,45),
text: "45 minutes"
});
scheduler.addEvent({
start_date: new Date(2010,0,8,9,30),
end_date: new Date(2010,0,8,11,30),
text: "2 hours"
});
}
</script>
[/code]
btw, I think that the support of the forum is great. Everybody gets a response in less than a business day. I’m using the free version and all my questions have been replied or at least they gave an idea on how to solve the problem.
Good luck!