Cell Width

You can set the width of Scheduler cells (in pixels) using the cellWidth property.

• You can also use the automatic cell width mode where the cell width is calculated to fill the available horizontal space.
• In the manual scale mode, it is possible to set the width of each time cell individually.

See also cell duration.

JavaScript Scheduler

In the JavaScript Scheduler component, use the cellWidth property to set the cell width.

<div id="dp"></div>
<script>
  const dp = new DayPilot.Scheduler("dp", {
    cellWidth: 60,
    // ...
  });
  dp.init();
</script>

Angular Scheduler

In the Angular Scheduler, you can set the cell width using the cellWidth property of the config object.

import {Component} from '@angular/core';
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';

@Component({
  selector: 'scheduler-component',
  template: `<daypilot-scheduler [config]="config"></daypilot-scheduler>`,
  styles: [``]
})
export class SchedulerComponent {

  config: DayPilot.SchedulerConfig = {
    cellWidthSpec: "Fixed",
    cellWidth: 50,
    // ...
  };

}

React Scheduler

The React Scheduler component lets you set the grid cell width using cellWidth attribute of the <DayPilotScheduler> tag.

import React, {Component} from 'react';
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

class Scheduler extends Component {

  // ...

  render() {
    var {...config} = this.state;
    return (
      <div>
        <DayPilotScheduler
          cellWidth={50}
          ...
        />
      </div>
    );
  }
}

export default Scheduler;

Vue Scheduler

In the Vue Scheduler, use the cellWidth property of the config object (:config="config") to set the cell width.

<template>
  <DayPilotScheduler id="dp" :config="config" ref="scheduler" />
</template>

<script>
import {DayPilot, DayPilotScheduler} from 'daypilot-pro-vue'

export default {
  name: 'Scheduler',
  data: function() {
    return {
      config: {
        cellWidthSpec: "Fixed",
        cellWidth: 50,
        // ...
      },
    }
  },
  components: {
    DayPilotScheduler
  },
  // ...
}
</script>

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  CellWidth = "60"
/>

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  CellWidth = 60
})