Questions Tagged how-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...
Add additional data to the events table
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...
Collapsing/hiding hours in calendar
Answered: This is not supported in the Calendar at the moment. It is only possible in DayPilot Pro, in the Scheduler component: Hiding Time Columns in JavaScript Scheduler In the Pro version of the Calendar, y...
Is it possible to drag and drop multiple events from the external source to scheduler?
Answered: Unfortunately, this is not possible at the moment. Out of curiosity - what is your use case?
DayPilot Month - RTL
Answered: It was almost ready - the RTL support is now available in the latest sandbox build (2024.3.5979). You can get the sandbox React package at npm.daypilot.org. See also a live demo in the sandbox: Month...
Modifying RTL according to locale
Answered: Unfortunately, RTL is not supported in the Lite version at the moment.
Split the reservation on multiple resources
Answered: In this tutorial, you can learn how to split an event using a context menu: JavaScript Scheduler: Splitting an Event You can then join these two new events using a link and possibly style them to ind...
How to change css and html of Daypilot
Answered: You can use custom CSS easily - the best way is to generate a calendar CSS theme online. You can modify it manually as needed. In the open-source version, you can customize the inner HTML of events, ...
How to add "day of week" to the time header day
Answered: You can customize the calendar column headers using the onBeforeHeaderRender event handler: const calendar = new DayPilot.Calendar("calendar", {
// ...
headerHeight: 50,
onBeforeHeaderRender...
Calendar events are not aligned when on the same line
Answered: It looks like this is caused by the custom CSS theme that you are using. I recommend checking the margins, padding, etc. If the purpose of the CSS modification was to create a free space next to the ...
Adding Holidays on for ASP.NET tutorial
Answered: In ASP.NET WebForms, you can indeed use the BeforeCellRender event. You just need to check whether the current cell falls on one of the defined holidays. Example: // Define an array of holidays
priv...
UpdateWithMessage change color MessageBox from behind
Answered: It is not possible with UpdateWithMessage() but you can use Update() to send custom data to the client and display the message bar using JavaScript using a custom CSS class. Hashtable ht = new Hashta...
How to show read only calendar
Answered: Yes, you can disable event moving using the eventMoveHandling property: {
eventMoveHandling: "Disabled",
// ...
}
Questions 1-30 of 2967
Next