html5 scheduler integrated message bar

JavaScript

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

dps.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

ASP.NET WebForms

Summary:

  • UpdateWithMessage() on the server side

  • MessageHideAfter

  • Style it using CSS (supported in the theme designer)

scheduler message bar 

The message bar can be updated easily using a single line of code and without any JavaScript on the client side. Use the UpdateWithMessage() method:

  • UpdateWithMessage(string message)

The message bar invoked using UpdateWithMessage() method is visible for 5 seconds.

  • If there is a new message during that time, the message bar fades out and in to give a visual feedback.

  • It can be closed by clicking anywhere on the message bar.

Hover

Message bar close timeout (see MessageHideAfter property) will be paused when you hold the mouse cursor over the message bar. The message bar will be hidden in 500ms after you move the mouse out.

MessageHideAfter

The MessageHideAfter property sets the default timeout for message bar hiding (in ms). The default value is 5000 (5 seconds).

Position

scheduler html5 javascript jquery message

The message bar position can be set using MessageBarPosition property ("Top", "Bottom"). The default position is "Top".

Default.aspx.cs

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

calendar message bar

The message bar now can be updated easily using a single line of code and without any JavaScript on the client side.

You can use a new UpdateWithMessage() method:

  • UpdateWithMessage(string message)

Default.aspx.cs

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

ASP.NET MVC

The Scheduler supports an integrated message bar.

scheduler message bar

You can display a message using a server-side UpdateWithMessage() method:

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

Demo