How to mark all selected dates in RadDatepicker.

[Soumya]

I am developing an asp.net web application. I am using a RadDate picker to select a date to fix appointments for particular days.
Is there any way that I can mark the selected dates(already booked dates with a line strike-through) in the calendar so that the user can know that the dates are already selected.

[Princy]

Hi Soumya,

You can add already selected dates to special days of RadDatePicker Calendar from the code behind and can set the css as follows.

C#:

protected void Page_Load(object sender, EventArgs e)
 {
  RadCalendarDay calendarDay = new RadCalendarDay();
  DateTime dt = new DateTime(2012, 07, 20);
  calendarDay.Date = dt.Date;
  calendarDay.ItemStyle.CssClass = "strike";
  RadDatePicker1.Calendar.SpecialDays.Add(calendarDay);
 }

CSS:

<style type="text/css" >
 .strike
 {
  text-decoration:line-through;
 }
</style>

Thanks,
Princy.

[Soumya]

Thanks Princy .

I have one more scenario as below:
I have a Raddate picker  and two RadTimePickers(from time and to time).
User will select a date and from time and to-time for that date, and fix an appoinment.
I need to show the booked slots in the RadTimePicker as selected(with color or cross mark) and also if the time slot for the whole day is booked,I need to mark the calendar date as selected(with color or cross mark) .
Could you please help me on this.This is very urgent.

[Soumya]

Anyone knows the answer,please help.

[Princy]

Hi Soumya,

Try the following code to achieve your scenario.

ASPX:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" onselecteddatechanged="RadDatePicker1_SelectedDateChanged" >
</telerik:RadDatePicker>
<telerik:RadTimePicker ID="RadTimePicker1" runat="server" AutoPostBack="true" onselecteddatechanged="RadTimePicker1_SelectedDateChanged" onitemdatabound="RadTimePicker1_ItemDataBound" >
</telerik:RadTimePicker>
<telerik:RadTimePicker ID="RadTimePicker2" runat="server" AutoPostBack="true" onselecteddatechanged="RadTimePicker2_SelectedDateChanged" onitemdatabound="RadTimePicker2_ItemDataBound" >
</telerik:RadTimePicker>

C#:

public static int flag1;
public static int flag2;
public static int flag3;
protected void Page_Load(object sender, EventArgs e)
{
 if (!IsPostBack)
 {
  flag1 = 0;
  flag2 = 0;
  flag3 = 0;
 }
}
protected void RadTimePicker1_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
{
 flag1 = 1;
 RadTimePicker1.DataBind();
 RadTimePicker2.DataBind();
}
protected void RadTimePicker1_ItemDataBound(object sender, Telerik.Web.UI.Calendar.TimePickerEventArgs e)
{
 if ((flag1 == 1) && (flag2==1) )
 {
  if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
  {
   DateTime Start = (DateTime)(RadTimePicker1.SelectedDate);
   DateTime End = (DateTime)(RadTimePicker2.SelectedDate);
   DataRowView dataItem = (DataRowView)e.Item.DataItem;
   DateTime boundTime = (DateTime)dataItem.Row["Time"];
   if (boundTime.Hour >= Start.Hour && boundTime.Hour <= End.Hour)
   {
    e.Item.CssClass = "strike";
   }
   if (Start.Hour == 0 && End.Hour == 23)
   {
    RadDatePicker1.Calendar.SelectedDayStyle.BackColor = Color.Red;
   }
  }
 }
}
protected void RadTimePicker2_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
{
 flag2 = 1;
 RadTimePicker2.DataBind();
 RadTimePicker1.DataBind();
}
protected void RadTimePicker2_ItemDataBound(object sender, Telerik.Web.UI.Calendar.TimePickerEventArgs e)
{
 if ((flag1 == 1) && (flag2 == 1) && (flag3 == 1))
 {
   if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
   {
    DateTime Start = (DateTime)(RadTimePicker1.SelectedDate);
    DateTime End = (DateTime)(RadTimePicker2.SelectedDate);
    DataRowView dataItem = (DataRowView)e.Item.DataItem;
    DateTime boundTime = (DateTime)dataItem.Row["Time"];
    if (boundTime.Hour >= Start.Hour && boundTime.Hour <= End.Hour)
    {
     e.Item.CssClass = "strike";
    }
   }
  }
 }
protected void RadDatePicker1_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
{
 flag3 = 1;
}

Thanks,
Princy.

[Eyup]

