search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

How to open and close the modal using script

Asked by Chris TD
2 months ago.

Hi there

I'm using the methods of href'ing the modal ID to open the modal. And I can close the modal, but how can I show the modal using JS?

I'm trying to inject the times from the scheduler "onTimeRangeSelected" event into my modal but I cannot work out the correct syntax to merely show it!

Any help please?

I'm using JQuery css to close the modal, like $("#modalNewBooking").hide(); <-- hope this is okay? It works

Thanks, Chris

Answer posted by Dan Letecky [DayPilot]
2 months ago.

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 location. This approach is easier to handle than opening a separate URL in the modal dialog.

See also the following tutorial:
https://code.daypilot.org/60913/javascript-scheduler-edit-multiple-fields-modal-dialog

You can also design your form online using a visual builder:
https://modal.daypilot.org/builder/

Comment posted by Chris TD
2 months ago.

Thanks, thats useful

Is there any time based controls I can use? I'm trying to write a scheduler that works off hourly increments. So time pickers are required.

ALSO, is there anywhere I can download a NON minified DayPilot library? So I can debug what I'm doing wrong. I'm struggling to populate a select. And I often find it easier to diagnose MY errors by debugging the vendor code.

I'm basically doing this:

DayPilot.Modal.form([
{ "name": "start", "id": "txtStartDate", "dateFormat": "dd/MM/yyyy" },
{ "name": "end", "id": "txtEndDate", "dateFormat": "dd/MM/yyyy" },
{ "name": "resource", "id": "resource", "type": "select", "options": [ JSON.stringify(resourceOptions) ]}
],

resourceOptions is a JSON XHR result containing id/name key pairs, but for some reason the select is empty. (Anfd yes, the request is returning data)

Thanks,

Chris

Comment posted by Dan Letecky [DayPilot]
2 months ago.

1. A field with type: "date" will let you pick a date and the time part will be retained (or it can be edited by hand). A time picker is not available at the moment but you can use type: "select" and define the hours as values.

2. The "options" property should hold an array. Your code converts the "resourcesOptions" is to string which results in something like this:

"options": [ "object converted to string" ]

If the resourceOptions variable holds an object you may want to do something like this:

"options": resourceOptions

If it is a JSON string you need to do this:

"options": JSON.parse(resourceOptions)

The unminified Modal source is not included in the download package at the moment but you can get it if you install the NPM package (@daypilot/modal).

New Reply
This reply is
Your name (optional):