This is a migrated thread and some comments may be shown as answers.

telerik radcalendar date focus

5 Answers 30 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Thao
Top achievements
Rank 1
Thao asked on 16 May 2019, 12:35 AM

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>















5 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 20 May 2019, 03:16 PM
Hello,

Can you please check out this demo https://demos.telerik.com/aspnet-ajax/calendar/accessibility-and-internationalization/keyboardnavigation/defaultcs.aspx.

If it does not help, try setting the EnableMultiSelect property to true.

Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Thao
Top achievements
Rank 1
answered on 21 May 2019, 12:48 AM

Hello, I tried your code either true or false on EnableKeyboardNavigation="true" EnableMultiSelect="true" or SelectionMode="Multiple" there is still no blue border or gray border focus. I'm not sure if it's the css style border but I remove them but still no focus.  

<telerik:RadCalendar ID="RadCalendar1" runat="server" TitleFormat="MMMM yyyy"  Width="100%"
                     ShowRowHeaders="false"    UseRowHeadersAsSelectors="false" UseColumnHeadersAsSelectors="false" EnableViewSelector="false" EnableKeyboardNavigation="true" EnableMultiSelect="true"> 

0
Rumen
Telerik team
answered on 23 May 2019, 06:32 AM
Hi,

Can you set the RenderMode property to Classic and test again?

Best Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Thao
Top achievements
Rank 1
answered on 24 May 2019, 02:17 AM
Yes I have blue border focus now but the month, and year header are blue and the size of table are much smaller. I can change font size on the date to be bigger. Is there anyway I can keep the old header font and the size of the table the same? They also have extra empty line between header and the date and the date and the footer. Or how can I adjust the table size to be bigger and the blue header to be gray. Thank you.
0
Rumen
Telerik team
answered on 28 May 2019, 02:42 PM
Hi Thao,

You can tab on the header in Classic and Lightweight render mode, but the tabbing through the dates is available only in the Classic Render mode. 

The navigation through the dates is possible via the arrow keys in both modes too when setting EnableKeyboardNavigation="true" and EnableMultiSelect="true".

You can increase the size of the letters in Classic render mode with the following CSS classes:

<html>
<head runat="server">
    <title></title>
    <style>
        .RadCalendar .rcWeek th {
            font-size: 20px !important;
        }
 
        .RadCalendar_Default .rcMain .rcRow a, .RadCalendar_Default .rcMain .rcRow span {
            font-size: 20px !important;
        }
 
        .RadCalendar .rcTitlebar .rcTitle {
            font-size: 20px !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="false">
        </telerik:RadScriptManager>
 
        <telerik:RadCalendar ID="RadCalendar1" runat="server" TitleFormat="MMMM yyyy" Width="500px" RenderMode="Classic"
            ShowRowHeaders="false" UseRowHeadersAsSelectors="false" UseColumnHeadersAsSelectors="false" EnableViewSelector="false" EnableKeyboardNavigation="true" EnableMultiSelect="true">
        </telerik:RadCalendar>
    </form>
</body>
</html>




Regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Calendar
Asked by
Thao
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Thao
Top achievements
Rank 1
Share this question
or