Custom Display of Events

There is the possibility to define custom display of events. There are several common instructions:

• The template for the box is specified by the DHXScheduler.Templates.EventBox property, which is null by default.
• If you don't change the property value, the default rendering is used.
• If you set the property to some DHXEventTemplate object, the events are displayed as defined in this object.

The DHXEventTemplate object has 4 properties:

• CanDrag - (boolean) defines whether the event box can be dragged
• CanResize - (boolean) defines whether dragging of the box will change the event duration
• CssClass - (string) the CSS class that will be applied to the box
• Template - (string) the template for the box. Defined as a usual template (DHXScheduler.Templates). The template function takes 3 parameters:
  • start
  • end
  • event

Read the details here.

If you don't want to use the default 'drag', 'resize' controls you should set the CanDrag and CanResize properties to false and define your custom controls in the Template parameter.

In this case, note that some styles have special purpose (they must go first):

• dhx_event_move - an element with this style can be dragged (usually, it's the event header)
• dhx_event_resize - dragging an element with this style will change the event duration

Here is a sample of some custom look:

public ActionResult CustomEventBox()
{
  var sched = new DHXScheduler(this);
  var evBox = new DHXEventTemplate();
  evBox.CssClass = sched.Templates.event_class = "my_event";
  evBox.Template =
    @"<div class='my_event_body'>
        <% if((ev.end_date - ev.start_date) / 60000 > 60) { %>
            <span class='event_date'>{start_date:date(%H:%i)} - {end_date:date(%H:%i)}</span><br/>
        <% } else { %>
            <span class='event_date'>{start_date:date(%H:%i)}</span>
        <% } %>
        <span>{text}</span>
        <br>
        <div style=""padding-top:5px;"">
           Duration: about <b><%= Math.ceil((ev.end_date - ev.start_date) / (60 * 60 * 1000)) %></b> hours
        </div>
      </div>";
 
  sched.Templates.EventBox = evBox;
  return View(sched);
}

Note, the same result can be achieved with the client-side library. You can read more on the topic in the related article of dhtmlxScheduler documentation - Custom Event's Box.