javascript scheduler event selecting

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 be marked with "*_selected" CSS class.

See also

Sample CSS style (scheduler_white theme)

.css

.scheduler_white_selected .scheduler_white_event_inner
{
  background: #ddd;
}

Client-side API

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

JavaScript

Select an event using JavaScript:

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  // ...
  dp.init();


  var e = dp.events.find("123");  // find an event using ID
  dp.multiselect.add(e);  // add event to the selection

</script>

Enable event multi-selecting (using Ctrl + click):

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

Prevent selection of special events using onEventSelect event

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("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:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  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.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/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.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/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