search envelope-o feed check
Home Unanswered Active Tags New Question

Questions Tagged how-to

Missing daypilot-react.min.d.ts declaration file in NPM package?

I’m trying to use the daypilot lite package for react, when installing the package via npm install there is no daypilot-react.min.d.ts file anywhere to be found, despite it being specified in the pac...

Modal Button Order

Hello, Is it possible to switch the order of how the buttons “Cancel” and “Ok” are displayed in the modal? So instead of “Ok | Cancel” it displays “Cancel | Ok”. Also, if possible I would like to use...

Can event area support multiple actions?

Answered: Since version 2024.2.5956, the active area will display a bubble if you specify the bubble property, regardlesss of the action value. Another option is to use the following event handlers, which are ...


hi team , facing issue once try to run application .

How to Maintain Values in the Header During Horizontal Scroll?

Answered: When the time header cell is partially hidden, the Scheduler adds a special overlay with the default cell content (it’s called a floating time header). You can turn it off using the floatingTimeHeade...

Is it possible to Spread the left area of the gantt chart to maximum width?

Answered: Unfortunately, this is not possible.

Add Icon to modal confirm buttons

Answered: You can use custom CSS theme that will display your images in the buttons (using background-image style). The buttons are marked with the following CSS classes: modal_default_ok modal_default_cancel ...

area bubble

Answered: This is fine. I assume that you have defined the area position and dimensions (left, right, etc.). I have tested your code in the Scheduler and the only problem is that if you also have an event bubb...

Remove or Highlight the holidays on the Event

Answered: The eventMovingSkipNonBusiness property affects the drag and drop behavior over the non-business time segments. The mechanism is explained in the JavaScript Scheduler: Skip Non-Business Cells during ...

Remove or Highlight the holidays on the Event

Answered: I am trying to highlight or cut the holidays on the event itself

Change Time Header Vertical Grid lines style

Answered: You can use the following CSS: .scheduler_default_timeheadercol_inner { border-right-width: 4px; }

Using Row Spans for Resource Names in Tabular Mode

Answered: To implement this, you can use the split resources feature:

How to resize row header column on touch devices

Hello, Can the width of the Scheduler's Row Header Column be configured to allow resizing on touch devices? Additionally, when rowHeaderScrolling is set to true and the splitter is displayed, is it p...


Answered: That’s a typo. The event is called onEventMoving. There should be no problem using it to clear the selection.

Is there any way we can hide the right side of the gantt chart

Answered: The Gantt chart component is not designed for this mode, but you can hide the the time grid using the following properties: scale: "Manual", startDate: "2020-01-01", // use a day in the past

can we change the expander or collapse icon

Answered: You can change the icons using CSS. This is how the icons are defined in the default CSS theme: .gantt_default_tree_image_expand { background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz...

Changing the date in the resource calendar

Answered: To change the current date, it is necessary to update the startDate property, which is used as the default date for the columns (if they don’t specify a custom date). You can find an example here: Ne...

Autoscroll on mobile is an huge miss.

Answered: As I mentioned here, it’s now in the wishlist.

How to export the Scheduler as image/pdf in React

Answered: You need to access the DayPilot.Scheduler object using the control property of the DayPilotScheduler component: const scheduler = schedulerRef.current.control; Another option is to use the controlRef...

customizing context menu with click/touch

Answered: Sorry for the delay! Which component do you use (Calendar, Scheduler..)? > I am also wondering if it would be possible to pass information from the onEventClick event to the context menu’s onShow eve...

location is not changing

Answered: It looks like there is bug in the onchange event handler. An updated version will be released soon.

custom bubble/context menu for different event types

Answered: There are two options: 1. You can use onBeforeEventRender to assing a custom bubble HTML to each event: { onBeforeEventRender: args => { = `my bubble HTML`; }, // ....

How to set dates in X-Axis and resources in Y-Axis

Answered: You can use the Calendar in resources mode:

Populate dropdown options using Thymeleaf in a const form

Answered: Thymeleaf can’t be used this way. I recommend loading the server-generated data using a special HTTP call. It could look like this: const {data} = await DayPilot.Http.get(`/get/my/options`); const f...

columnBubble is shown at different location

Answered: This issue should be fixed now in the latest sandbox build (2024.2.5913). Please let me know if the problem persists.

How do I enable multi-range selection by default

Answered: This can't be done at the moment, but please let me check if it could work after making some changes.

How do I create different event behaviors for touch/click

Answered: In the onEventClick and onEventClicked events, you can access the original event as args.originalEvent. Using the original event object, you can check if the source was a touch event: onEventClick: (...

Autoscroll not working on touch devices.

Answered: OK, thanks for the update. I’ve added it to the wishlist.

Resize Animation. Next feature request.

Answered: I’ve added it to the wishlist.

show appointments as free time

Answered: There are two options: You can mark the unavailable parts of the timeline as disabled (see Disabled cells in the Scheduler, Disabled cells in the Calendar). If the available slots have a fixed durati...
Questions 1-30 of 2933 Next