Questions Tagged javascript
Recurrent events
Answered: You can display recurrent events (and add the necessary icons) but you need to handle the recurrence definition and storage on the server side. The calendar needs to receive the individual occurrence...
how to select multiple value in form dropdown
Answered: Unfortunately, it is not possible to select multiple options from the drop down list (type: "select" or type: "searchable"). I recommend using a set of checkboxes instead (type: "checkbox").
Honoring grid layout
Answered: This seems to be caused by the wrapper divs that you use to display the columns for DayPilotNavigator and DayPilotCalendar. The tutorial uses "display: flex" to arrange these components but your code...
How to not show non business Hours in DayPilotCalendar
Answered: You can hide non-business hours using the heightSpec property:
const calendar = new DayPilot.Calendar("dp", {
heightSpec: "BusinessHoursNoScroll",
//...
});
calendar.init();
See also: htt...
JavaScript Scheduler Model Custome date selection
Answered: You can use the "dateFormat" property of the date field:
const resources = [
{name: "Resource A", id: "A"},
{name: "Resource B", id: "B"},
{name: "Resource C", id: "C"},
];
const form ...
How to hide elements in the hours row?
Answered: This looks like the minute part which is included in the standard view. However, it doesn't display if you use timeHeaderCellDuration value other than 60. I recommend checking the onBeforeTimeHeaderR...
Evento useless in shade
Answered: You can disable time range selecting using the config:
{
timeRangeSelectedHandling: "Disabled",
// ...
}
If you want to use this feature to create new events, it is necessary to call clear...
Moving and resizing tasks was not explained
Answered: You can find the documentation here: Resizing: https://doc.daypilot.org/gantt/task-resizing/ https://api.daypilot.org/daypilot-gantt-ontaskresize/ Moving (horizontal): https://doc.daypilot.org/gantt/...
How to load resources from an API and display them as rows in the scheduler?
Answered: You can load resources from an API like this:
async componentDidMount() {
const {data} = await DayPilot.Http.get(`/api/resources`);
this.setState({resources: data});
}
The returned d...
Scheduler - Frozen rows are not processed in onRowFilter
Answered: Frozen rows are now supported by the row filter in the latest sandbox build (2023.1.5544). The documentation is updated as well: https://doc.daypilot.org/scheduler/frozen-rows/
How to implement row-up and row-down in gantt view.
Answered: Sorry for the confusion. You can do this by changing the order of tasks in the data source (it's stored in dp.tasks.list). Then call update() to apply the changes.
Max Events
Answered: This example uses onBeforeCellRender to customize the monthly calendar cells. It adds the action button using an active area. In Angular, it could look like this:
onBeforeCellRender: (args) => {
...
508 Compliant
Answered: The Scheduler provides the following tools to help you make it accessible: the Scheduler elements (main areas, items) are marked with "aria-label" attributes you can enable keyboard support (https://...
Button with bind action angular
Answered: I assume you mean the modal dialog: Unfortunately, Angular components in the form items are not supported at the moment.
Getting error while downloading a range image
Answered: This issue should be fixed now in the latest sandbox build (2023.1.5540): https://release.daypilot.org/changes/js/ Please let me know if the problem persists.
Display Icon in options on Modal form
Answered: At this moment, icons can't be displayed in <select> items - it uses the standard browser element and that doesn't support HTML in <option> elements. You can implement your own form item type using p...
Zoom
Answered: There is now a new zoom API available in the latest sandbox build (2023.1.5540). See also: https://release.daypilot.org/changes/js/ The API docs and a tutorial are coming soon.
month_transparent_event_hover repeating
Answered: It looks like you have modified the source code - you should use the original (commented-out in your screenshot) regex:
var already = new RegExp("(^|\\s)" + name + "($|\\s)");
Change Hour Format
Answered: You can hide the minutes using CSS:
.calendar_default_rowheader_minutes {
display: none;
}
Calendar Customization
Answered: It is possible to modify the appearance using CSS. You can either override the built-in CSS theme for selected elements or you can create a custom CSS theme (https://themes.daypilot.org) and adjust i...
error with computed function (Calendar)
Answered: The $refs values will only be accessible after the component is mounted. Before that, this.$refs.calendar (or any other $refs value) will be undefined and you will see this error. 1. If you move your...
Use method on click (Calendar)
Answered: Yes - you should take a look at the onTimeRangeSelected event handler in your application. By default, the calendar doesn't do anything when you select a time range (click a cell) so if you see a mod...
Create event only by clicking (Calendar)
Answered: If you click a calendar cell, it will fire onTimeRangeSelect (and onTimeRangeSelected) event handler where you can create a new event. This works in both versions (Lite and Pro). To make sure only a ...
Is there any way to export range SVG/PNG in Gantt View?
Answered: This should work fine - DayPilot.Gantt.exportAs() method uses the same syntax as DayPilot.Scheduler.exportAs(). However, the range defined using "dateFrom" and "dateTo" can only define a subset of th...
Drag-drop from month calendar
Answered: At this moment, this is not supported but we will take a look at it.
How to display custom task array elements (React Calendar)
Answered: I have managed to solve this and the solution was: the method that build my events array was async and due to that fact, to update the events field in state I had to perform setState in .then functio...
ERROR TypeError: this.f is not a function at DayPilot.Navigator.select
Answered: This turned out to be a minification issue. It should be fixed now in the latest sandbox build (2023.1.449): https://release.daypilot.org/changes/jslite/ The next official release will be available n...
Parent resource id (Vue Scheduler)
Answered: The "dp" variable used in example is a reference to DayPilot.Scheduler object. In Vue, you can get it using the "ref" attribute:
<template>
<DayPilotScheduler id="dp" :config="config" ref="sched...
Prevent Event Move (Vue Scheduler)
Answered: You can implement custom rules for event moving using "onEventMoving" event handler. You can find an example here: https://doc.daypilot.org/scheduler/event-moving-customization/