DHTMLX Scheduler：周调度时间线实现及行列切换问题求助

Hey there! Let's work through your weekly schedule timeline challenge. You want a view broken down by day, person, and hours, and you've got two partial solutions—let's fix each one to meet your needs.

Your first approach uses the timeline view, which currently only shows a single day. To expand it to display an entire week while keeping the person-by-hour breakdown, you just need to adjust the x-axis configuration to cover all 7 days of hourly slots:

scheduler.createTimelineView({ 
  name: "timeline", 
  x_unit: "hour", 
  x_date: "%m/%d %H", // Adds date to the hour label to distinguish days
  x_step: 1, 
  x_size: 84, // Total hours: 7 days × 12 hours/day (9AM to 9PM)
  x_start: 9, 
  x_length: 12, // Hours displayed per day (matches your original 9AM start)
  y_unit: scheduler.serverList("sections"), 
  y_property: "section_id", 
  render: "bar" // Ensures clear hour-by-hour bar rendering for shifts
});

Key Changes: #

• x_size: 84: Calculates the total number of hourly slots for 7 days (12 hours/day × 7 days)
• x_date: "%m/%d %H": Updates the axis label to show both date and hour, so users can tell which day each hour belongs to
• x_length: 12: Defines how many hours are grouped per day, keeping your original 9AM to 9PM window

This will render a timeline where each row is a person, and the horizontal axis spans 7 days of hourly slots—exactly the day-person-hour breakdown you need.

Your second approach uses the units view, which shows days/hours horizontally and people vertically, but you need to swap these (days/hours as rows, people as columns). The units view doesn't support direct row-column swapping, but you can replicate this layout with a reversed timeline view:

Step 1: Generate Time Slot Units for the Y-Axis #

First, create a list of time slots (each day + hour combination) to use as the vertical rows:

// Generate 7 days × 12 hours (9AM to 9PM) as y-axis units
var timeSlots = [];
var startDate = new Date(); // Use your desired start date for the week
startDate.setHours(9, 0, 0, 0);

for (var day = 0; day < 7; day++) {
  var currentDay = new Date(startDate);
  currentDay.setDate(startDate.getDate() + day);
  
  for (var hour = 9; hour <= 21; hour++) {
    var slotKey = day * 24 + hour; // Unique key for each day-hour slot
    var slotLabel = scheduler.templates.date_format(new Date(currentDay.getFullYear(), currentDay.getMonth(), currentDay.getDate(), hour));
    timeSlots.push({ key: slotKey, label: slotLabel });
  }
}

Step 2: Create the Reversed Timeline View #

Now set up a timeline view where the vertical axis is time slots and the horizontal axis is people:

scheduler.createTimelineView({
  name: "timeline_reversed",
  x_unit: scheduler.serverList("sections"), // People as horizontal columns
  x_property: "section_id", // Link events to a person's ID
  y_unit: timeSlots, // Day-hour slots as vertical rows
  y_property: "start_date", // Link events to their start time (matches slot times)
  render: "bar",
  x_size: scheduler.serverList("sections").length, // Number of people columns
  y_size: 84 // Total day-hour slots (7×12)
});

How This Works: #

• The vertical rows now represent each hour of each day
• Horizontal columns represent each person
• Events will render as bars in the corresponding person-column and time-slot row, effectively swapping the layout of your original units view

内容的提问来源于stack exchange，提问作者Gary Langerman