From 7f00687218222bc477ccaa1f443dd4a22a780403 Mon Sep 17 00:00:00 2001
From: filipKovachev <kovachev@progress.com>
Date: Tue, 30 Apr 2024 13:56:25 +0300
Subject: [PATCH] add Calendar KB article

---
 .../calendar-add-badge-conditionally.md       | 42 ++++++++++++++
 .../calendar-add-badge-conditionally/Cell.vue | 58 +++++++++++++++++++
 .../calendar-add-badge-conditionally/main.js  |  4 ++
 .../calendar-add-badge-conditionally/main.vue | 27 +++++++++
 4 files changed, 131 insertions(+)
 create mode 100644 knowledge-base/calendar-add-badge-conditionally.md
 create mode 100644 knowledge-base/examples/calendar-add-badge-conditionally/Cell.vue
 create mode 100644 knowledge-base/examples/calendar-add-badge-conditionally/main.js
 create mode 100644 knowledge-base/examples/calendar-add-badge-conditionally/main.vue

diff --git a/knowledge-base/calendar-add-badge-conditionally.md b/knowledge-base/calendar-add-badge-conditionally.md
new file mode 100644
index 0000000..2aa9b63
--- /dev/null
+++ b/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 %}
diff --git a/knowledge-base/examples/calendar-add-badge-conditionally/Cell.vue b/knowledge-base/examples/calendar-add-badge-conditionally/Cell.vue
new file mode 100644
index 0000000..3a33a90
--- /dev/null
+++ b/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>
+  
\ No newline at end of file
diff --git a/knowledge-base/examples/calendar-add-badge-conditionally/main.js b/knowledge-base/examples/calendar-add-badge-conditionally/main.js
new file mode 100644
index 0000000..be9e20a
--- /dev/null
+++ b/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')
diff --git a/knowledge-base/examples/calendar-add-badge-conditionally/main.vue b/knowledge-base/examples/calendar-add-badge-conditionally/main.vue
new file mode 100644
index 0000000..3126c40
--- /dev/null
+++ b/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>
+  
\ No newline at end of file