New to Telerik UI for ASP.NET Core? Download free 30-day trial

Customizing templates

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Theme Builder
Change Theme
Default
SASS

LESS
- Default
- Bootstrap
- Material
- Launch Theme Builder
- Black
- Blue Opal
- Bootstrap v3
- Default
- Fiori
- Flat
- High Contrast
- Material
- Material Black
- Metro
- Metro Black
- Moonlight
- Nova
- Office 365
- Silver
- Uniform

            
                        template.cshtml
                    
                        TemplateController.cs

Also available for:

API REFERENCE

.demo-section { width: 270px; } .k-datetimepicker { width: 100%; } .k-calendar .k-content { table-layout: auto; } .k-calendar .k-month .k-link { width: auto; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; } .birthday { background: transparent url('/aspnet-core/shared/web/calendar/cake.png') no-repeat 0 50%; display: inline-block; flex-shrink: 0; width: 16px; height: 16px; vertical-align: middle; margin-right: 3px; }

Description

The Telerik UI for ASP.NET Core DateTimePicker provides several template options for customizing the look and feel of the component. In this demo example you can see:

A month view template that displays icons for specific dates
A footer template showing the current date
A week number column rendered with a week column template

Support & Learning Resources

Was this demo helpful?

YES NO

Tell us how we can improve this demo

Submit Skip