<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="ClientAPI._Default" %>

<%@ Register Assembly="RadCalendar.Net2" Namespace="Telerik.WebControls" TagPrefix="radCln" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Untitled Page</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>

      <script type="text/javascript">
      //<!--
      function Calendar_OnDateSelected(calendarInstance, renderDay)
      {
        // Convert a "triplet" to a JavaScript date
        var year = renderDay.Date[0]; 
        // JavaScript dates are zero based, thus the "-1"
        var month = renderDay.Date[1] - 1; 
        var day = renderDay.Date[2]; 
        date = new Date (year, month, day); 

        // disconnect the other event handler
        <%= RadDatePicker1.ClientID %>.OnDateSelected = null; 
        if (renderDay.IsSelected)
        {
          <%= RadDatePicker1.DateInput.ClientID %>.SetDate(date);
        }
        else
        {
          <%= RadDatePicker1.DateInput.ClientID %>.Clear();
        }
        // reconnect the other event handler
        <%= RadDatePicker1.ClientID %>.OnDateSelected = DatePicker_OnDateSelected; 
      }
                 
      function DatePicker_OnDateSelected(sender, e)
      {
        document.getElementById('Label1').innerText = e.NewDate; 
        var dates = <%= RadCalendar1.ClientID %>.GetSelectedDates();
        document.getElementById('TextBox1').value = "";  
        for(i=0; i<dates.length; i++)
        {
          document.getElementById('TextBox1').value += dates[i][0] + 
            "/" + 
            dates[i][1] + 
            "/" + 
            dates[i][2] + 
            "\n"; 
        }  

        // disconnect the stand alone calendar event to prevent recursion
        <%= RadCalendar1.ClientID %>.OnDateSelected = null; 
        // convert a JavaScript date to a "triplet"
        var tripletDate = new Array(e.NewDate.getYear(), e.NewDate.getMonth() + 1, e.NewDate.getDate());
        <%= RadCalendar1.ClientID %>.SelectDate(tripletDate, true); 
        // hook the event back up.
        <%= RadCalendar1.ClientID %>.OnDateSelected = Calendar_OnDateSelected; 
      }
                  
      //-->
      </script>

    <radCln:RadCalendar ID="RadCalendar1" runat="server" 
      Font-Names="Arial, Verdana, Tahoma"
      ForeColor="Black" 
      Style="border-left-color: #ececec; border-bottom-color: #ececec;
      border-top-color: #ececec; border-right-color: #ececec" 
      Skin="Inox">
      <ClientEvents OnDateSelected="Calendar_OnDateSelected" />
    </radCln:RadCalendar>
    &nbsp;<br />
    &nbsp;<br />
    <radCln:RadDatePicker ID="RadDatePicker1" runat="server" Culture="English (United States)" >
      <DateInput CatalogIconImageUrl="" Description="" 
        DisplayPromptChar="_" PromptChar=" " 
        Title="" TitleIconImageUrl="" TitleUrl="" 
        Skin="Macromedia" 
        EmptyMessage="Input Date Here"
        HideOnBlur="True"></DateInput>
      <ClientEvents OnDateSelected="DatePicker_OnDateSelected" />
      <Calendar Skin="WebBlue">
      </Calendar>
    </radCln:RadDatePicker>
    &nbsp;<br />
      <radCln:RadTimePicker ID="RadTimePicker1" runat="server">
      </radCln:RadTimePicker>
    
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
      <asp:TextBox ID="TextBox1" runat="server" Height="280px" TextMode="MultiLine" Width="576px"></asp:TextBox></div>

</form>

</body>
</html>
