Questions Tagged javascript

Answered: You can specify properties of the row header cells using the onBeforeRowHeaderRender event handler. In this case, it could look like this: onBeforeRowHeaderRender: args => { if (yourCriteria) { const...

Answered: Hi Steve, Thanks for the update! You could use two dropdowns or you could use a component that allows selecting multiple values (such as Choices ). So provided that you have multiple selected values ...

Answered: When displaying a resource calendar ( viewType: "Resources" ), it is necessary to specify the resource id for events using the resource property. This value needs to match the column id exactly (incl...

Answered: This should be fixed now in the latest sandbox build (2023.3.5621). See also: https://release.daypilot.org/changes/js/ Please let me know if the problem persists.

Answered: It should be working fine now. If there is any problem, just let me know.

Answered: Yes, this is possible. The code from the Column Summary and Availability Chart tutorial uses the real cell size ( args.cell.start and args.cell.end ) to calculate the utilization (total number of eve...

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: Thanks for reporting the issue. I wasn't able to reproduce the problem but the additional check is now added in the latest sandbox build (2023.2.5594). Also, the right click behavior is fixed - it is...

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

Answered: The license is perpetual. For details, please see the Maintenance Subscription Terms: https://www.daypilot.org/legal/maintenance-subscription/

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: This issue should be fixed now in the latest sandbox build (2023.2.5584): https://release.daypilot.org/changes/js/ Please let me know if the problem persists.

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: The correct command is as follows: yarn add https://npm.daypilot.org/daypilot-pro-angular/trial/2023.2.5574.tar.gz You can also get the current version link at https://npm.daypilot.org .