diff --git a/components/lib/calendar/Calendar.d.ts b/components/lib/calendar/Calendar.d.ts
index c2a31db13..1d5e50565 100755
--- a/components/lib/calendar/Calendar.d.ts
+++ b/components/lib/calendar/Calendar.d.ts
@@ -9,9 +9,9 @@
  */
 import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ButtonPassThroughOptions } from '../button';
+import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
-import { ClassComponent, GlobalComponentConstructor, PassThrough, HintedString } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
 
 export declare type CalendarPassThroughOptionType = CalendarPassThroughAttributes | ((options: CalendarPassThroughMethodOptions) => CalendarPassThroughAttributes | string) | string | null | undefined;
 
@@ -134,14 +134,14 @@ export interface CalendarPassThroughOptions {
      */
     root?: CalendarPassThroughOptionType;
     /**
-     * Used to pass attributes to the input's DOM element.
+     * Used to pass attributes to the InputText component.
+     * @see {@link InputTextPassThroughOptions}
      */
-    input?: CalendarPassThroughOptionType;
+    input?: InputTextPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptions}
+     * Used to pass attributes to the dropdown button's DOM element.
      */
-    dropdownButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
+    dropdownButton?: CalendarPassThroughOptionType;
     /**
      * Used to pass attributes to the panel's DOM element.
      */
