DayPilot Knowledge Base

AJAX Calendar/Scheduling Controls
DayPilot Pro (AJAX Calendar Control)
» DayPilot AJAX Calendar
DayPilot Pro (AJAX Monthly Calendar Control)
» DayPilot AJAX Monthly Calendar
DayPilot Pro (AJAX Scheduler Control)
» DayPilot AJAX Scheduler
DayPilot » Knowledge Base » How to show the selected date using a Label control

How to show the selected date using a Label control

Last revision: Aug 17, 2010

It is possible to show the visible date using a special Label control.


The HTML code looks like this:

<h2><asp:Label ID="LabelMonth" runat="server">August 2010</asp:Label></h2>

Updating the value using PostBack

Updating the value using PostBack is easy, just call something like this:

LabelMonth.Text = DayPilotMonth1.StartDate.ToString("MMMM yyyy");

Updating the value using CallBack

During CallBack, it's not possible to update other controls using a server-side code.

If you want to update the LabelMonth value, you have to use AfterRenderJavaScript handler to update it on the client side using JavaScript.


You could read the date from the startDate property of the main control (Calendar, Scheduler, Month). However, JavaScript doesn't provide good tools to format the Date output. It's better to send the preformatted string using Update() method. It's enough to send it only when the StartDate actually changes (such as on "navigate" command send from DayPilot Navigator).

    protected void DayPilotMonth1_Command(object sender, CommandEventArgs e)

        switch (e.Command)
            case "navigate":
                DayPilotMonth1.StartDate = (DateTime)e.Data["start"];
                DayPilotMonth1.DataSource = getData(DayPilotMonth1.VisibleStart, DayPilotMonth1.VisibleEnd, (string)DayPilotMonth1.ClientState["filter"]);

                Hashtable data = new Hashtable();
                data["label"] = DayPilotMonth1.StartDate.ToString("MMMM yyyy");
                DayPilotMonth1.Update(CallBackUpdateType.Full, data);

The afterRender method updates the label using JavaScript:

function afterRender(data) {
  // check if the label should be updated
  if (data && data.label) {
    var label = document.getElementById("LabelMonth");
    label.innerHTML = data.label;


How to update a GridView after an AJAX callback update of the main calendar control
How to open a new event dialog using TimeRangeSelected event (modal.js)
How to copy events using drag&drop (Ctrl key)
How to set the time cell colors using database data in the Scheduler