Calendar demo

Source of: ClientAp.aspx

<script runat="server">

    protected override void OnLoad(EventArgs e) {
        base.OnLoad(e);
        Calendar.VisibleDays = TwoDaysCheck.Checked ? 2 : 1;
    } 
     
</script>


    <script language="javascript" type="text/javascript">

function clickInfo(e) {
    var ap = CalendarObj.get_SelectedAppointment();
    var res = null;
    if (CalendarObj.get_SelectedResourceIndex() >= 0)
        res = CalendarObj.get_Resources()[CalendarObj.get_SelectedResourceIndex()];
        
    document.getElementById("<%=TextLabel.ClientID%>").innerHTML = ap==null ? "" : ap.get_Text();
    document.getElementById("<%=FromLabel.ClientID%>").innerHTML = ap==null ? "" : ap.get_Start().toUTCString();
    document.getElementById("<%=ToLabel.ClientID%>").innerHTML = ap == null ? "" : ap.get_End().toUTCString();
    document.getElementById("<%=AllDayLabel.ClientID%>").innerHTML = ap==null ? "" : ap.get_AllDayEvent();
    document.getElementById("<%=IDLabel.ClientID%>").innerHTML = ap==null ? "" : ap.get_AppointmentId();
    document.getElementById("<%=BusyColorLabel.ClientID%>").innerHTML = ap==null ? "" : ap.get_BusyColor();
   
    document.getElementById("<%=ResourceTextLabel.ClientID%>").innerHTML = res==null ? "" : res.get_Text();
    
    document.getElementById("<%=DateTimeLabel.ClientID%>").innerHTML = CalendarObj.get_SelectedDateTime().toUTCString();
}

    </script>

    <table width="100%">
        <tr>
            <td>
                <goc:DailyCalendar ID="Calendar" runat="server" BorderColor="Black" Font-Names="Verdana"
                    Font-Size="Small" Height="348px" Width="388px" ObjectID="CalendarObj">
                    <DateBarStyle Font-Bold="False" Font-Italic="False" HorizontalAlign="Center" ResourceImage="Gray">
                        <EventClick ClientScript="clickInfo(event);" />
                    </DateBarStyle>
                    <BodyStyle>
                        <EventClick ClientScript="clickInfo(event);" />
                    </BodyStyle>
                    <AllDayBarStyle BackColor="DarkGray">
                        <EventClick ClientScript="clickInfo(event);" />
                    </AllDayBarStyle>
                    <DefaultAppointmentStyle BackColor="White" Font-Size="X-Small">
                        <EventClick ClientScript="clickInfo(event);" />
                    </DefaultAppointmentStyle>
                    <DefaultAllDayAppointmentStyle BackColor="White">
                        <EventClick ClientScript="clickInfo(event);" />
                    </DefaultAllDayAppointmentStyle>
                    <ResourceBarStyle Font-Bold="False" Font-Italic="False" Font-Size="X-Small" HorizontalAlign="Center" ResourceImage="Blue">
                        <EventClick ClientScript="clickInfo(event);" />
                    </ResourceBarStyle>
                    <HoursBarStyle BackColor="WhiteSmoke" Font-Names="Arial" Font-Size="Small">
                        <EventClick ClientScript="clickInfo(event);" />
                    </HoursBarStyle>
                    <PreviousDayButton>
                        <Style Font-Underline="True" />
                    </PreviousDayButton>
                    <NextDayButton>
                        <Style Font-Underline="True" />
                    </NextDayButton>
                </goc:DailyCalendar>
            </td>
            <td valign="top">
                This example shows how the calendar supports client Java Script for reading an information
                about last clicked appointment, resource or date-time.<br />
                Click somewhere on the calendar.<br />
                <asp:CheckBox ID="TwoDaysCheck" runat="server" Text="Show two days" AutoPostBack="True" /><br />
                <br />
                Selected appointment <em>get_SelectedAppointment()</em>:<br />
                Text <em>get_Text()</em>:
                <asp:Label ID="TextLabel" runat="server" Font-Size="X-Small"></asp:Label><br />
                Start Date <em>get_Start()</em>:
                <asp:Label ID="FromLabel" runat="server" Font-Size="X-Small"></asp:Label><br />
                End Date <em>get_End()</em>:
                <asp:Label ID="ToLabel" runat="server" Font-Size="X-Small"></asp:Label><br />
                All day <em>get_AllDayEvent()</em>:
                <asp:Label ID="AllDayLabel" runat="server" Font-Size="X-Small"></asp:Label><br />
                ID <em>get_AppointmentId()</em>:
                <asp:Label ID="IDLabel" runat="server" Font-Size="X-Small"></asp:Label><br />
                Busy color <em>get_BusyColor()</em>:
                <asp:Label ID="BusyColorLabel" runat="server" Font-Size="X-Small"></asp:Label><br />
                <br />
                Selected resource <em>get_SelectedResourceIndex()</em>:<br />
                Text <em>get_Text()</em>:
                <asp:Label ID="ResourceTextLabel" runat="server" Font-Size="X-Small"></asp:Label><br />
                <br />
                Selected date-time <em>get_SelectedDateTime()</em>:<br />
                Date &amp; time:
                <asp:Label ID="DateTimeLabel" runat="server" Font-Size="X-Small"></asp:Label><br />
            </td>
        </tr>
    </table>