How to mark all selected dates in RadDatepicker.

9 posts, 0 answers
  1. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 13 Jul 2012 Link to this post


    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.

  2.
  3. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Jul 2012 Link to this post

    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.
  5. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 16 Jul 2012 Link to this post

    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.
  7. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 17 Jul 2012 Link to this post

    Anyone knows the answer,please help.
  8.
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Jul 2012 Link to this post

    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.
  11. Eyup
    Admin
    Eyup avatar
    3892 posts

    Posted 17 Jul 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  13. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 18 Jul 2012 Link to this post

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

    Thanks,
    Soumya

  14.
  15. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 18 Jul 2012 Link to this post

    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>
  17. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Jul 2012 Link to this post

    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.
Back to Top