Hello Soumya,

I have attached a sample RadGrid web site demonstrating how to highlight time values in the RadDateTimePicker and more specifically- how to highlight the current time both on client and on server side ( as for the server side approach two hours were added to be for its distinguishing ). Please check out the provided application and try make best avail out of it according to your specific scenario.

Greetings,
Eyup
the Telerik team

[Soumya]

Thanks Princy and Eyup .
I will try the code and let you know

Thanks,
Soumya

[Soumya]

Hi Princy I have tried your code.I couldn't make it work.
Let me explain my scenario in detail.

I have a Department,Doctor and the time interval for the Doctor.
For a particular Doctor,the time interval is fetched and From time and To-time interval also changes accordingly. Also if the user selects a particular time interval,then also the Time picker's time interval changes.Hence the user can select a particular time interval and fix an appointment for a particular doctor.
In the above scenario,I need to mark the calendar and time pickers for  a particular Doctor's appointment.Will your code work in my case as I am changing the time interval of the time pickers.

Appreciate the help from anyone.

aspx:

<tr>
   <td >
       Department
       <telerik:RadComboBox ID="RCDept" runat="server" Width="150px" DropDownWidth="500px" Height="200px" EmptyMessage="Select Clinic" EnableLoadOnDemand="true"
                Filter="StartsWith" OnItemsRequested="RCDept_ItemsRequested" HighlightTemplatedItems="true" OnSelectedIndexChanged="RCDept_SelectedIndexChanged" AutoPostBack="true">

                <HeaderTemplate>
                 <table style="width: 500px" cellspacing="0" cellpadding="0">
                       <tr>
                       <td style="text-align:left;width:250px">Department
                       </td>
                       <td style="text-align:left;width:250px">Doctor
                       </td>
                       </tr>
               </table>
               </HeaderTemplate>
               <ItemTemplate>
               <table  style="width: 500px" cellspacing="0" cellpadding="0">
                   <tr>
                   <td style="text-align:left;width:250px">
                       <%# DataBinder.Eval(Container, "Text")%>
                   </td>
                   <td style="text-align:left;width:250px">
                       <%# DataBinder.Eval(Container, "Attributes['doc_name']")%>
                   </td>
                   </tr>
               </table>
               </ItemTemplate>
                </telerik:RadComboBox>
   </td>
    <td>
       Doctor
      <telerik:RadTextBox ID="RCDoctor" runat="server" Width="150px"></telerik:RadTextBox>
   </td>

    <td  >
       Time Interval
                   <asp:DropDownList ID="RCTimeInt" runat="server" Width="75px" AutoPostBack="true" OnSelectedIndexChanged="RCTimeInt_SelectedIndexChanged">
                       <asp:ListItem Text="Select" Value="0" />
                       <asp:ListItem runat="server" Text="5 Min" Value="5" />
                       <asp:ListItem runat="server" Text="10 Min" Value="10" />
                       <asp:ListItem runat="server" Text="15 Min" Value="15" />
                       <asp:ListItem runat="server" Text="20 Min" Value="20" />
                       <asp:ListItem runat="server" Text="25 Min" Value="25" />
                       <asp:ListItem runat="server" Text="30 Min" Value="30" />
                       <asp:ListItem runat="server" Text="35 Min" Value="35" />
                       <asp:ListItem runat="server" Text="40 Min" Value="40" />
                       <asp:ListItem runat="server" Text="45 Min" Value="45" />
                       <asp:ListItem runat="server" Text="50 Min" Value="50" />
                       <asp:ListItem runat="server" Text="55 Min" Value="55" />
                       <asp:ListItem runat="server" Text="60 Min" Value="60" />
                   </asp:DropDownList>
   </td>
   </tr>
   <tr>

   <td >
       Appmnt Date

        <telerik:RadDatePicker ID="RDAppmntDate" runat="server" MinDate="01/01/1900" Height="23px"       >
                   <Calendar ID="Calendar1" runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False"            ViewSelectorText="x"></Calendar>
                   <DateInput ID="DateInput1" runat="server" >
                  <%-- <ClientEvents OnValueChanging="checkError" />--%>
                   </DateInput>
                   <DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
                   </telerik:RadDatePicker>

   </td>
   <td >
       From Time
        <telerik:RadTimePicker ID="RCFromTime" runat="server" Width="110px" Culture="en-US" TimeView-TimeFormat="t" DateInput-DateFormat="h:mm tt" DateInput-DisplayDateFormat="h:mm tt" AutoPostBack="true"
             >

        <TimeView StartTime="08:00:00" EndTime="20:00:00" Height="100px" Width="250px" ShowHeader="False" runat="server">  </TimeView>
                               </telerik:RadTimePicker>

   </td>
   <td>
       To Time
       <telerik:RadTimePicker ID="RCToTime" runat="server" Culture="en-US" TimeView-TimeFormat="t" DateInput-DateFormat="h:mm tt" DateInput-DisplayDateFormat="h:mm tt" Width="110px"
            >
                <TimeView ID="TimeView1" StartTime="08:00:00" EndTime="20:00:00" Height="100px" Width="250px" ShowHeader="False" runat="server"></TimeView>
                               </telerik:RadTimePicker>

   </td>
   </tr>

