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

Questions Tagged how-to

Scheduler Spacing between Time header and Main area

Answered: You can add a special row frozen to the top of the grid: You'd have to play with its properties and styling a bit. E.g. you can set custom height using...

Display custom tooltip on areas

Answered: Do you use the DayPilot.Bubble object to display the tooltip? The Scheduler doesn't use any z-index but you might want to check its parent elements. The bubble is displayed using a <div> that is inse...

Disable hours range only in specific date cell

Answered: The first condition is only true for the first cell in a day (which start at 00:00). You need to compare the date part instead: ( args.cell.start.getDatePart() === new DayPilot.Date("2020-12-02"...

How to add menu and header in angular 6 Day Pilot Gantt chart?

Answered: You can add custom row header columns using columns property: The context menu can be added using contextMenuRow property:

Swap events but keep duration

Answered: The tutorial is now updated and it will keep the duration of both events after they are swapped: var targetDuration = targetEvent.duration(); =;...

Scheduler resource each row alternative color

Answered: Please take a look at this example:

Angular scheduler week display on header

Answered: 1. The default locale ("en-us") defines weekStart: 0 (i.e. Sunday) but the weekNumberISO() method only works for weekStart: 1 (Monday). You'll need to override it in the config: config: DayPilot.Sc...

Update particular resources

Answered: Yes, you can use row.update() method:

Console.log display error unique ID

Answered: Unfortunately, I'm not able to reproduce the problem using the sample project. Please note that duplicate IDs are not allowed. Every event that you add to the Scheduler needs to have a unique ID ("id...

autoScroll horizontal scroll only

Answered: Unfortunately, there is no way to control the auto-scroll in a single direction only at this moment.

Write back from rendered component inside event to its data

Answered: You need to change the event data object and call; to update the view. Depending on how much you want to encapsulate the component, you can either pass DayPilot.Scheduler insta...

Find multiple events using

Answered: The primary purpose of events.find() is to find an event by ID. It searches events.list and if you need to filter the event data I recommend accessing the data store directly: let events = dp.event...

Adding an extra line on timetable

Answered: Unfortunately, this is not possible at the moment and I can't think of any workaround.

Is there an event on resizing rowHeaderWidth

Answered: Yes, it's onRowHeaderResized:

Angular Scheduler how to resize entire resource column

Answered: This property is now added in the latest sandbox build (2020.4.4740).

Scroll not working in ionic v1

Answered: We don't officially support Ionic. It may or may not work. Ionic is quietly intercepting events and doing some weird things, especially in the early versions. I recommend trying it with the latest Io...

Manipulate the text in the in-place editor

Answered: The args.newText value is read-only and you can change the text by canceling the default event and submitting the adjusted value: dp.onEventEdit = function(args) { args.preventDefault(); args...

Control event text (numeric or alphanumeric)

Answered: The latest sandbox build (2020.4.4729) lets now includes an experimental onAfterEventEditRender event handler that lets you access the editing <textarea> element using args.element. You can use it to...

How to select multiple events on single click?

Answered: You can handle onClick event and modify the selection using the event selection API, i.e. multiselect.add():

Limit time range selecting to one day

Answered: It's OK, I found the solution myself using onTimeRangeSelecting

Passing function for event area click

Answered: The best way is to remove the "areas" property from TL_sys_bloki.php and add it using onBeforeEventRender: dp.onBeforeEventRender = function(args) { = [ {left: 0, top: 0, wi...

How to highlight a cell being hovered by a fill color

Answered: You can use :hover CSS selector to define the hover style: .scheduler_default_cell:hover, .scheduler_default_cell.scheduler_default_cell_business:hover { background-color: #ccc; }

Resize scheduler cells by user?

Answered: Unfortunately, that is not supported.

Customizing time header cell after binding

Answered: If you load the events using one of the optimized methods, e.g. events.load(); or update({events: [...]}); the Scheduler will only update the events. You'll need to force a full refresh to re-render ...

text-align: right does not work for *_event_inner class

Answered: You can override "display: flex" if needed. It is only used to enable vertical centering within the event box. You can also keep "display: flex" and use "justify-content" to align the event text to t...

Scheduler scroll event

Answered: You may want to take a look at the "frozen rows" feature that may help with some scenarios: If that doesn't work, you can use the addEventListener sync...

Scheduler scrollbar in Chrome is thin

Answered: The Scheduler theme doesn't define the scrollbar appearance. It will use the default styles (defined by the browser or by your global styles). If you want to modify the default scrollbar appearance, ...


Answered: You can access the time range boundaries using args.start and args.end in onTimeRangeSelected event handler. Please see also: You can ...

Scroll to a specific time in the day

Answered: The scrollTo() call only works if the grid is already displayed and has non-zero dimensions. Since you define no resources before init() it can't scroll until the resources are loaded. There are two ...

Server Side Rendered React throws `navigator is not defined`

Answered: Unfortunately, server-side React rendering is not supported.
Previous Questions 31-60 of 2420 Next