# Event Templates

With the Kendo UI for Vue Scheduler, you can customize the event templates in a way that best fits your requirements.

Below you will find examples how you can:

* [Define custom colors for the 'All-day' and regular event](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/customization/event-template#event-templates)
* [Display image in the event template](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/customization/event-template#display-image-in-the-event-template)
* [Display resources in the event template](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/customization/event-template#display-resources-in-the-event-template)

## Custom colors

The below example demonstrates how the `colors` of the **regular** and **all-day** events can be defined using the **item property** of the Scheduler.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/scheduler/custom-templates/events/color/source.txt)

The way we control the look of the different events in the above example is through the slot template passed to the item property. Here is the definition of the used template:

```jsx
<template #itemRender="{ props }">
  <SchedulerItem
    v-bind="props"
    :itemStyle="{
      backgroundColor: props.isAllDay ? 'green' : 'blue',
    }"
  >
    <div class="k-event-template">
      {{ props.title }}
    </div>
  </SchedulerItem>
</template>
```

## Display image in the event template

The below example demonstrates how we can display an `image` in the events of the Scheduler.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/scheduler/custom-templates/events/image/source.txt)

The slot template passed to the item property in the above example is defined as follows:

```jsx
<template #itemRender="{ props }">
  <SchedulerItem v-bind="props">
    <div class="k-event-template" v-if="!props.isAllDay">
      {{ props.title }}
      <div :style="{ 'padding-top': '5px', display: 'flex' }">
        <img :src="props.dataItem.image" :style="{ width: '120px' }" :alt="'Event Image'" />
        <span :style="{ 'padding-left': '5px' }">{{
          props.description
        }}</span>
      </div>
    </div>
    <div class="k-event-template" v-else>
      <img
        :src="'https://static4.depositphotos.com/1004274/315/v/450/depositphotos_3152530-stock-illustration-eco-icon.jpg'"
        :style="{ width: '18px', 'padding-bottom': '5px' }"
        :alt="'Eco Icon'"
      />
      {{ props.title }}
    </div>
  </SchedulerItem>
</template>
```

## Display resources in the event template

The below example demonstrates how we can display `resources` information in the events of the Scheduler.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/scheduler/custom-templates/events/resources/source.txt)

## Suggested Links

* [API Reference of the Scheduler](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/schedulerprops)
* [API Reference of the SchedulerItem](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/api/scheduleritemprops)