From d0e46962bf3080bc03efb5243de142a3f827a8b3 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Thu, 16 May 2019 15:51:02 +0300
Subject: [PATCH] Date template and Multiple months display

---
 src/components/calendar/Calendar.vue |  5 ++--
 src/views/calendar/CalendarDemo.vue  | 42 ++++++++++++++++++++++++++--
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index d4959227a..e97b29103 100644
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -36,8 +36,9 @@
                                 <tbody>
                                     <tr v-for="week of month.dates" :key="week[0].day + '' + week[0].month">
                                         <td v-for="date of week" :key="date.day + '' + date.month" :class="{'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today}">
-                                            <span :class="{'p-highlight': isSelected(date), 'p-disabled': !date.selectable}"
-                                            @click="onDateSelect(date)" draggable="false">{{date.day}}</span>
+                                            <span :class="{'p-highlight': isSelected(date), 'p-disabled': !date.selectable}" @click="onDateSelect(date)" draggable="false">
+                                                <slot name="date" :date="date">{{date.day}}</slot>
+                                            </span>
                                         </td>
                                     </tr>
                                 </tbody>
diff --git a/src/views/calendar/CalendarDemo.vue b/src/views/calendar/CalendarDemo.vue
index 4e77b2744..10d7b9341 100644
--- a/src/views/calendar/CalendarDemo.vue
+++ b/src/views/calendar/CalendarDemo.vue
@@ -11,7 +11,7 @@
             <div class="p-grid p-fluid">
                 <div class="p-col-12 p-md-4">
                     <h3>Basic</h3>
-                    <Calendar v-model="date1" />{{date1}}
+                    <Calendar v-model="date1" />
                 </div>
                 <div class="p-col-12 p-md-4">
                     <h3>Spanish</h3>
@@ -57,7 +57,27 @@
                     <h3>Month/Year Picker</h3>
                     <Calendar v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
                 </div>
+                <div class="p-col-12 p-md-4">
+                    <h3>Multiple Months</h3>
+                    <Calendar v-model="date11" :numberOfMonths="3" />
+                </div>
+                <div class="p-col-12 p-md-4">
+                    <h3>Date Template</h3>
+                    <Calendar v-model="date12">
+                        <template #date="slotProps">
+                            <div v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</div>
+                            <span v-else>{{slotProps.date.day}}</span>
+                        </template>
+                    </Calendar>
+                </div>
+                <div class="p-col-12 p-md-4">
+                    <h3>Touch UI</h3>
+                    <Calendar v-model="date13" :touchUI="true" />
+                </div>
             </div>
+
+            <h3>Inline</h3>
+            <Calendar v-model="date14" :inline="true" :showWeek="true" />
         </div>
 
         <CalendarDoc />
@@ -99,6 +119,10 @@ export default {
             date8: null,
             date9: null,
             date10: null,
+            date11: null,
+            date12: null,
+            date13: null,
+            date14: null,
             dates1: null,
             dates2: null,
             es: {
@@ -121,4 +145,18 @@ export default {
 		'CalendarDoc': CalendarDoc
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.special-day {
+    background-color: #1dcbb3;
+    color: #ffffff;
+    font-weight: bold;
+    border-radius: 50%;
+    width: 2em;
+    height: 2em;
+    line-height: 2em; 
+    padding: 0;
+    display: inline-block;
+}
+</style>
\ No newline at end of file