Dropdown field in modal form

You can load the data using fetch() or a similar function before opening the modal dialog.

async function showModal(url) {
  const options = await fetch("/api/getOptions").then(response => response.json());

  const form = [
    {
      name: "Resource",
      id: "resource",
      options: options,
      type: "select",
    },
  ];

  const data = { /* ... */ };

  const modal = await DayPilot.Modal.form(form, data);
  console.log(modal.result);
}

The data returned by the API need to have the correct structure (see https://modal.daypilot.org/form-select-field/).

Why it is not working huhuhu

// GET: api/services
        // GET: api/services
        [HttpGet("/api/services")]
        public async Task<MyService>>> GetServices()
        {
            return await _context.Services.ToListAsync();
        }

and this is the form 

<script src="~/lib/daypilot/daypilot-all.min.js" ></script>

<div class="container-fluid py-5 wow fadeInUp">
    <div class="container">
        <div class="columns">
            <div class="column-left" data-wow-delay="0.6s">
                <div id="nav"></div>
            </div>
            <div class="column-main data-wow-delay="0.9s"">
                <div class="toolbar">Available time slots:</div>
                <div id="calendar"></div>
            </div>
        </div>

        <script>
            
            const app = {
                get patientId() {
                    if (!localStorage["patientId"]) {
                        localStorage["patientId"] = DayPilot.guid();
                    }
                    return localStorage["patientId"];
                },
                
                async loadEvents(day) {
                    const start = nav.visibleStart() > DayPilot.Date.now() ? nav.visibleStart() : DayPilot.Date.now();
                    const end = nav.visibleEnd();
                    const patient = app.patientId;

                    const { data } = await DayPilot.Http.get(`/api/appointments/free?start=${start}&end=${end}&patient=${patient}`);


                    if (day) {
                        calendar.startDate = day;
                    }
                    calendar.events.list = data;
                    calendar.update();

                    nav.events.list = data;
                    nav.update();
                },
                init() {
                    app.loadEvents();
                }
            };

            const nav = new DayPilot.Navigator("nav", {
                selectMode: "week",
                showMonths: 2,
                skipMonths: 2,
                onTimeRangeSelected: (args) => {
                    const weekStarts = DayPilot.Locale.find(nav.locale).weekStarts;
                    const start = args.start.firstDayOfWeek(weekStarts);
                    const end = args.start.addDays(7);
                    app.loadEvents(start, end);
                }

            });
            nav.init();

            const calendar = new DayPilot.Calendar("calendar", {
                viewType: "Week",
                businessBeginsHour: 12,
                businessEndsHour: 20,
                timeRangeSelectedHandling: "Disabled",
                eventMoveHandling: "Disabled",
                eventResizeHandling: "Disabled",
                eventArrangement: "SideBySide",
                onBeforeEventRender: (args) => {
                    switch (args.data.status) {
                        case "free":
                            args.data.backColor = "#3d85c6";  // blue
                            args.data.barHidden = true;
                            args.data.borderColor = "darker";
                            args.data.fontColor = "white";
                            args.data.html = `Available`;
                            args.data.toolTip = "Click to request this time slot";
                            break;
                        case "waiting":
                            args.data.backColor = "#e69138";  // orange
                            args.data.barHidden = true;
                            args.data.borderColor = "darker";
                            args.data.fontColor = "white";
                            args.data.html = "Your appointment, waiting for confirmation";
                            break;
                        case "confirmed":
                            args.data.backColor = "#6aa84f";  // green
                            args.data.barHidden = true;
                            args.data.borderColor = "darker";
                            args.data.fontColor = "white";
                            args.data.html = "Your appointment, confirmed";
                            break;
                    }
                },

                onEventClick: async (args) => {
                    if (args.e.data.status !== "free") {
                        calendar.message("Please use a free slot to request an appointment.");
                        return;
                    }
                    
                    async function showModal(url) {
                        const options = await fetch("/api/services").then(response => response.json());

                        const form = [
                            { name: "Request an Appointment" },
                            { name: "From", id: "start", dateFormat: "MMMM d, yyyy h:mm tt", disabled: true },
                            { name: "To", id: "end", dateFormat: "MMMM d, yyyy h:mm tt", disabled: true },
                            { name: "Name", id: "name", type: "text" },
                            { name: "Email", id: "email", type: "text" },
                            {
                                name: "Resource",
                                id: "resource",
                                options: options,
                                type: "select",
                            },
                        ];

                        const data = {
                            id: args.e.id(),
                            start: args.e.start(),
                            end: args.e.end(),
                            patient: app.patientId,
                        };

                        const options = {
                            focus: "name"
                        };

                        const modal = await DayPilot.Modal.form(form, data);
                        if (modal.canceled) {
                            return;
                        }

                        await DayPilot.Http.put(`/api/appointments/${data.id}/request`, modal.result);

                        args.e.data.status = "waiting";
                        calendar.events.update(args.e.data);
                    }
                }

            });
            calendar.init();

            app.init();

        </script>
    </div>
</div>

If there are no errors in the JavaScript console, I recommend checking the data returned from "/api/services" - it may not be what you expect. In order to display properly in the dropdown, it must be an array of objects with "id" and "name" properties.

It's now working, thank you so much Dan