CODEWITHSUNDEEP
kendo-uischedulerdate-formatting
Philip
Philip

Reputation: 159

Change date format in scheduler navigation for kendo ui

I'm searching for the possibility to change date format of kendo ui scheduler components' navigation bar. In the basic exmaple (click here) you can see the selected time range right next to "Today" button. I don't have so much space left in my website and therefore want to change date format to eg. "18.08.2014 - 24.08.2014". Unfortunately I don't see any option to configure this in the official api reference...

Did I just overlook something or is it not possible to change settings for that?

Thanks for your help.

Philip

Upvotes: 1

Views: 2428

Answers (2)

Kevin Pluck
Kevin Pluck

Reputation: 41

It's configurable:

views: [
            {
                type: CustomAgenda,
                title: "List",
                selected: true,
                selectedDateFormat: "{0:dddd dd MMMM yyyy} - {1:dddd dd MMMM yyyy}",
                selectedShortDateFormat: "{0:dd/MM/yyyy} - {1:dd/MM/yyyy}"
            }, {
                type: "day",
                selectedDateFormat: "{0:dddd dd MMMM yyyy}",
                selectedShortDateFormat: "{0:dd/MM/yyyy}"
            }, {
                type: "month",
                selectedDateFormat: "{0:MMMM yyyy}",
                selectedShortDateFormat: "{0:MMMM yyyy}"
            }
        ]

The short format is for crossing the low width responsive break point.

https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/views.selecteddateformat

Upvotes: 3

Fabio Lolli
Fabio Lolli

Reputation: 889

I ran into the same problem, I noticed with Chrome dev tools there is a span with class="k-lg-date-format" wich displays the date as you see it now, and a span with class="k-sm-date-format" that could display the date with the shorter MM/dd/yyyy format, but his display property is set to none. I created another stylesheet to change the display property of the first to none and the second to inline. Had to use !importan because it was overloaded by kendo stylesheet.

.k-sm-date-format {
    display: inline !important;
}

.k-lg-date-format {
    display: none !important;
}

Upvotes: 3

Related Questions