Questions Tagged how-to
How can we display timezone header different to default
Answered: In the Calendar component, you can customize the hour header (displayed on the vertical axis) using the onBeforeTimeHeaderRender event handler and display custom content, including the hour data from...
onBeforeRowHeaderDomAdd disables expandable tree styles?
Answered: In the onBeforeRowHeaderDomAdd event handler, you can specify the target that of the custom element using the args.target property. By default, it is set to "Cell". In this case, it will overwrite th...
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...
how to color some cells of the scheduler grid
Answered: You can specify properties of the row header cells using the onBeforeRowHeaderRender event handler. In this case, it could look like this: onBeforeRowHeaderRender: args => {
if (yourCriteria) {
...
Filtering down to two groups or more (Scheduler)
Answered: Hi Steve, Thanks for the update! You could use two dropdowns or you could use a component that allows selecting multiple values (such as Choices). So provided that you have multiple selected values s...
Impossible to show events from my database (resource calendar)
Answered: When displaying a resource calendar (viewType: "Resources"), it is necessary to specify the resource id for events using the resource property. This value needs to match the column id exactly (includ...
Task time selection may get wrong then How to reselect it ,by deleting before task time in UI. And how to save it in server and local storage as data.
Hey!! Thanks for kind help by providing this doc. I have to customize it for purpose of self learning. Hope forums gonna help me out for this. Recently ,I have doubt which I posted “Task time selecti...
How I can modify resources? If I don’t need group?
Answered: If the events don’t display correctly, you should check the id of the resources (resources[].id) and the resource of events (event.list[].resource). Events are only displayed in a row if these value ...
Implementing a 'Break and Reschedule' Function in the Scheduler Component
Answered: This is possible. Just remember that it’s a bit more complex task and you will need to extend this code to cover edge cases and implement the server-side part. It works like this: The “Split” context...
Multiple background colors in event (Scheduler)
Answered: You can do this by inserting custom active areas into Scheduler events. The start and end of an active area can be specified using date/time values instead of pixels. That will let you insert custom ...
Scheduler - Disable Cells based on resource Availability
Answered: There is a tutorial that explain how to implement this: JavaScript Scheduler: Displaying Holidays It uses onBeforeCellRender event handler to disable individual cells. The resource-specific date rang...
Custom Event Styling in React Scheduler
Answered: You can use the onBeforeEventRender event handler to customize the events. A sample implementation could look like this: onBeforeEventRender: (args) => {
if(args.data.status === "completed") {
...
Scheduler Time Range Configuration
Answered: There are two ways to solve it: 1. You can define business hours using the businessBeginsHour and businessEndsHour properties and set showNonBusiness to false (see also hiding non-business hours): co...
Event Calendar, resource view: days on Y-axis
Answered: At this moment, the Calendar can only display hours on the vertical axis.
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
...
Height for day and week calendar.
Answered: Please see the options here: https://doc.daypilot.org/calendar/height/
Conditional display of Active Areas
Answered: Yes, this is possible. You can add active areas using onBeforeEventRender where you can check if a specific property exists in the source data object (args.data):
onBeforeEventRender: args => {
...
How to change Group task background color?
Answered: The shape of the task group is created using :before and :after pseudo-elements. In the default theme it looks like this: .gantt_default_task_group .gantt_default_event_inner {
position: absolut...
Db connection location
Answered: The database connection is handled by your application (DayPilot doesn't connect to the DB directly). Typically, the connection string is stored in web.config (in ASP.NET applications). Note that the...
Writing current date and time to DB from a context menu item
Answered: Something like this could work (you will need to adjust it for your needs):
async function clockOn() {
const modal = await DayPilot.Modal.confirm("Are you sure you want to clock onto this job?...
Link Connector Arrows
Answered: I see. 1. You can simply add/remove the links from the Scheduler as needed, like this:
const linksToBeDisplayed = [ /* ... */ ];
dp.update({links: linksToBeDisplayed});
2. Or you can mark the li...
Adjusting event height leads to excessive empty space (Month)
Answered: So simple solution: It's not:
eventHeight: "50",
it's:
eventHeight: 50,
How can I change the name of the event groups?
Answered: You can set custom HTML displayed by the group using onBeforeGroupRender event: https://api.daypilot.org/daypilot-scheduler-onbeforegrouprender/
onBeforeGroupRender: args => {
args.group.html = ...
Parent Row
Answered: Steve, Sorry for the confusion! You can detect parent rows using `args.cell.isParent`:
dp.onBeforeCellRender = function (args) {
if (args.cell.isParent) {
args.cell.backColor = "#ccc"...
Event Item
Answered: By default, the calendar displays the value of the "text" property in the event boxes. If you want to display more data, you can customize the event content using onBeforeEventRender event handler: h...
How disable focus in form.
Answered: You can use "autofocus: false" to disable autofocus or use "focus: 'anotherField'" to autofocus a selected field.
const form = [
{name: "Start", id: "start", type: "datetime"},
{name: "End", ...
Save selected dropdown item to the database
Answered: After the modal dialog is closed, you need to call an API endpoint that will save the changes. You can access the updated data object as "modal.result". The selected value is accessible as "modal.res...
Dropdown field in modal form
Answered: You can load the data using fetch() or a similar function before opening the modal dialog.
async function showModal(url) {
const options = await fetch("/api/getOptions").then(response => respons...
Multimove and manually snapping to grid
Answered: It is possible to change "start" end "end" properties of the additional selected events in onEventMoving. You can modify the args.multimove[x].start and args.multimove[x].end properties as needed. Ju...
Undo Redo
Answered: OK, I have the script running and incorporated within my scheduler. Much trial and error! I now have another issue. My Scheduler draws its information from an access database. The scheduler then writ...