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!