locked
how to set focus on telerik radcalendar date RRS feed

  • Question

  • User-944424728 posted

    Hello, using keyboard, tabbing thru each date but I could not see the focus, how can I set the focus on each date I tab thru? I used this " RadCalendar1.SelectedDate = DateTime.Now" but it only give me the focus of the current today date.  Thanks.

      Protected Sub PopulateCalendar(ByVal UserID As Integer)

            Dim AppointmentList As New List(Of AppointmentDTO)

            AppointmentList = AppointmentManager.GetList_ByUserIDs(UserID)      

          
            Me.AppointmentCount = AppointmentList.Count

            For Each appt As AppointmentDTO In AppointmentList
                Dim NewDay As New RadCalendarDay(RadCalendar1)
                'NewDay.Date = New DateTime(2010, 11, 12)
                NewDay.Date = New DateTime(appt.StartTime.Year, appt.StartTime.Month, appt.StartTime.Day)
                NewDay.IsSelected = False
                NewDay.ItemStyle.CssClass = "rcSelected"
                NewDay.ToolTip = "Appointment scheduled today"
                RadCalendar1.SpecialDays.Add(NewDay)

            Next
           
           RadCalendar1.SelectedDate = DateTime.Now
           
        End Sub


    --

           <telerik:RadCalendar ID="RadCalendar1" runat="server" TitleFormat="MMMM yyyy"  Width="100%"
                         ShowRowHeaders="false"    UseRowHeadersAsSelectors="false" UseColumnHeadersAsSelectors="false" EnableViewSelector="false">
            <ClientEvents OnDateClick="Calendar_OnDateClick"></ClientEvents>
                         <WeekendDayStyle CssClass="rcWeekend"></WeekendDayStyle>
                         <CalendarTableStyle CssClass="rcMainTable"></CalendarTableStyle>
                         <OtherMonthDayStyle CssClass="rcOtherMonth"></OtherMonthDayStyle>
                         <OutOfRangeDayStyle CssClass="rcOutOfRange"></OutOfRangeDayStyle>
                         <DisabledDayStyle CssClass="rcDisabled"></DisabledDayStyle>
                         <SelectedDayStyle CssClass="rcSelected"></SelectedDayStyle>
                         <DayOverStyle CssClass="rcHover"></DayOverStyle>
                         <FastNavigationStyle CssClass="RadCalendarMonthView RadCalendarMonthView_Office2007"></FastNavigationStyle>
                         <ViewSelectorStyle CssClass="rcViewSel"></ViewSelectorStyle>
        </telerik:RadCalendar>






    Thursday, May 16, 2019 12:42 AM

All replies

  • User839733648 posted

    Hi aspvbnet,

    According to your description, I suggest that you could add the attribute SelectionMode as Multiple since the default attribute is single.

    Then you could select the date you want to choose.

    • In Single Selection mode only one date can be selected. Note that the SelectedDate can be null as well, which means that no date is selected. Keyboard movement selects an item.
    • Multiple Selection mode allows unlimited number of dates to be selected. Dragging with the mouse will toggle the selection of the dates. Keyboard movement will move the focus of the item. Selection can be toggled with the space bar key.
    • Extended Selection mode is best suited for selection date ranges. It supports Ctrl and Shift selection.

    Here is my testing demo.

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TeleriRadcalendar.aspx.vb" Inherits="WebApplicationVB.TeleriRadcalendar" %>
    
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script>
            function Calendar_OnDateClick(sender, eventArgs) {
    //function to confirm the selected date. var day = eventArgs.get_renderDay(); if (day.get_isSelectable()) { var date = day.get_date(); var dfi = sender.DateTimeFormatInfo; var formattedDate = dfi.FormatDate(day.get_date(), dfi.ShortDatePattern); var confirmClick = confirm("Are you sure you want to " + (day.get_isSelected() ? "unselect " : "select ") + formattedDate + "?"); eventArgs.set_cancel(!confirmClick); } } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <telerik:RadCalendar ID="RadCalendar1" runat="server" TitleFormat="MMMM yyyy" Width="100%" ShowRowHeaders="false" UseRowHeadersAsSelectors="false" UseColumnHeadersAsSelectors="false" EnableViewSelector="false"
    EnableKeyboardNavigation="true" SelectionMode="Multiple" > <ClientEvents OnDateClick="Calendar_OnDateClick"></ClientEvents> <WeekendDayStyle CssClass="rcWeekend"></WeekendDayStyle> <CalendarTableStyle CssClass="rcMainTable"></CalendarTableStyle> <OtherMonthDayStyle CssClass="rcOtherMonth"></OtherMonthDayStyle> <OutOfRangeDayStyle CssClass="rcOutOfRange"></OutOfRangeDayStyle> <DisabledDayStyle CssClass="rcDisabled"></DisabledDayStyle> <SelectedDayStyle CssClass="rcSelected"></SelectedDayStyle> <DayOverStyle CssClass="rcHover"></DayOverStyle> <FastNavigationStyle CssClass="RadCalendarMonthView RadCalendarMonthView_Office2007"></FastNavigationStyle> <ViewSelectorStyle CssClass="rcViewSel"></ViewSelectorStyle> </telerik:RadCalendar> </form> </body> </html>

    result:

    Reference: https://docs.telerik.com/devtools/wpf/controls/radcalendar/features/selection-modes

    Best Regards,

    Jenifer

    Thursday, May 16, 2019 2:42 AM
  • User-944424728 posted

    Hello, I use multiple selection mode but my focus is not there. I had a Javascript message. It tab to each date but no focus on each date I tab thru. Please advise. Thanks.
    Thursday, May 16, 2019 5:02 PM
  • User839733648 posted

    Hi aspvbnet,

    I had a Javascript message. It tab to each date but no focus on each date I tab thru.

    What is the Javascript message? What code is related to your requirement?

    Besides, I'd like to ask that is the code-behind function PopulateCalendar designed to achieve your requirment?

    But I could not see where you have used that.

    If possible, please provide more details about your need like related code and more clear description so that it will be easier to help with you.

    Best Regards,

    Jenifer

    Friday, May 17, 2019 1:38 AM
  • User-944424728 posted
    The JavaScript message is are you sure you want to select this date.... the populate calendar function is to display a selected date calendar screen by itself. I can tab to each date but there is no focus each on each date I tab thru. Thanks.
    Friday, May 17, 2019 2:42 AM
  • User839733648 posted

    Hi aspvbnet,

    You could see from my sample above that when tabbing the date, there will be a blue border around that date.

    Do you mean that the blue border is not the focus style you want?

    Best Regards,

    Jenifer

    Friday, May 17, 2019 9:01 AM
  • User-944424728 posted

    There is no blue border on my calendar. How can I make it to be blue or different border? Thanks.
    Friday, May 17, 2019 10:53 AM
  • User839733648 posted

    Hi aspvbnet,

    I‘m sorry that I could not reproduce your issue.

    As you can see, my sample works well on my side.

    My guess is that maybe you have add some styles that have cover the default setting or maybe it is the control's self reason.

    About the telerik controls, I suggest that you could go to there official community to ask for help: https://www.telerik.com/forums/community 

    Best Regards,

    Jenifer

    Monday, May 20, 2019 3:20 AM