Questions Tagged how-to
Summing cost values stored in "tags" (args.data.tags.cost)
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...
Scheduler watch update events
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"
...
Event Calendar Delete Confirmation?
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...
Multi day selection in week view
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.
Check For Overlap with Javascript
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...
Initialize Calendar to Show Start and End Time on Event
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...
Regarding removal of header as given in attached file with email.
Answered: Please see the src/index.html file in the project attached to the Angular Scheduler: Event Filtering tutorial - the header is defined there.
Cancel menu deactivation
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: [
{...
When expanding tabs in scheduler vertical scrolling stops working
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
increase day-time insert events column
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.
How to get response to a radio form
Answered: In this case, modal.result holds a copy of the data object. Its properties are set according to the user selection. So, in order to get the radio selection, you need to read modal.result.resource. To...
How to move events across half day in the scheduler without setting time manually once the even is dropped
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 gro...
Selecting Multiple Rows Header On Row Click
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()...
Disabling column resizing for a single column in the scheduler
Answered: In the latest sandbox build, it is now possible to disable resizing of selected row header columns using the new nonresizable property: rowHeaderColumns: [
{text: 'Name', display: "name", nonresiz...
Invoke _command sub from another sub (vb.net code-behind)
Answered: If you want to update the DayPilotMonth control from another control, there are the options: You can invoke commandCallBack() from the client side. You can update it using a partial PostBack, if the ...
highlighting current time indicator for DayPilotCalendar?
Answered: At this moment, the Current Time Highlighting feature is only available in the Pro version of the Calendar. You can find information about feature availability in the table at the bottom of each docs...
DayPilotMonth fit parent height
Answered: At this moment, the 100% Height feature is only available in the Pro version of the Monthly calendar. You can find information about feature availability in the table at the bottom of each docs page....
On windows resize, Cell Loses selection. [Calendar]
Answered: Your config contains dynamic values that depend on the window width (columnWidth). Changing the config invokes a Calendar update. At this moment, the Calendar is designed to clear the current time ra...
CSS classes of start and end indicator of event resizing
Answered: The CSS classes are as follows: .scheduler_default_event_move_left
.scheduler_default_event_move_right See also the full list of CSS classes used by the Scheduler.
How to export Gantt chart for range opttion
Answered: The exportAs() method returns a DayPilot.Export which you can use to get the exported object, start a download, etc. To download the image immediately, you can use this: this.dp.exportAs(this.state.e...
I need to group the timings to show from time and to time, instead of hours.
Answered: If you just want to change the content of the time header, you can use the onBeforeTimeHeaderRender event handler to customize it in the Pro version of the Calendar. To define custom time slots, it i...
How to create slots with 2 or 3 hours and display them as single column?
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.
Changing Background Color of Selected Row Header (Scheduler)
Answered: In the Scheduler, the selected rows are highlighted using the following CSS defined in the built-in theme: .scheduler_default_rowheader.scheduler_default_rowheader_selected {
background-color: #...
How can I show a bubble manually on a resource/row header?
Answered: You can use the showHtml() method - you just need to supply the HTML to be displayed. No other object is required as a parameter.
Enabling Multi-range by default
Answered: In the latest sandbox build (2024.3.6166), this is now possible using the new multiRangeMode property. Scheduler config: {
multiRangeMode: "Always",
// ...
}
Set Height For Frozen Rows in the Scheduler
Answered: The JavaScript Scheduler doesn’t support frozen rows with a custom height and a vertical scrollbar. If you want to display large data set or many rows in the frozen section, it is better to use two s...
time range from touch selection not working?
Answered: I have one test case where it works fine and one where it doesn’t. I’m still trying to find out what’s going on. Anyway, the following approach works in both setups: dp.onTimeRangeSelected = function...
Scheduler - Area - How to use Bubble with the action ContextMenu
Answered: Since version 2024.2.5957, it is possible to combine the bubble property with any action type. That means the bubble (if specified) will always be displayed on hover, even for action: "ContextMenu".
Can you add an empty column in the row header?
Answered: To show an empty column, just omit the display property from the rowHeaderColumns array items. However, the first column will display the name of the resource even if you don’t specify the display pr...
Questions 1-30 of 2979
Next