@@ -159,10 +159,9 @@ export interface CalendarPassThroughOptions {
      */
     header?: CalendarPassThroughOptionType;
     /**
-     * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptions}
+     * Used to pass attributes to the previous button's DOM element.
      */
-    previousButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
+    previousButton?: CalendarPassThroughOptionType;
     /**
      * Used to pass attributes to the title's DOM element.
      */
@@ -180,10 +179,9 @@ export interface CalendarPassThroughOptions {
      */
     decadeTitle?: CalendarPassThroughOptionType;
     /**
-     * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptions}
+     * Used to pass attributes to the previous button's DOM element.
      */
-    nextButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
+    nextButton?: CalendarPassThroughOptionType;
     /**
      * Used to pass attributes to the container's DOM element.
      */
@@ -273,7 +271,7 @@ export interface CalendarPassThroughOptions {
      */
     hour?: CalendarPassThroughOptionType;
     /**
-     * Used to pass attributes to the separatorc ontainer's DOM element.
+     * Used to pass attributes to the separator container's DOM element.
      */
     separatorContainer?: CalendarPassThroughOptionType;
     /**
@@ -309,15 +307,13 @@ export interface CalendarPassThroughOptions {
      */
     buttonbar?: CalendarPassThroughOptionType;
     /**
-     * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptions}
+     * Used to pass attributes to the today button's DOM element.
      */
-    todayButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
+    todayButton?: CalendarPassThroughOptionType;
     /**
-     * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptions}
+     * Used to pass attributes to the clear button's DOM element.
      */
-    clearButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
+    clearButton?: CalendarPassThroughOptionType;
     /**
      * Used to pass attributes to the aria selected day's DOM element.
      */
@@ -930,6 +926,16 @@ export interface CalendarSlots {
          */
         class: any;
     }): VNode[];
+    /**
+     * Custom dropdown button template.
+     */
+    dropdownbutton(scope: {
+        /**
+         * Toggle function.
+         * @param {Event} event - Browser event
+         */
+        toggleCallback: (event: Event) => void;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index 9f459c24a..00de9e08a 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -1,14 +1,17 @@
 <template>
     <span ref="container" :id="d_id" :class="cx('root')" :style="sx('root')" v-bind="ptmi('root')">
-        <input
+        <CInputText
             v-if="!inline"
             :ref="inputRef"
             :id="inputId"
-            type="text"
             role="combobox"
-            :class="[cx('input'), inputClass]"
+            :class="[inputClass, cx('input')]"
             :style="inputStyle"
+            :value="inputFieldValue"
             :placeholder="placeholder"
+            :invalid="invalid"
+            :variant="variant"
+            :unstyled="unstyled"
             autocomplete="off"
             aria-autocomplete="none"
             aria-haspopup="dialog"
@@ -16,7 +19,6 @@
             :aria-controls="panelId"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
-            :aria-invalid="invalid || undefined"
             inputmode="none"
             :disabled="disabled"
             :readonly="!manualInput || readonly"
@@ -26,27 +28,26 @@
             @focus="onFocus"
             @blur="onBlur"
             @keydown="onKeyDown"
-            v-bind="{ ...inputProps, ...ptm('input') }"
+            v-bind="inputProps"
+            :pt="ptm('input')"
         />
-        <CalendarButton
-            v-if="showIcon && iconDisplay === 'button'"
-            :class="cx('dropdownButton')"
-            :disabled="disabled"
-            @click="onButtonClick"
-            type="button"
-            :aria-label="$primevue.config.locale.chooseDate"
-            aria-haspopup="dialog"
-            :aria-expanded="overlayVisible"
-            :aria-controls="panelId"
-            :unstyled="unstyled"
-            :pt="ptm('dropdownButton')"
-        >
-            <template #icon>
+        <slot v-if="showIcon && iconDisplay === 'button'" name="dropdownbutton">
+            <button
+                :class="cx('dropdownButton')"
+                :disabled="disabled"
+                @click="onButtonClick"
+                type="button"
+                :aria-label="$primevue.config.locale.chooseDate"
+                aria-haspopup="dialog"
+                :aria-expanded="overlayVisible"
+                :aria-controls="panelId"
+                v-bind="ptm('dropdownButton')"
+            >
                 <slot name="dropdownicon" :class="icon">
-                    <component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButton')['icon']" data-pc-section="dropdownicon" />
+                    <component :is="icon ? 'span' : 'CalendarIcon'" :class="icon" v-bind="ptm('dropdownButtonIcon')" />
                 </slot>
-            </template>
-        </CalendarButton>
+            </button>
+        </slot>
         <template v-else-if="showIcon && iconDisplay === 'input'">
             <slot name="inputicon" :class="cx('inputIcon')" :clickCallback="onButtonClick">
                 <component :is="icon ? 'i' : 'CalendarIcon'" :class="[icon, cx('inputIcon')]" @click="onButtonClick" v-bind="ptm('inputicon')" />
@@ -482,26 +483,8 @@
                         </div>
                     </div>
                     <div v-if="showButtonBar" :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
-                        <CalendarButton
-                            type="button"
-                            :label="todayLabel"
-                            @click="onTodayButtonClick($event)"
-                            :class="cx('todayButton')"
-                            @keydown="onContainerButtonKeydown"
-                            :unstyled="unstyled"
-                            :pt="ptm('todayButton')"
-                            data-pc-group-section="button"
-                        />
-                        <CalendarButton
-                            type="button"
-                            :label="clearLabel"
-                            @click="onClearButtonClick($event)"
-                            :class="cx('clearButton')"
-                            @keydown="onContainerButtonKeydown"
-                            :unstyled="unstyled"
-                            :pt="ptm('clearButton')"
-                            data-pc-group-section="button"
-                        />
+                        <button type="button" :label="todayLabel" @click="onTodayButtonClick($event)" :class="cx('todayButton')" @keydown="onContainerButtonKeydown" v-bind="ptm('todayButton')" data-pc-group-section="button" />
+                        <button type="button" :label="clearLabel" @click="onClearButtonClick($event)" :class="cx('clearButton')" @keydown="onContainerButtonKeydown" v-bind="ptm('clearButton')" data-pc-group-section="button" />
                     </div>
                     <slot name="footer"></slot>
                 </div>
@@ -511,12 +494,12 @@
 </template>
 
 <script>
-import Button from 'primevue/button';
 import CalendarIcon from 'primevue/icons/calendar';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronLeftIcon from 'primevue/icons/chevronleft';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import ChevronUpIcon from 'primevue/icons/chevronup';
+import InputText from 'primevue/inputtext';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
@@ -567,7 +550,8 @@ export default {
             this.updateCurrentMetaData();
 
             if (!this.typeUpdate && !this.inline && this.input) {
-                this.input.value = this.formatValue(newValue);
+                // this.input.value = this.formatValue(newValue);
+                this.input.value = this.inputFieldValue;
             }
 
             this.typeUpdate = false;
@@ -627,7 +611,8 @@ export default {
                 }
             }
         } else {
-            this.input.value = this.formatValue(this.modelValue);
+            // this.input.value = this.formatValue(this.modelValue);
+            this.input.value = this.inputFieldValue;
         }
     },
     updated() {
@@ -2694,7 +2679,7 @@ export default {
             this.overlay = el;
         },
         inputRef(el) {
-            this.input = el;
+            this.input = el ? el.$el : undefined;
         },
         previousButtonRef(el) {
             this.previousButton = el;
@@ -3016,7 +3001,7 @@ export default {
         }
     },
     components: {
-        CalendarButton: Button,
+        CInputText: InputText,
         Portal: Portal,
         CalendarIcon: CalendarIcon,
         ChevronLeftIcon: ChevronLeftIcon,
diff --git a/components/lib/calendar/style/CalendarStyle.js b/components/lib/calendar/style/CalendarStyle.js
index 23ead42ef..1e8e39e51 100644
--- a/components/lib/calendar/style/CalendarStyle.js
+++ b/components/lib/calendar/style/CalendarStyle.js
@@ -9,7 +9,7 @@ const classes = {
         'p-calendar p-component p-inputwrapper',
         {
             'p-calendar-w-btn': props.showIcon && props.iconDisplay === 'button',
-            'p-icon-field p-icon-field-right': props.showIcon && props.iconDisplay === 'input',
+            'p-calendar-input-icon-field': props.showIcon && props.iconDisplay === 'input',
             'p-calendar-timeonly': props.timeOnly,
             'p-calendar-disabled': props.disabled,
             'p-invalid': props.invalid,
@@ -18,12 +18,7 @@ const classes = {
             'p-focus': state.focused || state.overlayVisible
         }
     ],
-    input: ({ props, instance }) => [
-        'p-inputtext p-component',
-        {
-            'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
-        }
-    ],
+    input: 'p-calendar-input',
     dropdownButton: 'p-datepicker-trigger',
     inputIcon: 'p-datepicker-trigger-icon p-input-icon',
     panel: ({ instance, props, state }) => [