DayPilotThe appearance and behavior of event boxes in the JavaScript Scheduler can follow the data they represent. Content, colors, progress, controls and interaction permissions are configurable globally or for individual events.
Customize event appearance and content
Event customization covers text and HTML, CSS classes, dimensions, backgrounds, borders, fonts and duration-bar colors. A booking can show its type, owner or priority; a conflicting state can be highlighted without changing the rest of the board.
Properties can arrive with the event data or be calculated in the rendering callback. This lets the same display rules apply to events loaded initially and events updated later. Ordinary text labels are HTML-encoded by default; custom HTML provides a separate path for formatted content.
In Pro, custom sorting controls event placement within each row, including priority ordering for overlapping work. Event containers keep related stages of a job together on a shared line or, when stages overlap, in a block of multiple lines.
Control behavior for individual events
Moving, resizing, clicking and other event actions can be enabled or disabled according to the event's data. A status can therefore affect both the visual treatment and the available interaction: approved bookings may use a distinct fill while staying fixed on the timeline.
These are UI permissions supplied by your application. Its backend remains responsible for authorizing changes to stored records. The common UI overview covers the editing, selection and deletion facilities around the event.
Add icons, actions and hover details
Active areas place status icons, buttons, menu triggers and drag or resize handles inside the event. They can be positioned by pixels or by dates within the booking and shown always, on hover or in a touch-visible variant.
An event bubble adds extended details on demand, while a context menu groups actions for the event. The event's own click action can still open its main editor.
Display progress, phases and planned dates
The duration bar can display percent complete with its own foreground and background colors. Phase segments distinguish stages within one event, while milestones mark points in time.
Event versions show additional read-only bars above or below the current event. Planned dates can remain visible alongside actual work, using baseline data supplied by the application.
Use framework content and export customization
Events can contain React JSX, Vue slots or Pro Angular templates with bindings and child components. Floating labels keep long-event content readable during scrolling, including custom DOM, React and Vue content.
Custom on-screen HTML does not automatically become exported content. The export customization hooks provide the text and styling that represent the event in image output.