Test Environment:
OS: Windows_11Repro Steps:
6. Observe an issue that 'Month' control on 'Calendar' popup is not accessible using keyboard.
'Click to book' and header controls are not accessible using keyboard.
1. Open URL: SMB Scheduler (agentcalendardevone.azurewebsites.net) page in Edge Browser.
2. Provide valid 'Email address' in text field and activate 'Book New Appointment'.
3. Select any 'Time Zone' in dropdown and click 'View Available appointments' button.
4. Navigate to the table content.
5. Observe the issue that the controls in the table such as ("<", ">", "Today", calendar widget, "Week", "Click to the book") does not receive keyboard focus.
Actual Behavior:
'Month' Control on 'Calendar' popup is not accessible using keyboard.
Expected Behavior:
Control(s) must be accessible to Bluetooth keyboards and other assistive technology. Common causes of this problem include a) the element does not have a proper role assigned, b) the element needs tab-index="0" attribute to be focusable, or c) the component is not registering key presses.
There is no property indicating the next DateTime that user is going to,
for example, we are in November/2022 and the end user click on "<" back button,
the event return the current date.
RadCalendar1_OnHeaderCellRender
the var nMes = cal.FocusedDate.Month; to return the current month.
RadCalendar and RadDatePicker cannot pass the following check by https://achecker.ca/checker/index.php WCAG 2.0 guideline Section 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure. Success Criteria 1.3.1 Info and Relationships (A) Check 245: Data table with more than one row/column of headers does not use id and headers attributes to identify cells. Repair: Add id and headers attributes to table cells so they identify the cells that relate to the headers. Error Line 597, Column 8: <table id="ctl00_ContentPlaceholder1_RadDatePicker1_calendar_Top" class="rcMainTable" summary="Table … Steps to reproduce Go to https://achecker.ca/checker/index.php Paste https://demos.telerik.com/aspnet-ajax/datepicker/accessibilityandinternationalization/wcag2.0andsection508accessibility/defaultcs.aspx or https://demos.telerik.com/aspnet-ajax/calendar/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility/defaultcs.aspx See the results -> Check 245: Data table with more than one row/column of headers does not use id and headers attributes to identify cells. Repair: Add id and headers attributes to table cells so they identify the cells that relate to the headers. Error Line 568, Column 8: <table id="ctl00_ContentPlaceholder1_RadDatePicker1_calendar_Top" class="rcMainTable" summary="Table ... ======================================= WORKAROUND: $telerik.$("table.rcMainTable tbody th").each(function (idx, el) { var thId = $telerik.$(el).attr("id"); $telerik.$(el).siblings("td").attr("header", thId); })
Error message:
Possible workarounds from Admin:
1) Use Lightweight render mode instead of Classic: https://docs.telerik.com/devtools/aspnet-ajax/controls/render-modes#setting-render-mode
2) Disable temporarily the keyboard navigation of the control
3) Use the attached script and load it on the page:
3.1) Using a RadScriptManager (adjust the file name and path to fit your application)
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<telerik:RadScriptReference Path="fix.js" OutputPosition="End" />
</Scripts>
</telerik:RadScriptManager>
3.2) In an inline script tag somewhere AFTER the ScriptManager(e.g. at the end of the <form> or <body> tag)
3.3) As a script reference - place it AFTER the script manager as 3.2) or use the defer="defer" attribute
<script defer="defer" src="fix.js"></script>
4) Submit a support ticket if you would prefer a custom Telerik.Web.UI.dll assembly with the issue resolved.
When MultiViewColumns > 2 the the month views of the Calendar are not aligned properly. The problem occurs if the week count in the months is different and the ShowOtherMonthsDays property is set to false.
Temporary workaround: Set the ShowOtherMonthsDays="True" property of RadCalendar.
Code to reproduce:
The RadCalendar AccessKey property does not move focus to the RadCalendar control. For example, set the AccessKey="K" for the RadCalendar. <telerik:RadCalendar ID="RadCalendar1" RenderMode="Lightweight" AutoPostBack="true" AccessKey="K" EnableKeyboardNavigation="true" EnableAriaSupport="true" EnableMultiSelect="true" runat="server"></telerik:RadCalendar> However, focused is not moved to the Calendar with the AccessKey using ALT + Shift + key or ALT + key depending on the web browser. Please implement AccessKey for RadCalendar. Thank You, Carla
RadMonthYearPicker is missing form the SkinManager's ControlTypeToApplyskin collection
The Time Picker can be changed to present a more granular selection by changing the Interval setting; doing so however uses consumes considerable screen real-estate. To allow for a compact selection area with a higher range of selections I suggest adding adjustment buttons to the Time Picker title bar that adjust the displayed time up or down by 15 and 5 minute intervals. See attached PDF for example.
As I'm using RadDatePicker in my Grid, In RadGrid for the first time, the image beside the calendar control renders as expected. As soon as I enter into "InLine" edit mode there would be 2 images rendered beside the control. And after clicking on cancel there is no change in the image beside the control. Also attached the screenshot for the same.
When handling the SelectionChanged event on a Calendar with EnableMultiSelect="true", there is no way to determine the new selected date(s). The SelectedDatesEventArgs exposes the entire range of selected dates, but it does not tell which of those dates were previously selected. Add a property to the event args that would expose this. OR Add an attribute to the RadCalendar when EnableMultiSelect="true" to "DeselectWhenSelectingNewDates." If this is set to true, any date selection on the calendar would deselect any previously selected dates.
When we create special days for radCalendar in code behind, we are notre able to set the ItemStyle property because it is readonly. This property should be opened for assignment like we are able to do so when we create SpecialDays in the html script. Thank you, Alain
Put more than two RadDatePicker with single SharedCalendar on page. some RadDatePicker are in side of UpdatePanel with a button in it. when I press that button RadDatePicker behaviour is strange. RadDatePicker inside UpdatePanel not opening Calendar popup while RadDatePicker outside UpdatePanel opens calendar popup but gives javascript error on any date selection. the javascript error is "Unable to get property '_selectedDates' of undefined or null reference". It looks like it is destroying shared calendar object on partial postback. Please find below sample code to replicate the issue. after clicking "Submit" button, it doesn't open calendar popup for "Date 2" and for "Date 1" it opens but doesn't allow to select date and gives JavaScript error. ---------------------- <asp:ScriptManager ID="sc1" runat="server" /> <telerik:RadCalendar ID="dtCal" runat="server" EnableMultiSelect="false" /> Date 1: <telerik:RadDatePicker ID="dt1" Width="103px" runat="server" SharedCalendarID="dtCal" /> <hr /> <asp:UpdatePanel runat="server" ID="up"> <ContentTemplate> Date 2: <telerik:RadDatePicker ID="dt2" Width="103px" runat="server" SharedCalendarID="dtCal" /> <br /> <asp:Button runat="server" ID="btnDT" Text="Submit" /> </ContentTemplate> </asp:UpdatePanel> ---------------------- When i add all controls in UpdatePanel it works properly. but Actual code is much more complex than above sample with too many lines of javascript code and many date pickers on single page and simply all Calendar and DatePicker controls can not be moved in UpdatePanel.
When using min/max date the invalid dates have almost identical styling as the valid ones, this makes it hard for the user to see what dates are valid. It would be nice of there was some way of telling them apart except by hovering over them. Also when using "metro theme" the invalid date overrides the styling for dates belonging to "other month".