dhtmlxScheduler provides the possibility to define custom display for events.
Events customizing is achieved with the help of the renderEvent method:
scheduler.renderEvent = function(container, ev) {
// your customizing code
}
Related sample: Custom event box
var html = "<div class='dhx_event_move my_event_move' "
Here is an example of some custom look:
Specifying a custom look for the event's box
scheduler.templates.event_class = function(start, end, event) {
return "my_event";
};
scheduler.renderEvent = function(container, ev) {
var container_width = container.style.width; // e.g. "105px"
// move section
var html = "<div class='dhx_event_move my_event_move' style='width: " +
container_width + "'></div>";
// container for event's content
html+= "<div class='my_event_body'>";
html += "<span class='event_date'>";
//two options here:show only start date for short events or start+end for long
if ((ev.end_date - ev.start_date)/60000>40){//if event is longer than 40 minutes
html += scheduler.templates.event_header(ev.start_date, ev.end_date, ev);
html += "</span><br/>";
} else {
html += scheduler.templates.event_date(ev.start_date) + "</span>";
}
// displaying event's text
html += "<span>" + scheduler.templates.event_text(ev.start_date,ev.end_date,ev)+
"</span>" + "</div>";
// resize section
html += "<div class='dhx_event_resize my_event_resize' style='width: " +
container_width + "'></div>";
container.innerHTML = html;
return true; //required, true - to display a custom form, false - the default form
};
and the related CSS is the following:
<style type="text/css" > html, body {
margin: 0;
padding: 0;
}
/* the background color for the whole container and its border*/
.my_event {
background-color: #add8e6;
border: 1px solid #778899;
overflow: hidden;
}
/* disabling the default color for the select menu */
.dhx_cal_select_menu.my_event div {
border: 0;
background-color: transparent;
color: black;
}
/* styles for the event content */
.dhx_cal_event.my_event .my_event_body {
padding-top: 3px;
padding-left: 5px;
}
/* event's date information */
.my_event .event_date {
font-weight: bold;
padding-right: 5px;
}
/* event's resizing section */
.my_event_resize {
height: 3px;
position: absolute;
bottom: -1px;
}
/* event's move section */
.my_event_move {
position: absolute;
top: 0;
height: 10px;
cursor: pointer;
}
</style>
Related sample: Custom event box
Back to top