Split the reservation on multiple resources

In this tutorial, you can learn how to split an event using a context menu:

• JavaScript Scheduler: Splitting an Event

You can then join these two new events using a link and possibly style them to indicate continuity:

• JavaScript Scheduler: Styling Linked Events

Just note that links are only available in the JavaScript version.

Thanks for the suggestion.

Unfortunately I created the scheduler via ASP.NET webform.. will the possibility of using links also for ap.net webform be implemented in the future?

If I wanted to convert the scheduler to javascript, do I have to convert all the events I created in VB to javascript or can they continue to work in code behinf VB?

This is the cheduler created on ASP.NET to convert in javascript

<DayPilot:DayPilotMenu ID="DayPilotMenuRes" runat="server" CssClassPrefix="menu_default" ShowMenuTitle="true" MenuTitle="Opzioni Risorsa" ClientObjectName="menu">

<DayPilot:MenuItem Action="JavaScript" JavaScript="Cambia_stato(e.value);" Text="Cambia stato" />

<DayPilot:MenuItem Action="JavaScript" JavaScript="Apri_risorsa(e.value);" Text="Anagrafica risorsa" />

</DayPilot:DayPilotMenu>

<DayPilot:DayPilotMenu ID="DayPilotMenuRes2" runat="server" CssClassPrefix="menu_default" ShowMenuTitle="true" MenuTitle="Opzioni Struttura" ClientObjectName="menu0">

<DayPilot:MenuItem Action="JavaScript" JavaScript="Elenco_risorse(e.value);" Text="Elenco Risorse" />

</DayPilot:DayPilotMenu>

<DayPilot:DayPilotMenu ID="DayPilotMenu1" runat="server" CssClassPrefix="menu_default" ShowMenuTitle="true" MenuTitle="Opzioni Prenotazione" ClientObjectName="menu1">

<DayPilot:MenuItem Action="JavaScript" JavaScript="editEvent(e.value());" Text="Modifica Prenotazione" />

<DayPilot:MenuItem Action="Postback" Command="Gestione_ospiti" Text="Check-in" />

<DayPilot:MenuItem Action="JavaScript" JavaScript="editConto(e.value());" Text="Conto Economico" />

<DayPilot:MenuItem Action="JavaScript" JavaScript="editPagamenti(e.value());" Text="Pagamenti" />

</DayPilot:DayPilotMenu>

<DayPilot:DayPilotMenu ID="DayPilotMenu2" runat="server" CssClassPrefix="menu_default" ShowMenuTitle="true" MenuTitle="Opzioni Prenotazione" ClientObjectName="menu2">

<DayPilot:MenuItem Action="JavaScript" JavaScript="editEvent(e.value());" Text="Modifica Prenotazione" />

<DayPilot:MenuItem Action="Postback" Command="Gestione_ospiti" Text="Gestione Ospiti e Check-out" />

<DayPilot:MenuItem Action="JavaScript" JavaScript="editConto(e.value());" Text="Conto Economico" />

<DayPilot:MenuItem Action="JavaScript" JavaScript="editPagamenti(e.value());" Text="Pagamenti" />

</DayPilot:DayPilotMenu>

<DayPilot:DayPilotMenu ID="DayPilotMenu3" runat="server" CssClassPrefix="menu_default" ShowMenuTitle="true" MenuTitle="Opzioni Prenotazione" ClientObjectName="menuPulizia">

<DayPilot:MenuItem Action="JavaScript" JavaScript="editPuliziaEvent(e.value());" Text="Modifica Pulizia" />

</DayPilot:DayPilotMenu>

<DayPilot:DayPilotScheduler

ID="DayPilotScheduler1"

runat="server"

BubbleID = "DayPilotBubble1"

AutoScroll="Always"

RowHeaderHideIconEnabled="true"

RowHeaderScrolling="true"

RowHeaderWidth="500"

DataStartField="data_dal"

DataEndField="data_al"

DataTextField="nome_prenotazione"

DataValueField="id"

DataResourceField="n_risorsa"

DataTagFields="stato"

ClientObjectName="dps"

CellGroupBy="Month"

CellDuration="720"

Days="31"

HeightSpec="Max"

Height="700"

ContextMenuID="DayPilotMenu1"

ContextMenuResourceID="DayPilotMenuRes"

EventMoveHandling="JavaScript"

OnEventMove="DayPilotScheduler1_EventMove"

EventResizeHandling="CallBack"

OnEventResize="DayPilotScheduler1_EventResize"

TimeRangeSelectedHandling="JavaScript"

TimeRangeSelectedJavaScript="createEvent(start, end, column);"

OnCommand="DayPilotScheduler1_Command"

EventClickHandling="JavaScript"

EventClickJavaScript="editEvent(e.value());"

AfterRenderJavaScript="afterRender(data);"

OnBeforeEventRender="DayPilotScheduler1_BeforeEventRender"

OnBeforeCellRender="DayPilotScheduler1_BeforeCellRender"

OnEventMenuClick="DayPilotScheduler1_EventMenuClick"

RowHeaderWidthAutoFit="true"

EventHeight="60"

CellWidth="60"

DurationBarVisible="true"

SyncResourceTree="false"

UseEventBoxes="Never"

TreeEnabled="true"

TreeIndent="15"

TreeImageMarginLeft="3"

TreeImageMarginTop="6"

SnapToGrid="false"

EventMoveJavaScript="conFunction(e.start(), e, newStart, newEnd, newResource, ctrl, shift);"

timeRangeRightClickHandling="Disable"

OnBeforeTimeHeaderRender="DayPilotScheduler1_BeforeTimeHeaderRender"

LoadingLabelVisible="true"

MessageHideAfter="10000"

OnBeforeResHeaderRender="DayPilotScheduler1_BeforeResHeaderRender">

<TimeHeaders>

<DayPilot:TimeHeader GroupBy="Month" Format="MMMM yyyy" />

<DayPilot:TimeHeader GroupBy="Day" />

</TimeHeaders>

<HeaderColumns>

<DayPilot:RowHeaderColumn Title="Risorsa" Width="120" />

<DayPilot:RowHeaderColumn Title="Sigla" Width="50" />

<DayPilot:RowHeaderColumn Title="Posti" Width="50" />

</HeaderColumns>

</DayPilot:DayPilotScheduler>

<DayPilot:DayPilotBubble ID="DayPilotBubble1" runat="server"

OnRenderEventBubble="DayPilotBubble1_RenderEventBubble"

/>

Thanks

Simone

Unfortunately, the links are not planned for the WebForms version.

With the JavaScript version, the event handlers need to be implemented on the client side. The event handlers will call specific API endpoints (.NET) for individual operations.

You can find some ASP.NET Core examples that show this approach here: ASP.NET Core Calendar and Scheduler Tutorials. ASP.NET Core is not required, you can create the JSON endpoints in WebForms as well - e.g., using [WebMethod].