Questions Tagged how-to

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

Answered: Yes, you can disable event moving using the eventMoveHandling property: { eventMoveHandling: "Disabled", // ... }

Answered: Please take a look at this page: Exact Event Duration Let me know if this is not what you are looking for.

Answered: You can take a look at this tutorial: JavaScript Scheduler: Disabling Custom Date/Time Ranges It explains how to set color for custom time segments in the Scheduler.

Answered: You can use someting like this (using the options syntax): const calendar = new DayPilot.Calendar("dp", { onBeforeCellRender: args => { const nonBusinessDays = [4, 5, 6, 0]; if (nonBusinessDays.inclu...

Answered: You can take a look at the following tutorial which uses the Composition API in Vue: Vue Resource Calendar (Open-Source)

Answered: Seems like they added it several hours after I posted this. This is resolved and everything works perfectly!

Answered: The button order is fixed but you can change it using custom CSS: .modal_default_buttons { display: flex; } .modal_default_ok { order: 2; } .modal_default_cancel { order: 1; } You can add images usin...

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

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

Answered: Unfortunately, this is not possible.

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

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

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: 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: That’s a typo. The event is called onEventMoving . There should be no problem using it to clear the selection.

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