# Slot Templates

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

The `slots` are the cells inside the **Scheduler** above which the events are displayed. The `slots` can be separated into the following types:

* AllDay slots - the cells in the Scheduler inside which the "AllDay" events are rendered.
* WorkDay slots - the cells in the Scheduler that display the "Work Days" inside the component.
* Workhour slots - the Scheduler cells that display the "Work hours" inside the component.

Using the `slotRender` property of the **Scheduler** we can control the look and content of each `slot cell`. Below you will find examples about the following scenarios:

* [Define custom colors for all slot types](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/customization/slot-template#custom-slot-colors)
* [Customize the Month slots](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/customization/slot-template#custom-month-slots)
* [Customize the Time slots](https://www.telerik.com/kendo-vue-ui-develop/components/scheduler/customization/slot-template#custom-time-slots)

## Custom slot colors

The below example demonstrates how the `colors` of each slot type can be customized using the **slotRender property** of the Scheduler.

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

The way we control the colors of the different `slots` is by dynamically setting the `background-color` of each cell. Each color we set depends on the values of the **props.isAllDay**, **props.isWorkDay** and **props.isWorkHour** variables available in the template passed to the **slotRender property**.

```jsx
<template #slotRender="{ props }">
  <SchedulerSlot
    v-bind="props"
    :style="{
      'background-color': props.isAllDay
        ? '#56ca85' // Define the color of AllDay slots
        : props.isWorkDay
        ? '#ffddcc' // Define the color of WorkDay slots
        : props.isWorkHour
        ? '#ccff99' // Define the color of WorkHours slots
        : !props.isWorkDay
        ? '#ffcccb ' // Define the color of Non-WorkDay slots
        : undefined,
    }"
    @showmoreitems="props.onShowmoreitems"
  >
  </SchedulerSlot>
</template>
```

## Custom Month slots

The below example demonstrates how we can edit the content of the `Month view slots`.

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

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

```jsx
<template #slotRender="{ props }">
  <SchedulerSlot
    v-bind="props"
    :nav-day="false"
    @showmoreitems="props.onShowmoreitems"
  >
    <span
      :style="{
        'font-weight': 'bold',
      }"
      >{{ formattedDate(props.start) }}</span
    >
  </SchedulerSlot>
</template>
```

The important thing in the above template is the usage of the `navDay` **SchedulerSlot** property. By setting its value to **false** the default content in the slot is removed and we can add our custom data to it.

## Custom Time slots

The below example demonstrates how we can edit the `Time` **slots** in the  `Day`, `Week` and `Timeline` views.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/scheduler/custom-templates/slots/time/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)