New to Kendo UI for jQuery? Download free 30-day trial

Templates

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • EDIT
  • Change Theme
    default

    Themes & Swatches

    SASS
    LESS
    Launch Theme Builder
    Default Theme
    • Main
    • Main Dark
    • Nordic
    • Ocean Blue
    • Purple
    • Turquoise
    Bootstrap Theme
    • Main
    • Main Dark
    • Nordic
    • Urban
    • Vintage
    Material Theme
    • Main
    • Arctic
    • Lime Dark
    • Main Dark
    • Nova
    Classic Theme
    • Main
    • Main Dark
    • Opal
    • Silver
templates.html
Sample service

Also available for:

API REFERENCE

Description

This example illustrates how to use templates to customize the appearance of the scheduler events. You can use the eventTemplate setting to create a template for the scheduler’s events. Other template settings provided by the widget are allDayEventTemplate, dateHeaderTemplate, groupHeaderTemplate, majorTimeHeaderTemplate and minorTimeHeaderTemplate.

Templates use a simple templating syntax where the hash # symbol is used to mark areas in a template that should be replaced with data when the template is executed. The # character is also used to signify the beginning and end of custom JavaScript code inside the template.

There are three ways to use the hash syntax:

  1. Render values as HTML: #= #
  2. Uses HTML encoding to display values: #: #
  3. Execute arbitrary JavaScript code: # if (true) { # ... non-script content here ... # } #

You can find more information about the templates in this article: Kendo UI Templates Overview.

Support & Learning Resources