Telerik Forums
Kendo UI for jQuery Forum
4 answers
625 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
38 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
34 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
82 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
60 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
319 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
88 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
205 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
115 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
101 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
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?