# Add a badge to the Calendar cells based on a condition

<table>
    <tbody>
	    <tr>
	    	<td>Product Version</td>
	    	<td>4.3.2</td>
	    </tr>
	    <tr>
	    	<td>Product</td>
	    	<td>Progress® Kendo UI for Vue</td>
	    </tr>
    </tbody>
</table>

## Description

How can I render a badge for specific calendar cells based on a condition?

## Solution

Use the [`cell`](https://www.telerik.com/kendo-vue-ui/components/dateinputs/api/calendarprops#cell) prop to render a custom component that will render a [Badge](https://www.telerik.com/kendo-vue-ui/components/indicators/badge) based on the required condition.

### Runnable example

The following example showcases how to render the Badge for the first three dates:

[Demo Source](https://demos.telerik.com/kendo-vue-ui/knowledge-base/calendar-add-badge-conditionally/source.txt)