DayPilot Knowledge Base

AJAX Calendar/Scheduling Controls
DayPilot Pro (AJAX Calendar Control)
» DayPilot ASP.NET Calendar
DayPilot Pro (AJAX Monthly Calendar Control)
» DayPilot ASP.NET Monthly Calendar
DayPilot Pro (AJAX Scheduler Control)
» DayPilot ASP.NET 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: Jul 17, 2019

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

month-calendar-label.png

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.

AfterRenderJavaScript="afterRender(data)"

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"]);
                DayPilotMonth1.DataBind();

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

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;
  }
}

Related

How to open a new event dialog using TimeRangeSelected event (modal.js)
How to copy events using drag&drop (Ctrl key)
How to show a calendar event Bubble using JavaScript
How to set the time cell colors using database data in the Scheduler