Calendar demo

Source of: FirstDate.aspx
<%@ Import Namespace="System.Globalization" %>
<script runat="server">

    protected void MonthCalendar_SelectionChanged(object sender, EventArgs e) {
        //
        // This method is called after changing date at the system standard month calendar. 
        // In order to change date visible in the DailyCalendar control 
        // set the FirstDate property to the current date. 
        //
        Calendar.FirstDate = MonthCalendar.SelectedDate;
    }

    protected override void OnPreRender(EventArgs e) {
        base.OnPreRender(e);
        //
        // Following code initializes the text box with the current visible DailyCalendar date.
        // The code is invoked when the server request is executing.
        //
        DateTextBox.Text = Calendar.FirstDate.ToString("d", CultureInfo.InvariantCulture);
    }

    protected void Calendar_CallbackScript(object sender, ComponentGo.Web.CallbackScriptEventArgs e) {
        //
        // Following code emits JavaScript code that initializes the text box with the current visible DailyCalendar date.
        // The code is invoked by the web browser when the after callback server has been realized.
        //
        e.ClientScript.AppendFormat("document.getElementById('{0}').value = '{1}';",
            DateTextBox.ClientID, Calendar.FirstDate.ToString("d", CultureInfo.InvariantCulture));
    }
    
</script>
<script language="javascript" type="text/javascript">

function changeDate() {
    //
    // This event is called by the web browser after user clicks the �Change� button.
    // Then the date obtains from the textbox will be passed to the SetFirstDate 
    // client method as an argument. That method invokes the server callbacks 
    // to retrieve new appointments information.
    //
    var tb = document.getElementById("<%=DateTextBox.ClientID%>");
    var date;
    try {
        date = new Date(tb.value);
        date = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
    }
    catch (e) {
        alert("Invalid date. Try again.");
        return;
    }
    
    CalObj.set_FirstDate(date);
}

</script>
<table width="100%">
    <tr>
        <td valign="top">
            <goc:DailyCalendar ID="Calendar" runat="server" BorderColor="Black" Font-Names="Verdana"
                Font-Size="Small" Height="348px" Width="388px" 
                OnCallbackScript="Calendar_CallbackScript" ObjectID="CalObj">
                <DateBarStyle Font-Bold="False" Font-Italic="False" HorizontalAlign="Center" ResourceImage="Gray" />
                <AllDayBarStyle BackColor="DarkGray" />
                <DefaultAllDayAppointmentStyle BackColor="White" />
                <ResourceBarStyle Font-Bold="False" Font-Italic="False" Font-Size="X-Small" HorizontalAlign="Center"
                    ResourceImage="Blue" />
                <HoursBarStyle BackColor="WhiteSmoke" Font-Names="Arial" Font-Size="Small" />
                <PreviousDayButton>
                    <Style Font-Underline="True" />
                </PreviousDayButton>
                <NextDayButton>
                    <Style Font-Underline="True" />
                </NextDayButton>
                <DefaultAppointmentStyle BackColor="White" Font-Size="X-Small" />
            </goc:DailyCalendar>
        </td>
        <td valign="top" style="text-align: left">
            This example shows how to use a system monthly calendar to change a date and contents
            of a DailyCalendar.<br />
            <br />
            A DailyCalendar.FirstDate server property was used by a postback.<br />
            <br />
            Select a date from a calendar:<br />
            <asp:Calendar ID="MonthCalendar" runat="server" BackColor="White" BorderColor="#999999"
                CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
                ForeColor="Black" Height="148px" Width="188px" OnSelectionChanged="MonthCalendar_SelectionChanged">
                <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
                <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
                <SelectorStyle BackColor="#CCCCCC" />
                <WeekendDayStyle BackColor="#FFFFCC" />
                <OtherMonthDayStyle ForeColor="Gray" />
                <NextPrevStyle VerticalAlign="Bottom" />
                <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
                <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
            </asp:Calendar>
            <br />
            Another solution is using of the set_FirstDate(date) client property to change a date
            displayed using a callback.<br />
            <br />
            Type correct date and press a button (use following button, not ENTER key):<br />
            <asp:TextBox ID="DateTextBox" runat="server" EnableViewState="False"></asp:TextBox>&nbsp;
            <input id="Button1" type="button" value="Change" onclick="changeDate();" /></td>
    </tr>
</table>