Questions Tagged modal

Answered: The duration of the time slots in the open-source edition is fixed and is set to 30 minutes in the current version. You can display 45-minute events in the calendar, but the event box will be aligned...

Answered: You can mark the event div with a custom attribute using the onAfterEventRender event handler: onAfterEventRender: args => { args.div.dataset.eventId = args.e.data.id; } Than you can get the event po...

Answered: In this case, modal.result holds a copy of the data object. Its properties are set according to the user selection. So, in order to get the radio selection, you need to read modal.result.resource . T...

Answered: Yes, the form will load the initial values from the source data object using the property mappings ( id property of the form items). The source data object ( data in the example below) is optional. W...

Answered: Yes, you can use one of the following fields: https://modal.daypilot.org/form-title-field/ https://modal.daypilot.org/form-read-only-text-field/ https://modal.daypilot.org/form-html-field/

Answered: You can use the "dateFormat" property of the date field: const resources = [ {name: "Resource A", id: "A"}, {name: "Resource B", id: "B"}, {name: "Resource C", id: "C"}, ]; const form = [ {name: "Tex...

Answered: At this moment, icons can't be displayed in <select> items - it uses the standard browser element and that doesn't support HTML in <option> elements. You can implement your own form item type using p...

Answered: By calling setTimeout() in onEventMove you create a new JavaScript message that will be processed later as the JavaScript event loop continues (see also https://developer.mozilla.org/en-US/docs/Web/J...

Answered: This is not supported at the moment - but you can use the "searchable" element which is a drop-down list with items filtered by the text you type.

Answered: I recommend using DayPilot.Modal.form() to edit event details (or to enter new event data). This method lets you define the modal form fields programmatically and all the logic stays at the original ...

Answered: 1. The default locale ("en-us") defines weekStart: 0 (i.e. Sunday) but the weekNumberISO() method only works for weekStart: 1 (Monday). You'll need to override it in the config: config: DayPilot.Sche...

Answered: This seems to work fine: var form = [ {name: "Move From", id: "fromDate", dateFormat: "MMMM d, yyyy"}, {name: "Move To", id: "toDate", dateFormat: "MMMM d, yyyy"} ]; DayPilot.Modal.form(form).then(fu...

Answered: Please see the following tutorial: https://code.daypilot.org/60333/using-daypilot-modal-in-angular-application-typescript

Answered: If you use the modal dialog to display a custom URL using showUrl() it will always use an iframe. The "useIframe" value is ignored in this case. If you want to reach the JS objects created in the par...

Answered: The modal dialog tutorial was created some time ago - the DayPilot.Angular namespace has been deprecated meanwhile. An updated version of the tutorial is now available (it uses Angular 6 and DayPilot...

Answered: Please see my answer here: https://forums.daypilot.org/Topic.aspx/4185/change-the-position-of-createevent

Answered: It's possible to display custom HTML using .showHtml() method. You can get the inner HTML of a certain element using innerHTML: var html = document.getElementById("someContentDiv").innerHTML; new Day...

Answered: It's omitted from the tutorial text for brevity but you can find it in the downloadable project (in Default.aspx.cs). This is the source code: private DataTable DbSelectEvents(DateTime start, DateTim...

Answered: It's not possible to close the modal dialog from the server side. In the MVC samples, a slighly different approach is used - the form displayed in the modal dialog is not submitted in a traditional w...

Answered: Please take a look at this tutorial: http://www.daypilot.org/tutorial-calendar-sqlserver.html You have to call pnlPopup.Show() from the code behind to display the modal popup. However, my advice is t...

Answered: ok found it in the tutorial in the Default.aspx.vb file, my bad, thanks. Eunice

Answered: The following menu item will open Edit.aspx page in a modal dialog : <DayPilot:MenuItem Text="Open" Action="JavaScript" JavaScript="dialog().showUrl('Edit.aspx?id=' + e.value());" /> This is the moda...

Answered: You can disable closing the dialog on background click by commenting out line 286 in modal.js: hide.onclick = function() { This.hide(); }; But it's dangerous - if something goes wrong in the dialog p...