Custom display for events

Custom display for events

There is the possibility to define custom display for events.

  • The template for the box is specified by the property DHXScheduler.Templates.EventBox 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 'take' the display defined in this object.

The DHXEventTemplate object has 4 properties:

  1. CanDrag - (bool) defines whether the event box can be dragged
  2. CanResize - (bool) defines whether dragging the box will change the event duration
  3. CssClass - (string) the css class that will be applied to the box
  4. Template - (string) the template for the box. Defined as a usual template (DHXScheduler.Templates).
    The template function takes 3 parameters: ev, start, end (details).

If you don't want to use the default 'drag', 'resize' controls you should set the CanDrag, 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>
                    <% } %>                  
                    <div style=""padding-top:5px;"">
                        Duration: about <b><%= Math.ceil((ev.end_date - ev.start_date) / (60 * 60 * 1000)) %></b> hours
         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 dhtmlxScheduler documentation - Custom event's box

comments powered by Disqus