YearView Scheduler

Could you please post a screenshot that would demonstrate the issue?

Here, I’ve grouped the bookings by property, and each one is assigned its own color for clarity. As you can see, the booking dates for each property extend across multiple rows. What I would like to achieve is a way to fix the row order: Property PX1 should always stay in row 1, PX2 in row 2, and PX417 in row 3.

Is it possible to define this kind of fixed row allocation in the YearView calendar?

Kind regards,
Mikolaj

Thanks, Mikolaj!

There are two options:

1. You can force a specific line in a row using the line property of an event.

2. You can join the events virtually into a single unit using the container property - that will ensure they will render in the same line.

These properties (and some other options) are described in the following tutorial:

• JavaScript Scheduler: Event Placement Strategies

Thanks, this will help :)

Do you have any strategies for adding row header columns for each month, so that the month appears as the parent and the property names are listed in rows under each month in a year view?

Kind regards,
Mikolaj

The year view is implemented using the standard resources view where the resources/rows have a custom start defined.

So you can extend the year view to use a tree hiearchy. In this case, you would probably need to disable the parent rows for drag and drop operations.

Example:

const resources = [
  {
    name: "Január",
    id: "2024-01",
    children: [
      { name: "R1", id: "R1", start: "2024-01-01" },
      { name: "R2", id: "R2", start: "2024-01-01" },
      { name: "R3", id: "R3", start: "2024-01-01" },
    ]
  },
  // ...
];

Another option is to use split rows. In this case the month parents wouldn’t have a dedicated row in the Scheduler grid:

const resources = [
  {
    name: "Január",
    id: "2024-01",
    split: [
      { name: "R1", id: "R1", start: "2024-01-01" },
      { name: "R2", id: "R2", start: "2024-01-01" },
      { name: "R3", id: "R3", start: "2024-01-01" },
    ]
  },
  // ...
];

Thank you so much for your help, but I’m still facing an issue. I’ve created the structure as you showed me for splitting, and I’ve successfully used the rowHeaderColumns feature in other parts of the site. However, when I try to define it in the year view, I encounter a JavaScript error that prevents the table from loading.

I’ve reviewed examples of the split feature, and they seem to work fine in other areas. Despite this, the issue persists specifically in the year view, even though I followed the same structure as shown in your example. You can see the situation more clearly in the screenshots I’ve attached.

Could you provide any further guidance or suggestions on what might be going wrong?

I’m sorry to say, but I’ve tested multiple structures, and none of them seem to work. No matter what I try, as soon as I add rowHeaderColumns, I still encounter the same issue. Nothing seems to resolve it.

Please let me try that.

There turned out to be an issue affecting split resources in the latest release (2024.4.6243). However, it only caused problems during event moving, not during the Scheduler initialization. This issue should be fixed now in the latest sandbox build.

Could you please try the following example with the latest sandbox build (2024.4.6248)?

If the problem persists, could you please post the exception strack trace?

<div id="dp"></div>

<script type="text/javascript">
    const dp = new DayPilot.Scheduler("dp", {
        days: 31,
        scale: "Day",
        timeHeaders: [
            { groupBy: "Day", format: "d" }
        ],
        rowHeaderColumns: [
            { title: "Month", width: 80 },
            { title: "Resource", display: "name", split: true },
        ],
        cellWidthSpec: "Auto",
        onBeforeCellRender: args => {
            const belongsToCurrentMonth = args.cell.x + 1 === args.cell.start.getDay();

            if (!belongsToCurrentMonth) {
                args.cell.properties.backColor = "#dddddd";
            }
        },
    });

    dp.init();

    const app = {
        loadData() {
            const resources = [];
            const startDate = DayPilot.Date.today().firstDayOfYear();

            for (let i = 0; i < 12; i++) {
                const month = startDate.addMonths(i);
                resources.push({
                    name: month.toString("MMMM"),
                    id: month.toString("yyyy-MM"),
                    split: [
                        { 
                            name: "R1", 
                            id: "R1", 
                            start: month, 
                            end: month.addMonths(1) 
                        },
                        { 
                            name: "R2", 
                            id: "R2", 
                            start: month, 
                            end: month.addMonths(1) 
                        },
                        { 
                            name: "R3", 
                            id: "R3", 
                            start: month, 
                            end: month.addMonths(1) 
                        },
                    ]
                });
            }

            const events = [
                {
                    start: startDate.addMonths(1).addDays(1),
                    end: startDate.addMonths(1).addDays(6),
                    id: DayPilot.guid(),
                    text: "Event 1",
                    resource: "R1"
                },
                {
                    start: startDate.addMonths(3).addDays(2),
                    end: startDate.addMonths(3).addDays(10),
                    id: DayPilot.guid(),
                    text: "Event 2",
                },
            ];

            dp.update({
                resources,
                events,
                startDate
            });
        },
    };

    app.loadData();
