Hi, i am currently using kendo calendar control in my application i wanted to use multi-language for numbers and date formats and all other options in en-GB. I am currently using the code below to override the culture it works fine.
var
customCulture = $.extend({}, kendo.culture(), {
name:
"custom-culture"
,
calendars: {
standard: {
days: {
names: [
"Sonntag"
,
"Montag"
,
"Dienstag"
,
"Mittwoch"
,
"Donnerstag"
,
"Freitag"
,
"Samstag"
],
namesAbbr: [
"So"
,
"Mo"
,
"Di"
,
"Mi"
,
"Do"
,
"Fr"
,
"Sa"
],
namesShort: [
"So"
,
"Mo"
,
"Di"
,
"Mi"
,
"Do"
,
"Fr"
,
"Sa"
]
},
months: {
names: [
"January"
,
"February"
,
"March"
,
"April"
,
"May"
,
"June"
,
"July"
,
"August"
,
"September"
,
"October"
,
"November"
,
"December"
],
namesAbbr: [
"Jan"
,
"Feb"
,
"Mrz"
,
"Apr"
,
"Mai"
,
"Jun"
,
"Jul"
,
"Aug"
,
"Sep"
,
"Okt"
,
"Nov"
,
"Dez"
]
},
patterns: {
d:
"dd/MM/yyyy"
,
D:
"dd MMMM yyyy"
,
F:
"dd MMMM yyyy HH:mm:ss"
,
g:
"dd/MM/yyyy HH:mm"
,
G:
"dd/MM/yyyy HH:mm:ss"
,
m:
"d MMMM"
,
M:
"d MMMM"
,
s:
"yyyy'-'MM'-'dd'T'HH':'mm':'ss"
,
t:
"HH:mm"
,
T:
"HH:mm:ss"
,
u:
"yyyy'-'MM'-'dd HH':'mm':'ss'Z'"
,
y:
"MMMM yyyy"
,
Y:
"MMMM yyyy"
},
firstDay: 1
}
}
});
But the problem is i don't want to change the patterns setting from the clients culture i need to remove this from being over ridden. If i remove this patterns code piece it all stop working. Is there any way to do this ??
Thanks a lot in advise.
Hi,
I use the MultiViewCalendar, and have a style for selected days. I let the user save those days, and apply them when he opens the calendar, with:
kendoCalendar.selectDates(dateArray);
The days get colorized as I styled them like:
#IdentificationName > .k-calendar-view > table > tbody > tr > td.k-state-selected .k-link {
background-color: lightgreen !important;
background-clip: padding-box !important;
box-shadow: inset 0 0 10px mediumseagreen;
color: black;
}
it works, except for the "today" day.
When I inspect, it seems, the framework has overwritten the "k-state-selected"-class with "k-today".
What happens then is, my selected days are green, but the selected day which is also the "today" day, is white with red border.
From Browser Dev Tools:
(Any other "selected" day:)
<td role="gridcell" class="k-state-selected" aria-selected="true"><a tabindex="-1" class="k-link" href="#" data-value="2024/3/1" title="Montag, 1. April 2024"></a></td>
(Today selected day:)
<td class="k-today" role="gridcell" id="IdentificationName_cell_selected" aria-selected="false"><a tabindex="-1" class="k-link" href="#" data-value="2025/1/5" title="Mittwoch, 5. Februar 2025">5</a></td>
How can I keep the green filling color of my selected class which gets loaded initally?
(and only add the red border in css for the "today selected day")
Thank you,
Best regards
Hi,
I am trying to set up calendar in my app using range selection mode.
My question would be how can I select range when I open calendar on a button click. (I have field where data is read from db, and then i should preset that data on calendar).
Second, potential bug:
if Calendar is in range selection mode (selectable="range"), change event doesn't trigger correctly. When first time clicked - value in the widget change event (this.value) equals null, and then when second one is clicked (end of range), this.value equals start of the range.
https://dojo.telerik.com/TCxOCzUl
I used this dojo.
Thank you very much.
Regards,
Vedad
Hi,
I am attempting to update our current version of Kenduo UI for Jquery from 2023.1.117 to 2024.4.1112.
I have downloaded the commercial release zip and have updated the references to the js and css files (as I have done with previous upgrades), however I am experiencing lots of styling issues for font sizes and layout across inputs ans widgets.
Firstly, the text size is much smaller for inputs and widgets.
The display of widgets on different browsers is inconsistent (for example the calendar widget is being cut off on FireFox, but is spanning the whole screen on Chrome - screenshots attached).
Any ideas what could be causing this?
Hi,
Anyone know how to resize the whole calendar to fit on your declared container? im having difficulties to target specific classes using css for it.
Any tips or help would be appreciated.
Thank you
After upgrading our application from an older version of Kendo to v2022 R1 (301), we discovered a strange problem with the Kendo DatePicker popup calendar. Everything works fine on a desktop web browser but on a mobile phone the month calendar view renders as in the attached image:
Other calendar display modes work correctly. The problem seems to occur on all the phones we have tried (Android, iPhone).
The DatePicker control is instantiated on demand via Jquery function. No special DatePicker features used. Here is a snippet from the rendering function (ownerDiv is a parameter passed to the function):
var datepickerWrapper = ownerDiv.find('#end-date-wrapper');
datepickerWrapper.empty();
datepickerWrapper.append('<input id="chart-end-date" name="chart-end-date" style="width:8em" />');
datepickerDiv = historyDiv.find('#chart-end-date');
datepickerDiv.kendoDatePicker({
animation: false,
change: function (e) {
changeEnddate(e);
}
});
The only slightly unusual thing about this is the parent HTML is part of the detail pane for a Kendo grid. The popup calendar used to work just fine in the old version of Kendo we used to use (version circa 2018).
I'm at a loss. Android Chrome debugger running against a phone executing the DatePicker does not reveal any browser exceptions.
Any thoughts?
Jeff Benson
Senior Developer
New Boundary Technologies, Inc.
Hi,
I got specific request that I should highlight week number (and possibly that row) in calendar when user goes on week number with the mouse.
User wants to be able to select whole week in one click.
Can you please advise on approach how to achieve this, since I don't see any "hookable" event that I can use.
Thank you very much
Regards,
Vedad
I have just seen the demo about using kendo DatePicker. But when inspect the calendar icon under Accessibility menu I can see the Default name for the button is given as "select". I would like to change the name of button from "select" to "Pick a date". Please Guide through. I have attached image for your reference.
Following is the code snippet:
<!DOCTYPE html>