DayPilot.Calendar.onColumnResize

The onColumnResize event handler fires when the user completes drag-and-drop resizing of a calendar column, before the new width is stored.

Available since 2022.3.5377.

Declaration

DayPilot.Calendar.onColumnResize(args)

Parameters

• args.column - information about the resized column

• args.newWidth (number) - new width of the resized column in pixels

• args.preventDefault() - cancels the resize

Notes

When this event fires, DayPilot.Calendar.columns.list still contains the original width values. Use DayPilot.Calendar.onColumnResized(args) to read the updated width.

Examples

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  onColumnResize: args => {
    if (args.newWidth < 80) {
      args.preventDefault();
    }
  },
  // ...
});
calendar.init();

Angular

<daypilot-calendar [config]="config"></daypilot-calendar>

config: DayPilot.CalendarConfig = {
  onColumnResize: args => {
    if (args.newWidth < 80) {
      args.preventDefault();
    }
  },
  // ...
};

React

<DayPilotCalendar
  onColumnResize={onColumnResize}
  {/* ... */}
/>

const onColumnResize = (args) => {
  if (args.newWidth < 80) {
    args.preventDefault();
  }
};

Vue

<DayPilotCalendar
  @columnResize="onColumnResize"
  <!-- ... -->
/>

const onColumnResize = (args) => {
  if (args.newWidth < 80) {
    args.preventDefault();
  }
};

See Also

DayPilot.Calendar.onColumnResized

DayPilot.Calendar.columns.list

DayPilot.Calendar Class