1.2 KiB
1.2 KiB
| title | description | type | page_title | slug | tags | res_type | category |
|---|---|---|---|---|---|---|---|
| Add a badge to the Calendar cells based on a condition | An example on how to show a badge based on a condition in the Kendo UI for Vue Calendar. | how-to | Conditionally render a badge - Kendo UI for Vue Calendar | calendar-add-badge-conditionally | calendar, kendo ui for vue, badge, cell, conditionally | kb | knowledge-base |
| Product Version | 4.3.2 |
| Product | Progress® Kendo UI for Vue Native |
Description
How can I render a badge for specific calendar cells based on a condition?
Solution
Use the cell prop to render a custom component that will render a Badge based on the required condition.
Runnable example
The following example showcases how to render the Badge for the first three dates:
{% meta id:index height:560 %} {% embed_file calendar-add-badge-conditionally/main.vue preview %} {% embed_file calendar-add-badge-conditionally/Cell.vue %} {% embed_file calendar-add-badge-conditionally/main.js %} {% endmeta %}