Questions Tagged angular
gantt chart end date issue
when i add gantt chart in my UI, where the end date appears one day earlier in the DayPilot Gantt chart, Why? and how to solve this issue.
How to automatically moved to initial startdate and enddate of ganttchart
Answered: You can change the startDate and days properties as needed by calling the update() method: gantt.update({
startDate: "2025-05-01",
days: 31
});
how to hide complete percentage from gantt chart
Answered: You can hide the progress bar using the completeBarVisible property.
how to dynamically add color to each tasks
Answered: You can use the onBeforeEventRender event to set custom event color in the Scheduler. The color can be set either directly using args.data.backColor or via a CSS class (by setting args.data.cssClass)...
Issue with Hiding Non-Business Hours Spanning Two Days in DayPilot Scheduler
Answered: The onIncludeTimeCell logic should look like this (it works for two days and scale="Hours"): onIncludeTimeCell: (args) => {
const businessStart = 21; // 9 PM (21:00)
const businessEnd = 6; ...
when custom theme link is not proper
Answered: There is now a new version of the Theme Designer available. It will generate an up-to-date CSS. Please let me know if the problem persists.
Link Customization - Layer "Above" or "Below"
Answered: 1. The default linkLayer value is set to "Above" and you can see this behavior in the Links demo as well. Instead of using z-index, it uses the two different layers that are inserted into the DOM in ...
Dr Appointment usecase in Angular
Answered: Unfortunately, the doctor appointment reservation tutorial is not available for Angular + ASP.NET Core at the moment.
Remove Text
Answered: The DEMO label indicates that you are using a trial version of DayPilot Pro. To remove the label, you need to purchase a license.
Restrict multiple Days Selection
Answered: Could you please post a screenshot that would show your requirement?
Regarding removal of header as given in attached file with email.
Answered: Please see the src/index.html file in the project attached to the Angular Scheduler: Event Filtering tutorial - the header is defined there.
Avoid focusing an event on keyboard.focusCell
Answered: The current implementation of keyboard.focusCell() finds the default keyboard cursor position for the specified cell. That can be an event if it is at the top position (line 0). However, it should be...
Angular component inside event disappears when scrolling right
Answered: This is caused by floating events, a feature that displays the event text floating at the viewport edge when scrolling to the right. Angular components can’t be displayed in the floating part but you...
How to change css and html of Daypilot
Answered: You can use custom CSS easily - the best way is to generate a calendar CSS theme online. You can modify it manually as needed. In the open-source version, you can customize the inner HTML of events, ...
Resize Event daypilot-scheduler doesn't work. App crash
Answered: Unfortunately, I’m not able to reproduce the issue. Would you be able to post your config and a sample event?
Feature Request For Frozen Rows
Answered: We don’t plan to add a vertical scrollbar support to the frozen rows in the Scheduler. If you want to display two independently scrolling row sections, I recommend using two Scheduler instances, like...
Uncaught TypeError: Cannot read properties of null (reading 'style')
daypilot-core.js:17 Uncaught TypeError: Cannot read properties of null (reading 'style') at DayPilot.Calendar.Ea (daypilot-core.js:17:14081) at DayPilot.Calendar.La (daypilot-core.js:16:23322) at Res...
How to use angular component in bubble HTML
Answered: Sorry for the delay! There is a tutorial that shows how to insert an Angular component to the bubble. Angular Scheduler: Dynamic Tooltip It is necessary to instantiate the component and add it to the...
<daypilot-scheduler> is not a known element
Answered: It is necessary to add DayPilotModule to the imports section of the module where you want to use <daypilot-scheduler>. Example from the Angular Scheduler Quick Start tutorial: import {DataService} fr...
Cannot install DayPilot in my current Angular application
Answered: It looks like Chrome has started to report certain code as an error, even though it was acceptable before. It will be fixed shortly.
How to Select multiple events using Click
Answered: You can use the API to modify the behavior: Add an onEventClick handler and use multiselect.add() to add the event to the selection.
Mutliselection
Answered: I’m not sure if that’s what you mean but in the Calendar component in the Pro version, it is possible to select multiple events and then delete them using the API (use multiselect.events() to get a l...
How to edit Queue items
Answered: To edit the queue items, you can add another item (“Edit”) to the context menu: It will open a modal dialog with task details: This context menu can be defined like this: queueConfig: DayPilot.QueueC...
scroll 2 daypilot component in a single scroll event
Answered: You can synchronize two Schedulers using a native scroll event as demonstrated in this demo: https://javascript.daypilot.org/demo/scheduler/eventmovingtwoschedulers.html // scrollbar synchronization
...
Cannot install daypilot-pro-angular
Answered: The correct command is as follows:
yarn add https://npm.daypilot.org/daypilot-pro-angular/trial/2023.2.5574.tar.gz
You can also get the current version link at https://npm.daypilot.org.
Splitter between the rowheader grid and task grid not showing
Answered: I've tried to add your config to a new Angular Gantt chart project generated using https://builder.daypilot.org and it seems to work fine. The splitter appears as expected. If you are using a custom ...
Create custom column with DayPilot scheduler in angular 12
Answered: Please take a look at the following tutorial: https://code.daypilot.org/49959/javascript-scheduler-show-hide-columns-using-context-menu It uses a context menu to show/hide individual row header colum...
Scheduler: consecutive events appear as overlapping with high zoom level
Answered: In some cases this can happen. It's a result of the following logic: 1. The Scheduler enforces a minimum event with of 1px. 2. The overlaps are resolved on pixel level. These rules are necessary to e...
Use keyboard with daypilot angular
Answered: The Scheduler attaches "keyup" and "keydown" event handlers to the document element if you enable keyboard support using "keyboardEnabled: true". It uses the document object as the event target (you ...
Angular DayPilot Lite Library - DayPilot.Calendar class missing property "headerDateFormat"
Answered: This should be fixed now in the latest sandbox build (2022.4.434): https://release.daypilot.org/changes/jslite/ The next official release will be available next week. Thanks for reporting the issue!
Questions 1-30 of 153
Next