Questions Tagged javascript

Answered: The open-source version doesn’t support all functionality on touch devices at the moment. For example, you can click a time slot to select it but you can’t select multiple cells by dragging. The full...

Answered: Please take a look at the following tutorial, which uses onTimeRangeSelecting , onEventMoving and onEventResizing to disable custom time segments (that do not correspond to whole cells): JavaScript S...

Answered: It the open-source version, the event box is always aligned with the grid cells. In the Pro version, it is possible to turn off this behavior (see exact event duration ). The real start and end is hi...

Answered: If you want to wait for the result of an HTTP request, you need to cancel the default action using args.preventDefault() and delete the event manually using event.remove() method when the HTTP reques...

Answered: These events are fired for the current selection (the one you click), but you can always get all selected time ranges using the multiselect.get() method. Please let me know if this is not what you ar...

Answered: In the latest release ( 2024.4.6293 ), the makeDraggable() methods for Calendar and Scheduler components now use the same structure of the options parameter. remove , onDragStart and onDrop are avail...

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: Please make sure that you are using the latest DayPilot Pro version. Angular Ivy is supported since version 2022.2.5344 .

Answered: There are multiple modes available for arranging overlapping events . If you use eventArrangement: "SideBySide" , the events will be displayed with their full width always visible.

Answered: Hello Dan, while I was preparing some code for this issue, I found the mistake myself… my backend data was fetched via rest call correctly, but the data was not assigned to the object, which I use in...

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: Yes, you can do it using the onBeforeCellRender event, like this: onBeforeCellRender: args => { if (args.cell.row.data && args.cell.row.data.frozen) { const events = scheduler.events.forRange(args.ce...

Answered: Meanwhile, some general debugging info: > While all functionality works correctly in the HTML window (excluding double-click, right-click, and hover interactions on both row headers and events), sing...

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

Answered: In order to detect changes performed by the Scheduler UI in Vue, you need to watch the source object. Like this: <template> <DayPilotScheduler :events="events" :resources="resources" /> </template> <...

Answered: When you use an async function in the event handler, calling args.preventDefault() after await has no effect as the processing continues immediately (before args.preventDefault() gets called). You ne...

Answered: Unfortunately, this feature is only available in the Pro version at the moment. In the open-source version, the selection is limited to a single column of the Calendar component.

Answered: Canvas is very fast, but it doesn’t support HTML for styling which is a huge disadvantage. We built a prototype some time ago. Everyone wants it fast but when it comes to styling, nobody wants to giv...

Answered: Thanks, Mikolaj! There are two options: You can force a specific line in a row using the line property of an event. You can join the events virtually into a single unit using the container property -...

Answered: You can do it in the onEventMove event handler using the events.forRange() method: onEventMove: args => { const movedEvent = args.e; const newStart = args.newStart; const newEnd = args.newEnd; const ...

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: To prevent the menu from closing when an item is clicked, you can add an onClick event handler to the items and stop the click event from bubbling: const menu = new DayPilot.Menu({ items: [ { text: "...

Answered: In the manual timeline mode, the Scheduler always uses the default cell width unless you specify it explicitly. The start and end of the last shift are correct (2 hours), but it is displayed at full ...

Answered: Hi The problem gets fixed by using the following one to open all the tabls. dp.rows.expandAll(); Thank you for the great library. Martin

Answered: Hi Leo, In the latest sandbox build (2024.4.6201), you can now use the rows.collapseAll() method to collapse all rows of the Gantt chart with a single update.

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: There are two options: 1. You can set the cell duration to half a day: { scale: "CellDuration", cellDuration: 720, // ... } The time headers are independent and you can use "Day" as the groupBy value...

Answered: The current implementation of keyboard.focusCell() finds the default keyboard cursor position for the specified cell. That can be an event if it is at the top position (line 0). However, it should be...

Answered: You can use the Queue component to display a list of events. As a bonus, they will be draggable to the Scheduler. You can see a demo here.

Answered: You can add the row to selection in onRowClicked using the rows.selection.add() method. It is also possible to implement a “toggle” logic using rows.selection.isSelected() and rows.selection.remove()...