Message Bar

JavaScript

You can display a message using the integrated message bar. The message() method will display the message at the default position:

dp.message("Welcome!");

Styling the Message Bar

1. You can create a custom theme using the Theme Designer. Using the Theme Designer, you can customize the foreground and background color, apply a gradient and set custom padding.

2. You can override the background color specified using the default theme:

#dp .scheduler_default_message { color: #ffffff; background: red; }

Please note that #dp is added to the selector to make it more specific so it will override the theme.

3. You can add custom CSS class to the message bar when you display the message:

dp.message("Hi there!", { cssClass: "red" });

CSS:

.red.scheduler_default_message { color: #ffffff;background: red; }

See Also

• DayPilot.Scheduler.message()

• DayPilot.Scheduler.messageBarPosition

• DayPilot.Scheduler.messageHideAfter

• DayPilot.Scheduler.messageHideOnMouseOut

API: messageBarPosition, messageHideAfter.

The examples display a confirmation below the timeline and hide it after three seconds when Show message is clicked.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

Set messageBarPosition and messageHideAfter in the config. The button method calls message() through the @ViewChild control.

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

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <button (click)="action0()">Show message</button>
    <daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    messageBarPosition: "Bottom",
    messageHideAfter: 3000
  };
  async action0() {
    const dp = this.scheduler.control;
    dp.message("Schedule updated.");
  }
}

React

Pass the message-bar options as props. The click handler uses the control retained by controlRef to display the confirmation.

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

export default function SchedulerExample() {
  const scheduler = useRef(null);
  async function action0() {
    const dp = scheduler.current;
    dp.message("Schedule updated.");
  }
  return <div>
    <button onClick={action0}>Show message</button>
    <DayPilotScheduler
      controlRef={control => { scheduler.current = control; }}
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      messageBarPosition={"Bottom"}
      messageHideAfter={3000}
    />
  </div>;
}

Vue

The message-bar options are individual bindings. Use the Scheduler's template ref to call message() from the @click function.

<script setup>
import {ref} from "vue";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const scheduler = ref(null);
const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const messageBarPosition = "Bottom";
const messageHideAfter = 3000;
async function action0() {
  const dp = scheduler.value.control;
  dp.message("Schedule updated.");
}
</script>

<template>
  <div>
    <button @click="action0">Show message</button>
    <DayPilotScheduler ref="scheduler"
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :messageBarPosition="messageBarPosition"
      :messageHideAfter="messageHideAfter"
    />
  </div>
</template>

protected void DayPilotScheduler1_EventResize(object sender, EventResizeEventArgs e)
{
  // ...
  DayPilotScheduler1.UpdateWithMessage("Event resized");
}

protected void DayPilotCalendar1_EventResize(object sender, EventResizeEventArgs e)
{
  // ...
  DayPilotCalendar1.UpdateWithMessage("Event resized");
}

protected override void OnInit(InitArgs ea)
{
  UpdateWithMessage("Welcome!", CallBackUpdateType.Full);
}