By default, and unless otherwise specified, the DayPilot.Gantt renders a timeframe from the first to the last item.

Other than manually calculating and setting a start date (DayPilot.Gantt.startDate) as well as a duration (DayPilot.Gantt.days), would it be possible to have an option to add a number of “padding” days? E.g. start the duration always 5 days before and make the chart 5 days longer than the last element?

Currently, we load everything, trigger an update, then calculate new start and end using visibleStart() and visibleEnd(), and the trigger an additional update. If the user is scrolled to the end of the Gantt chart, this sometimes makes them jump towards the middle, as the first update() has a shorter time range…

Thanks!
Leo

I'm building a production scheduler where each event has a valid time window (defined by material arrival date and cut deadline). I need to restrict drag-and-drop so that an event cannot be moved outside this window.

Is there a built-in way to constrain event movement to a specific time range per event? Or should I handle this in onEventMoved by validating and reverting if the new position is outside the allowed corridor?

Any examples or best practices would be appreciated.
BRG
Iliah

Sorry…title is a bit vague but not exactly sure how to word it. I have several schedulers within my webforms-based site, and I use modals with update panels for adding/editing/etc. events within the schedule. My modals have sections contained within update panels so staff can update parts of various records quickly and without having to wait for a full round-trip to/from the server, etc.

I’m having an issue where the scheduler appears to have to be refreshed whenever any submit control (button, link button, checkbox, etc.) is clicked within the modal…even if the control doesn’t run any code that actively changes the dataset for the scheduler.

For example, my modal has a standard-looking “X” gif in the upper right-hand corner to close it out if no action was taken on the data displayed within the modal. The “X” does call a sub in the code-behind but that sub is only cleaning up form fields, etc. within the modal and then closing the modal. The “X” lives inside of an update panel that is contained within the modal, and I’ve got the “X” set as an async trigger for the update panel. However, if I do not have a command with the sub (called by the “X”) that refreshes / reloads the scheduler data I get an “Object reference not set to an instance of an object.” error when I click the “X”.

Historically when I’ve used modals and update panels I don’t think I’ve had this kind of issue - is there something in the scheduler I need to adjust?

Thanks - EW

Would like to do a live search on my web forms project without having to go back and forth to the database, etc. In looking at the page source of my monthly calendar, I see a line labeled “v.events.list” which has all of the data that I’m looking to search through. Are there any native capabilities to perform a search on this dataset? Lacking that, does anyone have any techniques for getting this data? I’ve tried a couple of JavaScript code samples (from Google) for getting the data from the page source but so far, no real success.

Thanks in advance - Ed

1) When I select a new time range on the navigator, it loses the customisation I have setup on the BeforeCellRender.

2) How can you update the navigator through javascript? I have tried using the nav.update(), but it comes up with the error in screenshot 3.

Javascript

let nav = new DayPilot.Navigator("dpnSelection");
console.log(nav);
nav.update();

Nav declaration

<DayPilot:DayPilotNavigator ID="dpnSelection" runat="server" ClientIDMode="Static" 
ShowMonths="3" SelectMode="Week" CellHeight="25" CellWidth="25" 
OnBeforeCellRender="Selection_BeforeCellRender" 
OnTimeRangeSelected="Selection_TimeRangeSelected" TimeRangeSelectedHandling="Postback" />

Here’s what it looks like (ignore the blue columns, that’s something else.)

What I’m trying:

• I store the event weight in event.tags.weight

• In various places like onEventMoved or onTimeRangeSelected I call a recomputeWeights() function

• My recomputeWeights() function iterates through all columns. I didn’t find a direct way to iterate the columns, but I’m doing
  for (cell of rows.find(“1”).cells.all())
  where row 1 is just a representative row, and that works well enough

• I use events.forRange(cell.start, cell.end) to find all the events in that column, and add up the weights from the tags

• I store that in a simple weights object where the key is cell.start and the value is the weight

• Then, in onBeforeTimeHeaderRender and onBeforeCellRender I can look up the weight by cell-start in my weights object

A few things are not yet working, or feel icky:

• When you drag to create a new event, I call events.add(), and then recomputeWeights(), but the new event isn’t present yet (race condition) so it doesn’t update correctly

• I haven’t found where to compute the weights on first open

• I have to “prod” the Scheduler to repaint the headers. I’m doing:
  dp.update({

  timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"},{"groupBy":"Day","format":"d"}],

  });
Which isn’t changing the timeHeaders, just asking them to get redrawn.

Is there a better approach for any of this?

Using that spec is suggested here: https://doc.daypilot.org/calendar/100-pct-height/

The only admissible heightSpec values in the mentioned version are "BusinessHours" | "BusinessHoursNoScroll" | "Full"

For all my links I have specified the linkShape to be RightAngled, but it’s still creating curved links - any ideas?

Other properties in my link objects (width, style color) are working as expected, but linkShape seems to have no effect.

