DayPilot.Scheduler.show

The show() method displays the Scheduler, updates its height, and recalculates its dimensions. This is especially useful when heightSpec is set to "Parent100Pct".

Declaration

DayPilot.Scheduler.show()

Parameters

This method has no parameters.

Notes

Use this method when the Scheduler is initialized while hidden and becomes visible later, for example inside a tab container.

Examples

JavaScript

const dp = new DayPilot.Scheduler("dp", {
  heightSpec: "Parent100Pct",
  // ...
});
dp.init();

const actions = {
  show: () => dp.show()
};

document.querySelector("#show-scheduler").addEventListener("click", () => {
  document.querySelector("#scheduler-host").style.display = "block";
  actions.show();
});

Angular

<daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>
<button (click)="showScheduler()">Show Scheduler</button>

config: DayPilot.SchedulerConfig = {
  heightSpec: "Parent100Pct",
  // ...
};

showScheduler() {
  this.scheduler.control.show();
}

React

const [scheduler, setScheduler] = useState();
const showScheduler = () => scheduler?.show();

return <div><button onClick={showScheduler}>Show Scheduler</button><DayPilotScheduler controlRef={setScheduler} heightSpec="Parent100Pct" />{/* ... */}</div>;

Vue

<template>
<button @click="$refs.scheduler.control.show()">Show Scheduler</button>
<DayPilotScheduler :config="config" ref="scheduler" />
<!-- ... -->
</template>

<script>
export default {
  data() {
    return {
      config: {
        heightSpec: "Parent100Pct",
        // ...
      }
    };
  }
};
</script>

See Also

DayPilot.Scheduler Class