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

Questions Tagged javascript

Duration bar for some events only

Answered: You can use barHidden property of the event to hide the duration bar. You can add it to the source data object or you can add it using onBeforeEventRender: dp.onBeforeEventRender = args => { arg...

Using CSS3 zoom breaks Scheduler crosshair

Answered: Unfortunately, the CSS-level zoom is not supported at the moment. However, you should be able to achieve a similar effect by adjusting the dimensions properties (eventHeight, headerHeight, etc.) and ...

How switch between line = 0 and line = 'dedicated' in a Event?

Answered: The "line" property can't be changed in onBeforeEventRender (that's too late). You need to set it in the data source before the Scheduler loads it. You can preprocess the data like this: const even...

Width calculation in custom HTML, for trimmed events

Answered: You can turn off the "floating events" feature using floatingEvents property: https://doc.daypilot.org/scheduler/floating-events/ When floating events are disabled, only the div #1 will be displayed.

Adding a Color Bar using Active Areas doesn't work

Answered: If you enable columns (https://doc.daypilot.org/scheduler/row-header-columns/) you need to specify the areas for the respective args.row.columns[] item instead: onBeforeRowHeaderRender: function (a...

How validate if current cell has Events (Scheduler)?

Answered: In the JavaScript version, you can use the following methods: 1. To check a time range (for all resources), use the events.forRange() method: https://api.daypilot.org/daypilot-scheduler-events-forran...

How can I install .tar.gz

Answered: We provide the Vue package at https://npm.daypilot.org. The Vue package is ready to use and you can install it by following the instructions. With reference to a related question (https://forums.dayp...

vue npm error!

Answered: You are trying to install the Angular package ("daypilot-pro-angular") instead of the Vue package.

Clean solution to import custom scheduler theme with prefix CSS in Angular project

Answered: Two steps are required: 1. Include the theme in the global CSS (styles.css): @import url('themes/your_theme.css'); 2. Activate it using the "theme" config property: config: DayPilot.SchedulerCo...

this in undefined in the addEvent example

Answered: This hint is correct, you can't use "this" in a functional React component. You'll need to create a variable instead: const Scheduler = () => { let scheduler: DayPilot.Scheduler; return...

Using DayPilot.Calendar.makeDraggable and native drag/drop on the same html element

Answered: Unfortunately, the makeDraggable() method can't be combined with the native HTML5 drag and drop API. However, there is now a new registerDropTarget() method available in the latest sandbox build (202...

Delete on mobile

Answered: You can use an active area with the following properties. This will ensure that the active area will be always visible: visibility: "Visible" Or you can make it permanently visible on touch devic...

Changing cell width without changing the cell duration

Answered: You can do that by increasing the cellWidth value: scale: 'CellDuration', cellDuration: 10, cellWidth: 20, See also: https://doc.daypilot.org/scheduler/cell-width/

FontAwesome

Answered: You can display Font Awesome icons using active areas. That will let you specify the icon position and dimensions. You can include the active areas in the data source (events.list) but it's better to...

More precise event's position

Answered: By default, the Scheduler displays event boxes rounded to the grid cell borders. The exact duration is displayed using the duration bar (if enabled). You can change this behavior using useEventBoxes ...

How to load row axis based on selected items from dropdown by the user

Answered: You need to make sure that the URL used in dp.rows.load() call returns the data correctly. I recommend using browser developer tools (Ctrl-Shift-I or Option-Command-I), the Network tab, to inspect th...

Show calendar with 15 minutes slots

Answered: No, the Lite version only supports 30-minute slots. See also: https://doc.daypilot.org/calendar/time-cell-duration/

load data based on dropdown list

Answered: Please see my answer here: https://forums.daypilot.org/question/5494/how-to-refresh-gannt-chart-based-on-dropdown-values

How to refresh gannt chart based on dropdown values

Answered: The following tutorial includes a project that displays a drop-down list with locations: https://code.daypilot.org/61166/php-shift-planning-javascript-html5-mysql-database When a user selects an item...

How to change color of duration bar based on values in database

Answered: The backend_events.php script should look like this: <?php require_once '_db.php'; $stmt = $db->prepare("SELECT * FROM leave_event WHERE NOT ((leave_end <= :start) OR (leave_start >= :end))"); ...

Task Box Text Color

Answered: You can change the text color using onBeforeTaskRender event: dp.onBeforeTaskRender = function(args) { if (args.type === "Group") { args.data.box.fontColor = "#ffffff"; } }; See also...

Warnings in Chrome console for the scheduler

Answered: The warnings on non-passive event listener only appear if you set the log level to "Verbose". It's a hint and not something that can be "fixed" in all cases. The non-passive listener is essential for...

UndoService in reactjs

Answered: Please see the following tutorial: https://code.daypilot.org/30113/react-scheduler-how-to-enable-undo-redo

Scroll Issue in Resource Column only on Macbook trackpad?

Answered: This should be fixed now in the latest sandbox build (2021.3.5062): https://release.daypilot.org/changes/js/ It looks like Safari started to report a different scrollbar width when a mouse is connect...

Missing Event reference on external drag & drop item

Answered: Solved! Dunno why, but it seems that removing the ID attribute deputies to the AJAX conversion the content is correctly sent to db. If someone could explain me why this trick worked should be great. ...

rowheaderhideiconenabled set up colums which stay showed

Answered: Unfortunately, this is not possible at the moment. You can implement this feature using your own button. You can find an example here: https://javascript.daypilot.org/demo/scheduler/rowheadercolumns....

Uncaught DayPilot.Scheduler.resources expects an array object

Answered: The Scheduler checks if the object in the "resources" property is an array. If it isn't, it throws this exception. You should make sure that you are passing a correct object. I recommend printing the...

Reinitialize again Daypilot component or somehow destroy it on new reinit

Answered: There are two options: 1. You can reuse the "dp" instance (and use the update() method to apply the new configuration). 2. Destroy and unbind the old instance by calling dispose(): https://api.daypil...

Keyboard navigation from last cell

Answered: With the latest version (https://javascript.daypilot.org/daypilot-pro-for-javascript-2021-3-5070/), you can update the keyboard focus in onEventClick event like this: dp.onEventClick = args => { ...

Scheduler: keyboard navigation using the Tab-key

Answered: The keyboard API is now available - please take a look at the following tutorial: https://code.daypilot.org/68177/javascript-scheduler-how-to-use-the-keyboard-api
Previous Questions 31-60 of 1390 Next