[Princy]

Hi Soumya,

I have made some modifications in the code for adding any time interval. Here is the sample code.

ASPX:

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" onselecteddatechanged="RadDatePicker1_SelectedDateChanged" >
</telerik:RadDatePicker>
<telerik:RadTimePicker ID="RadTimePicker1" runat="server" AutoPostBack="true" onselecteddatechanged="RadTimePicker1_SelectedDateChanged" onitemdatabound="RadTimePicker1_ItemDataBound" >
<TimeView Interval="0:05" runat="server" ID="TimeView1">
</TimeView>
</telerik:RadTimePicker>
<telerik:RadTimePicker ID="RadTimePicker2" runat="server" AutoPostBack="true" onselecteddatechanged="RadTimePicker2_SelectedDateChanged" onitemdatabound="RadTimePicker2_ItemDataBound" >
<TimeView Interval="0:05" runat="server" ID="TimeView2">
</TimeView>
</telerik:RadTimePicker>

C#:

public static int flag1;
public static int flag2;
....................................
....................................
protected void RadTimePicker1_ItemDataBound(object sender, Telerik.Web.UI.Calendar.TimePickerEventArgs e)
{
 if ((flag1 == 1) && (flag2 == 1) && (flag3 == 1))
 {
  if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
  {
   DateTime Start = (DateTime)(RadTimePicker1.SelectedDate);
   DateTime End = (DateTime)(RadTimePicker2.SelectedDate);
   DataRowView dataItem = (DataRowView)e.Item.DataItem;
   DateTime boundTime = (DateTime)dataItem.Row["Time"];
   if (boundTime.Hour >= Start.Hour && boundTime.Hour <= End.Hour)
   {
    if (Start.Hour == 0 && End.Hour == 23)
    {
     RadDatePicker1.Calendar.SelectedDayStyle.BackColor = Color.Red;
    }
    if ( !( ((boundTime.Hour == Start.Hour) && (boundTime.Minute < Start.Minute)) || ((boundTime.Hour == End.Hour) && (boundTime.Minute > End.Minute)) ) )  //Condition for applying css
    {
     e.Item.CssClass = "strike";
    }
   }
  }
 }
}
protected void RadTimePicker2_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
{
 flag2 = 1;
 RadTimePicker2.DataBind();
 RadTimePicker1.DataBind();
}
protected void RadTimePicker2_ItemDataBound(object sender, Telerik.Web.UI.Calendar.TimePickerEventArgs e)
{
 if ((flag1 == 1) && (flag2 == 1) && (flag3 == 1))
 {
  if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
  {
   DateTime Start = (DateTime)(RadTimePicker1.SelectedDate);
   DateTime End = (DateTime)(RadTimePicker2.SelectedDate);
   DataRowView dataItem = (DataRowView)e.Item.DataItem;
   DateTime boundTime = (DateTime)dataItem.Row["Time"];
   if (boundTime.Hour >= Start.Hour && boundTime.Hour <= End.Hour)
   {
    if (Start.Hour == 0 && End.Hour == 23)
    {
     RadDatePicker1.Calendar.SelectedDayStyle.BackColor = Color.Red;
    }
    if ( !( ((boundTime.Hour == Start.Hour) && (boundTime.Minute < Start.Minute)) || ((boundTime.Hour == End.Hour) && (boundTime.Minute > End.Minute)) ) )  //Condition for applying css
    {
     e.Item.CssClass = "strike";
    }
   }
  }
 }
}
protected void RadDatePicker1_SelectedDateChanged(object sender, Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
{
 flag3 = 1;
}

Hope this helps.

Thanks,
Princy.