Questions Tagged how-to

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: This is possible. Just remember that it’s a bit more complex task and you will need to extend this code to cover edge cases and implement the server-side part. It works like this: The “Split” context...

Answered: You can do this by inserting custom active areas into Scheduler events. The start and end of an active area can be specified using date/time values instead of pixels. That will let you insert custom ...

Answered: There is a tutorial that explain how to implement this: JavaScript Scheduler: Displaying Holidays It uses onBeforeCellRender event handler to disable individual cells. The resource-specific date rang...

Answered: You can use the onBeforeEventRender event handler to customize the events . A sample implementation could look like this: onBeforeEventRender: (args) => { if(args.data.status === "completed") { args....

Answered: There are two ways to solve it: 1. You can define business hours using the businessBeginsHour and businessEndsHour properties and set showNonBusiness to false (see also hiding non-business hours ): c...

Answered: At this moment, the Calendar can only display hours on the vertical axis.

Answered: You can synchronize two Schedulers using a native scroll event as demonstrated in this demo: https://javascript.daypilot.org/demo/scheduler/eventmovingtwoschedulers.html // scrollbar synchronization ...

Answered: Please see the options here: https://doc.daypilot.org/calendar/height/

Answered: Yes, this is possible. You can add active areas using onBeforeEventRender where you can check if a specific property exists in the source data object (args.data): onBeforeEventRender: args => { if (a...

Answered: The shape of the task group is created using :before and :after pseudo-elements. In the default theme it looks like this: .gantt_default_task_group .gantt_default_event_inner { position: absolute; to...

Answered: The database connection is handled by your application (DayPilot doesn't connect to the DB directly). Typically, the connection string is stored in web.config (in ASP.NET applications). Note that the...

Answered: Something like this could work (you will need to adjust it for your needs): async function clockOn() { const modal = await DayPilot.Modal.confirm("Are you sure you want to clock onto this job?"); if ...

Answered: I see. 1. You can simply add/remove the links from the Scheduler as needed, like this: const linksToBeDisplayed = [ /* ... */ ]; dp.update({links: linksToBeDisplayed}); 2. Or you can mark the links w...

Answered: So simple solution: It's not: eventHeight: "50", it's: eventHeight: 50,

Answered: You can set custom HTML displayed by the group using onBeforeGroupRender event: https://api.daypilot.org/daypilot-scheduler-onbeforegrouprender/ onBeforeGroupRender: args => { args.group.html = `${ar...

Answered: Steve, Sorry for the confusion! You can detect parent rows using `args.cell.isParent`: dp.onBeforeCellRender = function (args) { if (args.cell.isParent) { args.cell.backColor = "#ccc"; } }; It looks ...

Answered: By default, the calendar displays the value of the "text" property in the event boxes. If you want to display more data, you can customize the event content using onBeforeEventRender event handler: h...

Answered: You can use "autofocus: false" to disable autofocus or use "focus: 'anotherField'" to autofocus a selected field. const form = [ {name: "Start", id: "start", type: "datetime"}, {name: "End", id: "end...

Answered: After the modal dialog is closed, you need to call an API endpoint that will save the changes. You can access the updated data object as "modal.result". The selected value is accessible as "modal.res...

Answered: 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.jso...

Answered: It is possible to change "start" end "end" properties of the additional selected events in onEventMoving. You can modify the args.multimove[x].start and args.multimove[x].end properties as needed. Ju...

Answered: OK, I have the script running and incorporated within my scheduler. Much trial and error! I now have another issue. My Scheduler draws its information from an access database. The scheduler then writ...

Answered: The `window.open()` function is the correct approach: {text: "Job Card", onClick: args => window.open(args.source.data.Filelocation, '_blank')}, But if the browser is set to block popup windows it wi...

Answered: Hi Dan Thanks for the tip. I actually worked it out last night and then felt pretty thick for missing it. I'm developing on a company intranet and the tablet I was testing on was was not added to the...

Answered: You can customize the business hours using businessBeginsHour and businessEndsHour propertes. See also: https://doc.daypilot.org/scheduler/business-hours/

Answered: It is only available as a package. You can find the pricing details at the Buy page ( https://javascript.daypilot.org/buy/ ). If you have any questions regarding licensing or if you need a PDF quote,...

Answered: 1. First, you need to load the link from the database and store it as an additional property of the event data object. This can be done in the backend API endpoint that returns events. In most PHP ex...

Answered: In the latest sandbox build (2023.2.5562 - see https://release.daypilot.org/changes/js/ ), the args.column property now holds a DayPilot.Column object ( https://api.daypilot.org/daypilot-column-class...

Answered: In Vue projects, you need to replace the NPM link in package.json with the one that you get in the customer area (a licensed version).