javascript scheduler time header active area segments

You can add custom visual elements to the Scheduler time header cells using active areas.

Visual Appearance

Active areas can be visually represented as:

  • Icons: These can be SVG symbols or font icons.

  • Images: You can use common image formats like JPEG, PNG, or SVG.

  • Color Bars: These can be vertical or horizontal and used for marking time.

  • Text: You can place custom text at the specified position.

  • Rich HTML content: Add custom content defined using raw HTML.

  • Time-Based Segments: Set start and end times using date values instead of pixels.

The position can be defined using pixels (relative to the top, bottom, left, right) or using date/time values (replacing left, right, width values).

Uses

You can use active areas to:

  • Show Status Icons: Display icons representing a status for a time slot.

  • Highlight Time Slots: Use color bars to highlight specific time slots, such as public holidays or busy periods.

  • Provide Tooltips: Display a hover tooltip that provides extra details about a time cell, like its utilization or special notes.

  • Add Context Menus: Introduce a context menu offering additional actions, such as blocking or disabling a specific time slot.

  • Create Custom Segments: Create specific time units not supported by the standard time header units.

  • Select Time Columns: Add a button to select an entire column of time.

  • Filter Rows: Add a button allowing users to filter rows based on data or the availability of a chosen time slot.

Supported Actions

Active areas can initiate:

  • Bubbles on Hover: Show a bubble or pop-up when hovered over.

  • Context Menus: Display a menu with options.

  • Custom Code: Run specific code defined using an event handler.

Visibility Options

Active areas can be:

  • Permanently Visible: Always seen on the interface.

  • Visible on Hover: Seen only when hovered over.

  • Visible on Touch Devices: Always seen on touch devices, but on hover for non-touch devices.

With these active areas, the scheduler's time header becomes more functional and user-friendly, allowing for better navigation and interaction.

Defining Active Areas

You can create time header active areas using the onBeforeTimeHeaderRender event handler.

  • Define the active areas using args.header.areas array.

  • Each active area object supports properties described at the DayPilot.Area documentation page.

Example: Info Icon

javascript scheduler time header active area info

This example shows a text-based icons on the right side of the time header cells in the first row (args.header.level === 0).

Upon clicking, the active area shows a modal dialog with the cell start and end date/time.

onBeforeTimeHeaderRender: args => {
    if (args.header.level === 0) {
        const style = "text-align: center; font-weight: bold; cursor: pointer; border-radius: 10px; border: 1px solid #ccc; background-color: #fff;";
        args.header.areas = [
            {
                right: 6,
                top: 6,
                height: 16,
                width: 16,
                html: "i",
                style: style,
                action: "None",
                onClick: args => {
                    const header = args.source;
                    console.log(args);
                    DayPilot.Modal.alert('Time slot clicked: ' + header.start.toString('yyyy-MM-dd HH:mm:ss') + ' - ' + header.end.toString('yyyy-MM-dd HH:mm:ss'));
                }
            },
        ];
    } 
}

Example: Custom Time Segments

javascript scheduler time header active area segments

This example shows three 10-day segments in the second time header row, each using a different color:

Configuration:

timeHeaders: [
    {groupBy: "Month", format: "MMMM yyyy"},
    {groupBy: "Month", height: 24}
],
onBeforeTimeHeaderRender: args => {
     if (args.header.level === 1) {
        const point1 = args.header.start.addDays(10);
        const point2 = args.header.start.addDays(20);
        const padding = 3;
        args.header.areas = [
            {start: args.header.start, end: point1, top: padding, bottom: padding, backColor: "#cc0000", style: "border-radius: 10px;"},
            {start: point1, end: point2, top: padding, bottom: padding, backColor: "#f1c232", style: "border-radius: 10px;"},
            {start: point2, end: args.header.end, top: padding, bottom: padding, backColor: "#6aa84f", style: "border-radius: 10px;"},
        ];

        args.header.html = "";
    }
}