search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Disable Column in js Calendar

Asked by Anonymous
1 month ago.

I am trying to disable entire columns based on some information on render. I know I can use onBeforeCellRender() to disable certain cells based on time but I cannot find anything to disable all the cells within a column. Does any method like this exist? I could also just use a quick lookup for any cell's parent (resource) that would return the column object of that resource.

Answer posted by Dan Letecky [DayPilot]
1 month ago.

The cells can only be marked as disabled using the onBeforeCellRender event handler. This reactive design ensures the best performance of your app and prevents state synchronization issues.

You should be able to add a condition to the onBeforeCellRender event handler that identifies the column. For example, in the resource calendar mode (https://doc.daypilot.org/calendar/resources-view/) the column can be identified using the resource ID (+ the date if needed). In the standard week view (https://doc.daypilot.org/calendar/week-view/) you can use the date only.

Example:
const disabledResources = ["A", "B"];

const calendar = new DayPilot.Calendar("calendar", {
  viewType: "Resources",
  columns: [
    {name: "A", id: "A"},
    {name: "B", id: "B"},
    {name: "C", id: "C"},
    {name: "D", id: "D"},
    {name: "E", id: "E"},
  },
  onBeforeCellRender: args => {
    if (disabledResources.includes(args.cell.resource) {
        args.cell.properties.disabled = true;
        args.cell.properties.backColor = "#cccccc";
    }
  }
}

If you want to disable different column(s), you can change the "disabledResources" array and call calendar.update().

New Reply
This reply is
Your name (optional):