Questions Tagged javascript

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 ...

Answered: Yes, this is possible. To distinguish this action from moving the original event to a new location, you can use a modifier key or an active area. 1. Modifier key You can use the approach described in...

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

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

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

Answered: In the Scheduler, the visible range is set using the startDate and days properties. You should use the combination that displays the desired date range. Another option is to create a custom timeline ...

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

Answered: Unfortunately, setting the calendar height to 100% of its parent is only supported in the Pro version at the moment.

Answered: There was a bug in the calculation of the grid boundaries. It’s fixed now in the latest sanbox build (2024.2.525): https://release.daypilot.org/changes/jslite/ Test: https://jsfiddle.net/ucvksntf/4/

Answered: Sorry for the delay! I assume that you are using dynamic event loading to load additional data during scrolling ( onScroll event). In the event handler, you should only update the Scheduler by callin...

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

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,PHN2ZyB4bWxucz0naH...

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...

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

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...

Answered: Yes, this is possible. You can use the same technique that is used in the yearly calendar tutorial (which displays months as columns) - define rows with custom start, one per month: <div id="dp"></di...

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...

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

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

Answered: You can use the Calendar in resources mode :

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 fo...

Answered: Unfortunately, I’m not able to reproduce the issue. Would you be able to post your config and a sample event?

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

Answered: Unfortunately, this scenario is not supported at the moment.

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

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: ...

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

Answered: I’ve added it to the wishlist.

Answered: The resource bubble receive a simplified resource object with basic information only. However, you can use it to load the full DayPilot.Row object like this: resourceBubble: new DayPilot.Bubble({ onL...