add Calendar KB article

knowledge-base/calendar-add-badge-conditionally.md

@@ -0,0 +1,42 @@
+---
+title: Add a badge to the Calendar cells based on a condition
+description: An example on how to show a badge based on a condition in the Kendo UI for Vue Calendar.
+type: how-to
+page_title: Conditionally render a badge - Kendo UI for Vue Calendar
+slug: calendar-add-badge-conditionally
+tags: calendar, kendo ui for vue, badge, cell, conditionally
+res_type: kb
+category: knowledge-base
+---
+
+<table>
+    <tbody>
+	    <tr>
+	    	<td>Product Version</td>
+	    	<td>4.3.2</td>
+	    </tr>
+	    <tr>
+	    	<td>Product</td>
+	    	<td>Progress® Kendo UI for Vue Native</td>
+	    </tr>
+    </tbody>
+</table>
+
+
+## Description
+
+How can I render a badge for specific calendar cells based on a condition?
+
+## Solution
+
+Use the [`cell`](slug:api_dateinputs_calendarprops#toc_cell) prop to render a custom component that will render a [Badge](slug:overview_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 %}

knowledge-base/examples/calendar-add-badge-conditionally/Cell.vue

@@ -0,0 +1,58 @@
+<template>
+    <calendar-cell
+      :is-selected="isSelected"
+      @click="handleClick"
+      :style="cellStyle"
+    >
+      <span class="sent-items">
+        {{ formattedValue }}
+        <Badge
+          v-if="shouldShowBadge"
+          :theme-color="'tertiary'"
+          :rounded="'full'"
+          :size="'small'"
+          >34</Badge
+        >
+      </span>
+    </calendar-cell>
+  </template>
+
+  <script>
+  import { CalendarCell } from '@progress/kendo-vue-dateinputs';
+  import { BadgeContainer, Badge } from '@progress/kendo-vue-indicators';
+  
+  export default {
+    name: 'CustomCalendarCell',
+    props: CalendarCell.props,
+    components: {
+      'calendar-cell': CalendarCell,
+      BadgeContainer,
+      Badge,
+    },
+    emits: {
+      click: null,
+    },
+    computed: {
+      cellStyle: function () {
+        return this.$props.isWeekend ? { opacity: '.7' } : { fontWeight: 'bold' };
+      },
+      shouldShowBadge() {
+        const day = new Date(this.$props.value).getDate();
+        return day <= 3 && !this.$props.isOtherMonth;
+      },
+    },
+    methods: {
+      handleClick: function (e) {
+        this.$emit('click', this.$props.value, e);
+      },
+    },
+  };
+  </script>
+
+  <style>
+  .sent-items {
+    position: relative;
+    overflow: visible;
+  }
+  </style>
+

knowledge-base/examples/calendar-add-badge-conditionally/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './main.vue'
+
+createApp(App).mount('#app')

knowledge-base/examples/calendar-add-badge-conditionally/main.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="example-config">
+          <calendar :cell="customCell" >
+            <template v-slot:myTemplate="{props}">
+              <custom v-bind="props"/>
+          </template>
+          </calendar>
+      </div>
+  </template>
+  <script>
+  import { Calendar } from '@progress/kendo-vue-dateinputs';
+  import Cell from './Cell';
+  
+  export default {
+      components: {
+        'calendar': Calendar,
+        'custom': Cell
+      },
+      data: function(){
+          return {
+              customCell: 'myTemplate'
+          };
+      }
+  };
+  
+  </script>
+