Telerik Forums
Kendo UI for jQuery Forum
4 answers
653 views

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. 

 

 

 

 

Sayali
Top achievements
Rank 1
Iron
 answered on 06 Mar 2025
1 answer
42 views

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

Martin
Telerik team
 answered on 10 Feb 2025
1 answer
42 views

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

Neli
Telerik team
 answered on 13 Jan 2025
0 answers
102 views

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?

Icon
Top achievements
Rank 1
 asked on 23 Dec 2024
1 answer
63 views

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

 

Martin
Telerik team
 answered on 24 Jul 2024
2 answers
334 views

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.

Martin
Telerik team
 answered on 22 Jun 2023
1 answer
91 views

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

Martin
Telerik team
 answered on 05 Jun 2023
0 answers
208 views

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>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/6.2.0/default/default-ocean-blue.css"/>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.1.314/js/kendo.all.min.js"></script>
</head>
<body>
  
    <input id="datePicker" />

    <script>    
        $("#datePicker").kendoDatePicker({        
            value: new Date(2022, 0, 3),
            min: new Date(2022, 0, 1),
            max: new Date(2022, 5, 30),
            weekNumber: true,
            format: "yyyy-MM-dd"
        });
    </script>
</body>
</html>
Pratik
Top achievements
Rank 1
 updated question on 22 Mar 2023
0 answers
118 views
I want to use the Calendar component in MVC but I want to set the events and show the calendars based on the week number not on the day of the week or weekly view 
so as example September would be 4 weeks and you can select a week for this event not a day 
ahid
Top achievements
Rank 1
 asked on 30 Nov 2022
1 answer
106 views
How to change color of selected date on kendo calendar
Nikolay
Telerik team
 updated answer on 20 Oct 2022
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
SPA
Filter
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
OrgChart
TextBox
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
Popover
DockManager
FloatingActionButton
TaskBoard
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
TimePicker
DateTimePicker
RadialGauge
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?