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 (month_white theme)

.css

.month_white_selected .month_white_event_inner 
{
	background: #ddd;
}

Client-side API

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

JavaScript

Examples

Enable multi-selecting:

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Month("dp");
  dp.eventClickHandling = "Select";
  dp.allowMultiSelect = true;
  // ...
  dp.init();
</script>

Cancel the selecting for events with "unselectable" string in the text:

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Month("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:DayPilotMonth runat="server" id="DayPilotMonth1"
  ...
  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("dpm", new DayPilotMonthConfig {
  BackendUrl = ResolveUrl("~/Month/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.DayPilotMonth("dpm", new DayPilotMonthConfig {
  BackendUrl = ResolveUrl("~/Month/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