Kendo UI R3'17 Release Webinar is near! Sign up to watch technical demos of the freshly released bits, including support for React and Vue.
All Components
Change Theme

SASS Themes (beta)

    LESS Themes

      SASS Theme Builder

      Create new or customize SASS themes
      Launch Theme Builder

      Scheduler / Templates


      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.

      HTML5/JavaScript source

      Also available for:

      API Reference
      • templates.html
      • Sample service
      • Widget configuration

      Support & learning resources

      Scheduler for other technologies