diff --git a/doc/calendar/IconDoc.vue b/doc/calendar/IconDoc.vue
index ad37b1a03..3bd1692dc 100644
--- a/doc/calendar/IconDoc.vue
+++ b/doc/calendar/IconDoc.vue
@@ -1,9 +1,24 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>An additional icon is displayed next to the input field when <i>showIcon</i> is present.</p>
+        <p>An additional button is displayed next to the input field when <i>showIcon</i> is present. Also adding <i>iconDisplay</i> as <i>input</i> an icon will be displayed.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Calendar v-model="date" showIcon />
+    <div class="card flex flex-wrap gap-3 p-fluid">
+        <div class="flex-auto">
+            <label for="buttondisplay" class="font-bold block mb-2"> Button Display </label>
+            <Calendar v-model="buttondisplay" showIcon inputId="buttondisplay" />
+        </div>
+        <div class="flex-auto">
+            <label for="icondisplay" class="font-bold block mb-2"> Icon Display </label>
+            <Calendar v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
+        </div>
+        <div class="flex-auto">
+            <label for="templatedisplay" class="font-bold block mb-2"> Icon Template </label>
+            <Calendar v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
+                <template #inputicon="{ clickCallback }">
+                    <i class="pi pi-clock" @click="clickCallback" />
+                </template>
+            </Calendar>
+        </div>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,15 +27,38 @@
 export default {
     data() {
         return {
-            date: null,
+            buttondisplay: null,
+            icondisplay: null,
+            templatedisplay: null,
             code: {
                 basic: `
-<Calendar v-model="date" showIcon />
+<Calendar v-model="buttondisplay" showIcon />
+<Calendar v-model="icondisplay" showIcon iconDisplay="input" />
+<Calendar v-model="templatedisplay" showIcon iconDisplay="input" timeOnly>
+    <template #inputicon="{ clickCallback }">
+        <i class="pi pi-clock" @click="clickCallback" />
+    </template>
+</Calendar>
 `,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
-        <Calendar v-model="date" showIcon />
+    <div class="card flex flex-wrap gap-3 p-fluid">
+        <div class="flex-auto">
+            <label for="buttondisplay" class="font-bold block mb-2"> Button Display </label>
+            <Calendar v-model="buttondisplay" showIcon inputId="buttondisplay" />
+        </div>
+        <div class="flex-auto">
+            <label for="icondisplay" class="font-bold block mb-2"> Icon Display </label>
+            <Calendar v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
+        </div>
+        <div class="flex-auto">
+            <label for="templatedisplay" class="font-bold block mb-2"> Icon Template </label>
+            <Calendar v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
+                <template #inputicon="{ clickCallback }">
+                    <i class="pi pi-clock" @click="clickCallback" />
+                </template>
+            </Calendar>
+        </div>
     </div>
 </template>
 
@@ -28,7 +66,9 @@ export default {
 export default {
     data() {
         return {
-            date: null
+            buttondisplay: null,
+            icondisplay: null,
+            templatedisplay: null,
         };
     }
 };
@@ -36,15 +76,32 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
-        <Calendar v-model="date" showIcon />
+    <div class="card flex flex-wrap gap-3 p-fluid">
+        <div class="flex-auto">
+            <label for="buttondisplay" class="font-bold block mb-2"> Button Display </label>
+            <Calendar v-model="buttondisplay" showIcon inputId="buttondisplay" />
+        </div>
+        <div class="flex-auto">
+            <label for="icondisplay" class="font-bold block mb-2"> Icon Display </label>
+            <Calendar v-model="icondisplay" showIcon iconDisplay="input" inputId="icondisplay" />
+        </div>
+        <div class="flex-auto">
+            <label for="templatedisplay" class="font-bold block mb-2"> Icon Template </label>
+            <Calendar v-model="templatedisplay" showIcon iconDisplay="input" timeOnly inputId="templatedisplay">
+                <template #inputicon="{ clickCallback }">
+                    <i class="pi pi-clock" @click="clickCallback" />
+                </template>
+            </Calendar>
+        </div>
     </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
 
-const date = ref();
+const buttondisplay = ref();
+const icondisplay = ref();
+const templatedisplay = ref();
 <\/script>
 `
             }