Enable event selecting

Event selecting can be mapped to the following user actions:

  • EventClick (EventClickHandling="Select")
  • EventDoubleClick (EventDoubleClickHandling="Select")

Selecting multiple events

Multiple event selecting can be enabled or disabled using AllowMultiSelect property (the default value is true).

When this feature is enabled, multiple events can be selected by the mapped action (e.g. event click) while holding the Ctrl key.

Highlighting the selected events (CSS)

The selected events will have be marked with "selected" CSS class (prefixed with the value of CssClassPrefix).

See also

Sample CSS style (calendar_white theme)

.css

.calendar_white_selected .calendar_white_event_inner 
{
  background: #ddd;
}

Client-side API

You can select or unselect events directly using the client-side API.

JavaScript

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Calendar("dp");
  dp.onEventSelect = function(args) {
    if (args.selected && args.e.text().indexOf("unselectable") !== -1) {  // prevent selecting events that contain the text "unselectable"
      args.preventDefault();
    }
  };
  // ...
  dp.init();
</script>

ASP.NET WebForms

 
<DayPilot:DayPilotCalendar runat="server" id="DayPilotCalendar1"
  ...
  EventClickHandling="Select"
  AllowMultiSelect="true"
/>

EventSelect event

Whenever the user updates the selection, EventSelect can be fired. The handler must be enabled first using EventSelectHandling property. The default value of EventSelectHandling is Disabled.

Server-side API

The list of selected events is available in SelectedEvents property. It is synchronized during PostBacks or CallBacks and is accessible in all event handlers (not only EventSelect).

Demo

ASP.NET MVC

Set EventClickHandling to EventClickHandlingType.Select.

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig {
  BackendUrl = ResolveUrl("~/Calendar/Backend"),
  ...
  EventClickHandling = EventClickHandlingType.Select,
  AllowMultiSelect = false
})

Select Event

You can handle the select event using OnEventSelect method on the server side by setting EventSelectHandling to EventSelectHandlingType.CallBack.

View

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig {
  BackendUrl = ResolveUrl("~/Calendar/Backend"),
  ...
  EventClickHandling = EventClickHandlingType.Select,
  EventSelectHandling = EventSelectHandlingType.CallBack
})

Backend Controller

protected override void OnEventSelect(EventSelectArgs e)
{
  if (e.Event.Value == "1" && e.Change == EventSelectChange.Selected)
  {
    SelectedEvents.Add(EventInfo.Create("13"));  // add another event to the selection when event 1 was selected
  }
  Update();
}

Demo