Calendar: Events Overview

You can handle events by overriding the appropriate OnSomething method in your custom class that derives from the DayPilotCalendar class.

There are several types event types:

Rendering events

Use them to customize the appearance, especially the HTML of Calendar elements.

  • OnBeforeEventRender() - customize events
  • OnBeforeCellRender() - customize background time cells
  • OnBeforeHeaderRender() - customize column headers (top row)
  • OnBeforeTimeHeaderRender() - customize time headers (left column)

Initialization event

This event is called only during the initial page load, right after the Calendar is displayed.

  • OnInit()

User action events

These events handle the user actions. By default, all user actions are disabled. You can enable them by setting the event handling to CallBack (e.g. EventClickHandling=CallBack).

  • OnEventClick - called when the user clicks an event
  • OnEventRightClick - called when the user right-clicks an event
  • OnEventDoubleClick - called when the user double-clicks an event
  • OnEventMove - called when the user moves an event
  • OnEventResize - called when the user resizes an event
  • OnEventDelete - called when the user deletes an event using the [x] icon in the upper-left corner
  • OnEventBubble - called when the bubble HTML is requested after the user hovers an event
  • OnEventEdit - called when the user ends the inline event editing mode by pressing <enter>
  • OnEventMenuClick - called when the user clicks a context menu item with CallBack handling
  • OnTimeRangeSelected - called when the user selected a time range
  • OnTimeRangeDoubleClick - called when the user double-clicks a time cell (or selection)
  • OnTimeRangeMenuClick - called wehn the user clicks a context menu item with CallBack handling
  • OnCommand() - a special event that can be invoked by calling commandCallBack() method on the client side

Lifecycle events

There are two special events that are called during every CallBack:

  • OnPrepare() - called before every user action event
  • OnFinish() - called after every user action event

Examples

Example 1: Event move handler

View

        <%=Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
            {
                BackendUrl = ResolveUrl("~/Calendar/Backend"),
                EventMoveHandling = EventMoveHandlingType.CallBack
            })%>

Controller

    [HandleError]
    public class CalendarController : Controller
    {

        public ActionResult Backend()
        {
            return new Dpc().CallBack(this);
        }

        public class Dpc : DayPilotCalendar
        {
            protected override void OnEventMove(DayPilot.Web.Mvc.Events.Calendar.EventMoveArgs e)
            {
                new EventManager(Controller).EventMove(e.Id, e.NewStart, e.NewEnd);
                Update();
            }

            protected override void OnFinish()
            {
                // only load the data if an update was requested by an Update() call
                if (UpdateType == CallBackUpdateType.None)
                {
                    return;
                }

                // this select is a really bad example, no where clause
                Events = new EventManager(Controller).Data.AsEnumerable();

                // no need to override the field names, we are using the default ones
                /*
                DataStartField = "start";
                DataEndField = "end";
                DataTextField = "name";
                DataIdField = "id";
                DataResourceField = "resource";
                 */
                DataAllDayField = "allday";
                DataTagFields = "id, name";

            }

        }
    }

Example 2: Using Command event to refresh the events

View

<div><a href="dpc.commandCallBack('refresh')">Refresh</a></div>

        <%=Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
            {
                BackendUrl = ResolveUrl("~/Calendar/Backend")
            })%>

Controller

    [HandleError]
    public class CalendarController : Controller
    {

        public ActionResult Backend()
        {
            return new Dpc().CallBack(this);
        }


        public class Dpc : DayPilotCalendar
        {

            protected override void OnCommand(CommandArgs e)
            {
                switch (e.Command)
                {

                    case "refresh":
                        Update(CallBackUpdateType.EventsOnly);
                        break;
                }
            }

            protected override void OnFinish()
            {
                // only load the data if an update was requested by an Update() call
                if (UpdateType == CallBackUpdateType.None)
                {
                    return;
                }

                // this select is a really bad example, no where clause
                Events = new EventManager(Controller).Data.AsEnumerable();

                // no need to override the field names, we are using the default ones
                /*
                DataStartField = "start";
                DataEndField = "end";
                DataTextField = "name";
                DataIdField = "id";
                DataResourceField = "resource";
                 */
                DataAllDayField = "allday";
                DataTagFields = "id, name";

            }

        }
    }

DayPilot for ASP.NET WebForms, DayPilot for ASP.NET MVC, DayPilot for Java