</script>

I tried it again, just as you described. In version 2024.4.6246, I encountered an issue during event moving, but in version 2024.4.6248, the issue seems to be resolved. Also, your code works perfectly now everything looks great!

I’ve attached a screenshot for reference.

Thanks so much for your help! :)

Great, thanks for the update!

Hi, I couldn’t find any documentation on how to create a second grouping that consolidates the same values in the 'Property' column. Is there any guidance on setting up a hierarchy where the first level is by month, the second by property, and the third by resources? I’m unsure what changes are needed in resources, events, and rowHeaderColumns. I've tried many combinations, and this is the closest I’ve gotten so far.

At this moment, only one level of split resources is supported.

In order to display multiple levels, you need to combine split rows in with the resource tree.

For example:

1. Display months as parents, and specify the properties as children. They can have resources specified as split children:

2. Display the whole year on the horizontal axis (days: 365) and show properties with resources on the vertical axis.

Hi, thanks for your feedback.

We like the yearview as is and will add more split columns for now. We found one problem with selectedRows: ["id_value"] where it only selects the first row in yearview, but doesn't select other rows with the same id in other months.

We tried following https://doc.daypilot.org/scheduler/row-selecting/ documentation, but still only one row of the same id gets selected.

We're working on this by hiding checkboxes for selection.

"I discovered an issue in the yearView calendar related to the order of elements in the split array. If an object in the split array is in the first position, it applies all its values to the parent object and overwrites it. However, if the object is in any other position, it doesn't affect the parent object at all.

> We found one problem with selectedRows: ["id_value"] where it only selects the first row in yearview, but doesn't select other rows with the same id in other months.

This will need a change in the selectedRows implementation. It will allow identification of the row using id and start. It should be available in a day or two.

> I discovered an issue in the yearView calendar related to the order of elements in the split array. If an object in the split array is in the first position, it applies all its values to the parent object and overwrites it. However, if the object is in any other position, it doesn't affect the parent object at all.

The split parent is rendered with the first row and it looks like the row properties are incorrectly applied to the split parent as well. This will be fixed soon.

As a workaround, you can set the properties of individual cells:

onBeforeRowHeaderRender: args => {
    if (args.row.id.includes(".A")) {
        args.row.columns[1].backColor = "#7179e4";
        args.row.columns[2].backColor = "#7179e4";
    }
}

Instead of setting the properties for the entire row:

onBeforeRowHeaderRender: args => {
    if (args.row.id.includes(".A")) {
        args.row.backColor = "#7179e4";
    }
}

Both these issues should be fixed now in the latest sandbox build (2024.4.6264):

• All rows with the same ID specified using selectedRows will be selected during init.

• The properties defined using onBeforeRowHeaderRender for the first split resource child will not be applied to the split parent anymore.

Hi,

I've tested both issues and can confirm everything works properly in the current version (2024.4.6270).

I have two styling-related questions:

1. How can I apply styling (background color, padding, margin, etc.) to the entire header? Do I need to define areas? While this isn't an issue with timeline view, I can't figure out how to do it in yearview

2. How can I add custom HTML to the area above rowHeaders (as indicated by the arrow in the documentation)? Reference: https://doc.daypilot.org/scheduler/time-header-active-areas/

I'd prefer not to split the forum thread as I've encountered another issue in yearview (which might not be specific to yearview only).

Thank you for your help.

timeHeaders: [
    { groupBy: "Year", height: 24},
    { groupBy: "Year", format: "yyyy"},
    { groupBy: "Day", format: "d" }
],

onBeforeTimeHeaderRender: args => {
    if (args.header.level === 0) {
      args.header.html = "<div style='width: 100%, height: 100%'><p style='marging-top: 50px; background-color: red; color: yellow;'>Hello</p></div>";
    }
},

Thanks for the update.

> 1. How can I apply styling (background color, padding, margin, etc.) to the entire header? Do I need to define areas? While this isn't an issue with timeline view, I can't figure out how to do it in yearview

The best way is to add a custom CSS class to the time header cells:

onBeforeTimeHeaderRender: args => {
    args.header.cssClass = "my-scheduler-header";
},

This way you can define all styles at once and include those that are not supported using inline styles (like args.header.backColor).

You may need to review the default styles for the header cells and override them (it uses display: flex for the inner div).

> 2. How can I add custom HTML to the area above rowHeaders (as indicated by the arrow in the documentation)?

You can use the cornerHtml property or the onBeforeCornerRender event.