Here’s a sample of my array of links:

        {
            "from": "8485526",
            "to": "8485527",
            "type": "FinishToStart",
            "linkShape": "RightAngled",
            "style": "solid",
            "width": 6,
            "color": "grey"
        },
        {
            "from": "D8485526",
            "to": "8485526",
            "type": "FinishToStart",
            "linkShape": "RightAngled",
            "style": "dashed",
            "width": 6,
            "color": "grey"
        },
        {
            "from": "8485528",
            "to": "8485529",
            "type": "FinishToStart",
            "linkShape": "RightAngled",
            "style": "solid",
            "width": 6,
            "color": "grey"
        },

When we use a slot to customise the appearance of the event, it seems to work correctly. However, when we scroll back, the appearance of the event reappears as if the slot did not exist.

Component:

<DayPilotScheduler
     ref="schedulerRef"
     :config="scheduleConfig"
 >
    <template #event="{ event }">
       <div class="event-body">
           Template: {{ event.data.id }}
       </div>
    </template>
</DayPilotScheduler>

 const scheduleConfig = reactive({
    locale: "es-es",
    timeHeaders: [
        { groupBy: "Day", format: "dddd, d MMMM yyyy" },
        { groupBy: "Hour" },
        { groupBy: "Cell", format: "mm" },
    ],
    scale: "CellDuration",
    cellDuration: 15,
    days: 20,
    eventHeight: 70,
    cellWidth: 60,
    startDate: DayPilot.Date.today(),
    timeRangeSelectedHandling: "Disabled",
    eventMoveHandling: "Disabled",
    eventResizeHandling: "Disabled",
    eventDeleteHandling: "Disabled",
    eventRightClickHandling: "ContextMenu",
    contextMenu: new DayPilot.Menu({
        items: [
            {
                text: "Delete",
                onClick: (args) => {
                    const dp = args.source.calendar;
                    dp.events.remove(args.source);
                },
            },
        ],
    }),
    onEventClick: (args) => {
        console.log("Event clicked", args.e);
    },
});

Regards

When scrolling and holding the scroll bar to the right in the infinite scrolling scheduler, the scheduler jumps correctly ahead in the timeframe. However, if holding the mouse button further, every subsequent move of just a few pixels makes the time jump again and again, often resulting in uncontrolled scrolling. (See attached video)

Can this be adjusted, maybe with a timeout or a “block“ until the mouse is released and dragged again?

Many thanks
Leo

is this something that has been reported before? Is there anything that could be done to prevent this?

Uncaught TypeError TypeError: Cannot read properties of null (reading 'data')
    at kh (/home/julien/dev/xxxxxxx/node_modules/daypilot-pro-javascript/daypilot-javascript.min.js:19:3666)
    at getDiv (/home/julien/dev/xxxxxxx/node_modules/daypilot-pro-javascript/daypilot-javascript.min.js:14:22351)
    at show (/home/julien/dev/xxxxxxx/node_modules/daypilot-pro-javascript/daypilot-javascript.min.js:14:18914)
    at <anonymous> (/home/julien/dev/xxxxxxx/node_modules/daypilot-pro-javascript/daypilot-javascript.min.js:14:25208)
    --- setTimeout ---
    at showOnMouseOver (/home/julien/dev/xxxxxxx/node_modules/daypilot-pro-javascript/daypilot-javascript.min.js:14:25267)
    at showEvent (/home/julien/dev/xxxxxxx/node_modules/daypilot-pro-javascript/daypilot-javascript.min.js:14:17269)
    at Ve (/home/julien/dev/xxxxxxx/node_modules/daypilot-pro-javascript/daypilot-javascript.min.js:18:28263)

Version used (sandbox): https://npm.daypilot.org/daypilot-pro-javascript/trial/2025.4.6751.tar.gz

It’s not very bad since it still works great, but in case you have any idea.

Thank you!

the types for DayPilot.Scheduler.onBeforeCellExport are missing:

• args.areas

• args.fontColor

• args.fontFamily

• args.fontSize

• args.fontStyle

• args.format

Cheers
Leo

I drag the bottom of that Event to resize it toward the bottom. This works great if I stop resizing (mouseup) before the Calendar starts to scroll. But if I continue to resize (with mousedown still on) and the Calendar has started to scroll toward the bottom, and *then* let go (mouseup), very often the Calendar continues to scroll by itself until it reaches the end, even if I don't touch anything anymore! At the moment of the mouseup, the Event stops being resized (which is ok), but the Calendar continues to scroll (which is not ok).

I can trigger the same issue with an Event near the bottom that I resize toward the top.

In order to stop the automatic scrolling when this happens, I need to click an Event. Even scrolling with the mouse wheel in the opposite direction doesn't stop the ongoing automatic scrolling.

The Calendar has those options :

heightSpec: 'Parent100Pct'
eventResizeHandling: 'Update'

and is inside a parent div, with CSS :

resize: vertical;
overflow: auto;
height: 60vh;

Any idea?

Thanks for the help!

It would be great to have a way of disabling/aborting time range selection on the Scheduler on an individual basis.

The DayPilot.Scheduler.onTimeRangeSelect has a preventDefault() function. It would be great if there was a flexible way to also disable the selection earlier so that the time range selection does not appear.

(I only found options like timeRangeSelectedHandling = “Disabled” which generally disable the selection, however I would love to be able to control the selection individually per row, for example.)

Cheers
Leo

TIA