Scale={"Manual"} with 30 minutes cells

Asked by Anonymous
2 months ago.

I’m using the React scheduler with a customized timeline. The start and end times of the scheduler are dynamic and, sometimes, the end time can be past midnight. In those cases, i want to show the past midnight hours on the right side instead of the left, that’s why i chose to have a customized timeline.

My config is as follows:

scale={"Manual"}
timeHeaders={[
  { groupBy: "Day", format: "dddd, dd MMMM yyyy" },
  { groupBy: "Hour", format: "HH:mm" },
]}
timeline={[
  {
    start: 2024-02-21T12:00:00
    end: 2024-02-21T23:30:00
  },
]}

The thing is, when i try to select a time range, it “selects” all the row. What i want is to have 30 minutes cells but cellDuration={30} doesnt work when scale is set to manual. How can i achieve that?

how-to javascript

Answer posted by Dan Letecky [DayPilot]
2 months ago.

To display time cells with custom duration defined in minutes, you need to set the scale property to "CellDuration":

scale={"Manual"}
cellDuration={30]

Another option would be to use scale={"Manual"} but in that case it is necessary to define the timeline cells individually as timeline array items.

In your example above, you defined just one cell.

Comment posted by Anonymous
2 months ago.

In your answer, to define timeline cells individually, i see that you’re using the function generateTimeline().

How would my function be to return the day and the hours (dynamic start and end times) on the time header and then 30 minutes cells?

Comment posted by Dan Letecky [DayPilot]
2 months ago.

The time header rows and groups are defined independently from the timeline, using the timeHeaders property:

timeHeaders={[
  { groupBy: "Day", format: "dddd, dd MMMM yyyy" },
  { groupBy: "Hour", format: "HH:mm" },
]}

A simple generateTimeline() function that returns an array of 30-minute blocks between the specified start and end could look like this:

function generateTimeline(start, end) {
  const timeline = [];
  
  let current = start;
  while (current < end) {
    const next = current.addMinutes(30);
    timeline.push({ start: current, end: next });
    current = next;
  }

  return timeline;
}

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

Scale={"Manual"} with 30 minutes cells

Products

Learn

Get Support

DayPilot Pro