Questions Tagged html5

Answered: You will need a webserver with PHP enabled. For development purposes, you can run the project using the built-in PHP webserver: Linux: php -S 127.0.0.1:8090 -t /path/to/project Windows: php.exe -S lo...

Answered: You have added it correctly - but it will only display the expand/collapse icon when you add some child resources. If you want to hide the additional columns for these empty groups, you can remove th...

Answered: You can use the locale property to apply culture-specific settings (such as date format, first day of week….). const calendar = new DayPilot.Calendar("calendar", { locale: "en-au", // ... }); calenda...

Answered: This tutorial was created for an older version of PHP. PHP 8.3 produces warnings about using dynamic properties: Deprecated: Creation of dynamic property ... is deprecated in ... on line ... That dis...

Answered: Do you see any error in the JavaScript console?

Answered: The showEventStartEnd property isn’t supported in the open-source version of the Calendar component at the moment. However, you can customize the event content as needed using the onBeforeEventRender...

Answered: The cell duration (and number of cells per hour) can be configured in the Calendar , but this option is only available in the Pro version.

Answered: In the Scheduler , you can create your own timeline by defining individual time slots. You can set custom start and end times for each slot, as long as they do not overlap with other slots.

Answered: You can create the modal dialog using DayPilot.Modal.form() - you can find an example here: JavaScript Scheduler: How to Edit Multiple Fields using a Modal Dialog DayPilot.Modal is included in the op...

Answered: It looks like there is bug in the onchange event handler. An updated version will be released soon.

Answered: You can mark specified days as disabled using onBeforeCellRender in the Scheduler component . This method is used in the tutorial to disable weekends: onBeforeCellRender: (args) => { const day = args...

Answered: Yes, no problem. DayPilot is a purely client-side solution so you can use it with any backend. This example includes a .NET 7 project but you can use the same source code with .NET 6 as well. You jus...

Answered: Yes, this should be no problem. I’m including a couple of screenshots and links to features that will help you implement what you need: 1. The timeline can be customized as needed. If the built-in un...

Answered: If the events don’t display correctly, you should check the id of the resources ( resources[].id ) and the resource of events ( event.list[].resource ). Events are only displayed in a row if these va...

Answered: You can use a custom modal dialog and add as many field as needed. Here is an example: async function modalText() { const form = [ {name: "Name", id: "name", type: "text"}, {name: "Description", id: ...

Answered: You can find the documentation here: Resizing: https://doc.daypilot.org/gantt/task-resizing/ https://api.daypilot.org/daypilot-gantt-ontaskresize/ Moving (horizontal): https://doc.daypilot.org/gantt/...

Answered: You can take a look at this tutorial: https://code.daypilot.org/64657/angular-scheduler-resource-management It is for Angular, but it shows how to add a context menu to the row headers with additiona...

Answered: You can take a look at this tutorial: https://code.daypilot.org/44666/html5-doctor-appointment-scheduling-javascript-php It uses pre-generated slots that are offered to users for making appointments....

Answered: I recommend checking the HTTP call to the API (backend_events.php) in the browser developer console (Network tab). Most likely, you will see a DB-related error instead of the expected JSON array with...

Answered: In order to switch to MySQL please follow the instructions at the bottom of the article (a section called "Database (MySQL, SQLite)"). You need to edit _db.php and _mysql.php files.

Answered: This happens if the PHP backend returns an error instead of a JSON response. I recommend checking the backend HTTP request using browser developer tools. The response will contain an error message wh...

Answered: There is a tutorial available that shows how to display holidays (by setting a custom scheduler cell background color): https://code.daypilot.org/93068/javascript-scheduler-displaying-holidays I beli...

Answered: The image export only supports a limited set of CSS styles. The Scheduler tries to detect the background color but if you use an unsupported background style it will fail. You can override the auto-d...

Answered: The column content is set in onBeforeRowHeaderRender event handler. You'll need to modify it to exclude parent rows: dp.onBeforeRowHeaderRender = (args) => { // skip parent rows if (args.row.children...

Answered: The Scheduler will include events that are loaded at the moment of export (it uses the event data from events.list) in the exported image. If you use dynamic loading ( https://doc.daypilot.org/schedu...

Answered: Unfortunately, this tutorial is not available for Spring Boot at this moment. To see how the Calendar and Scheduler components can be used with Spring Boot backend, please see the following tutorials...

Answered: In order to run the project, you'll need PHP, a webserver and a MySQL database server. A decent knowledge of JavaScript is also necessary if you want to customize the project. If you are a complete b...