Questions Tagged javascript
How to identify the new scheduler that the event was moved to?
Answered: You can identify it in onEventMove event handler - "this" object will point to the target Scheduler. This will work even if you reuse the same event handler function for all Scheduler instances.
dp...
Display Context Menu On Touch Device Tap
Hi there, I am trying to display the scheduler event context menu when the user taps on the event from a touch device. I want this behavior to happen only on touch devices (small screens) not on desk...
Angular 6 Gantt - Cannot read property 'internal' of undefined
Answered: You can fix this bug by installing the latest sandbox build:
npm install https://npm.daypilot.org/daypilot-pro-angular/trial/2018.3.3413.tar.gz --save
start date and end date
Answered: You can use "startDate" to change the visible date range: https://doc.daypilot.org/calendar/manual-date-switching/ The end date is calculated automatically, depending on the viewType value (https://d...
How to disable or hide the expand/collapse button on resources
Answered: Sorry for the delay! You can hide it using custom CSS. For the default theme (scheduler_default) you can use something like this:
.scheduler_default_tree_image_no_children,
.scheduler_default_tree...
Format date in timesheet mode (Angular 5)
Answered: By default, the timesheet uses the short date format specified using the current locale for the day headers. You can customize the text using onBeforeRowHeader render event handler:
config: any = {...
How to routing on onEventClicked: function (args) { } ANGULAR
Answered: Try using the TypeScript syntax:
constructor(private router: Router) { }
config: any = {
onEventClicked: args => {
this.router.navigate(.....);
}
}
When using the JavaScript syntax "...
How to use bubblehtml on angular5
Answered: Please make sure that eventHoverHandling property is set to "Bubble":
config: any = {
eventHoverHandling: "Bubble"
};
This is the default value but the current version of the UI Builder (http...
Disable cells previous to the current datetime
Answered: Unfortunately, DayPilot Lite doesn't support disabled cells. However, you can check the dates in onEventMove, onEventResize, and onTimeRangeSelect events handlers and call args.preventDefault() to ca...
How use Scheduler component on html component
Answered: For Angular 5 Scheduler project please see the Angular 5 Scheduler Quick Start tutorial: https://code.daypilot.org/87636/angular-5-scheduler It includes the basic setup required in Angular 5. You can...
daypilot calendar bubble bug (angular, general)
Answered: This issue should be fixed in the latest sandbox build (3394): https://javascript.daypilot.org/sandbox/calendar/index.html Please let me know if the problem persists. A new release with the bug fix w...
Disabled Cells
Answered: What version of DayPilot Pro are you using? Disabled cells prevent all drag and drop operations, as you can see here: https://javascript.daypilot.org/demo/scheduler/cellsdisabled.html
Prevent event card scaling when at view boundry
Answered: You can disable this behavior using floatingEvents property:
dp.floatingEvents = false;
See also: https://doc.daypilot.org/scheduler/floating-events/
Ability to adapt to the user timezone
Answered: Unfortunately, automatic time zone handling is not supported at the moment. This is a desirable feature but it's not trivial and it's in the research phase now. I can't promise any delivery date at t...
Issues with type definitions
Answered: Sometimes, it can happen that the TypeScript definitions are missing a declaration of a specific member, especially if it has been added recently. Your examples: 1. commandCallBack() method is specif...
Scheduler Timeheaders
hello im using the latest version of daypilot pro for scheduler i have the following issue , if i customize one of the timeheaders , it doesnt render properly. ,sometimes it renders correctly , and s...
Problem with export function on Scheduler
Answered: Thanks for the quick reply! Looking over our config, found what was wrong. We put rowHeaderColumns: {width: 120} instead of rowHeaderWidth: 120. Works fine now!
Angular4 DayPilot question related to click handler
Answered: At this moment Angular templates are not supported in active area HTML. However, a solution is in the works and it will be available within a couple of weeks.
Footer row for Calendar
Answered: Unfortunately, a footer is not supported in the Calendar at the moment. The only option is to create a separate table with matching columns below the component.
Print Scheduler With Header On Every Page
Answered: With the direct print() method you only have limited control over the result (the browser will simply print the exported image). I recommend exporting the Scheduler to PDF, this way you can specify h...
columnBubble - get Date of Column
Answered: This was a bug which is now fixed in the latest sandbox build (2018.3.3388). You can test it and download the latest build here: https://javascript.daypilot.org/sandbox/calendar/daysresources.html Le...
Scheduler small events width
Answered: Hi Martin, If this only affects short events, I'd recommend reviewing the useEventBoxes property: https://doc.daypilot.org/scheduler/exact-event-duration/ https://api.daypilot.org/daypilot-scheduler-...
Navigator: Get first and last date that is displayed
Answered: You can use visibleStart() and visibleEnd() methods: https://api.daypilot.org/daypilot-navigator-visiblestart/ https://api.daypilot.org/daypilot-navigator-visibleend/ Just note that both methods retu...
CellAray type is missing forRange function in Angular
Answered: Thanks for reporting the issue. The forRange() method is now added to the TypeScript definitions in the latest sandbox build (2018.3.3385).
How to display time range of resource e.g. to show unavailability
I`m familiar with selecting cells to achieve that, but unavailability time range may not be rounded on cell duration.
I want syntax get a day when I click to daypilot-navigator in angularjs
I want syntax get a day when I click to daypilot-navigator in angularjs: <article> <div style="float:left; width:160px"> <daypilot navigator id="navigator" daypilot-config="navigatorConfig" daypilot-...
Hide RowHeaderColumns
Answered: Generally, if you want to change the Scheduler appearance, simply change the config as needed (i.e. remove the item from the array in this case) and call update(). This applies to row header column, ...
How to hide the X (Delete) Button on an Event
Answered: You can use deleteDisabled property to disable the delete icon for selected events. You can add it to the raw event data object on the server side or you can set it using onBeforeEventRender:
dp.on...