diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index d20873ffc..c88e0f48e 100755
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -905,73 +905,73 @@ export default {
             <div class="p-fluid p-grid p-formgrid">
                 <div class="p-field p-col-12 p-md-4">
                     <label for="basic">Basic</label>
-                    <Calendar id="basic" v-model="date1" autocomplete="off" />
+                    <p-calendar id="basic" v-model="date1" autocomplete="off"></p-calendar>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="dateformat">DateFormat</label>
-                    <Calendar id="dateformat" v-model="date2"  dateFormat="mm-dd-yy" />
+                    <p-calendar id="dateformat" v-model="date2" date-format="mm-dd-yy"></p-calendar>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="icon">Icon</label>
-                    <Calendar id="icon" v-model="date3" :showIcon="true" />
+                    <p-calendar id="icon" v-model="date3" :show-icon="true"></p-calendar>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="minmax">MinMax</label>
-                    <Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
+                    <p-calendar id="minmax" v-model="date4" :min-date="minDate" :max-date="maxDate" :manual-input="false"></p-calendar>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="disableddays">Disabled Days</label>
-                    <Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
+                    <p-calendar id="disableddays" v-model="date5" :disabled-dates="invalidDates" :disabled-days="[0,6]" :manual-input="false"></p-calendar>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="multiple">Multiple</label>
-                    <Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
+                    <p-calendar id="multiple" v-model="dates1" selection-mode="multiple" :manual-input="false"></p-calendar>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="range">Range</label>
-                    <Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
+                    <p-calendar id="range" v-model="dates2" selection-mode="range" :manual-input="false"></p-calendar>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="buttonbar">Button Bar</label>
-                    <Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
+                    <p-calendar id="buttonbar" v-model="date6" :show-button-bar="true"></p-calendar>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="time24">Time / 24h</label>
-                    <Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
+                    <p-calendar id="time24" v-model="date7" :show-time="true" :show-seconds="true"></p-calendar>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="time12">Time / 12h</label>
-                    <Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
+                    <p-calendar id="time12" v-model="date8" :time-only="true" hour-format="12"></p-calendar>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="monthpicker">Month Picker</label>
-                    <Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
+                    <p-calendar id="monthpicker" v-model="date9" view="month" date-format="mm/yy"></p-calendar>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="yearpicker">Year Picker</label>
-                    <Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
+                    <p-calendar id="yearpicker" v-model="date10" view="year" date-format="yy"></p-calendar>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="multiplemonths">Multiple Months</label>
-                    <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
+                    <p-calendar id="multiplemonths" v-model="date11" :number-of-months="3" :responsive-options="responsiveOptions"></p-calendar>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="datetemplate">Date Template</label>
-                    <Calendar id="datetemplate" v-model="date12">
+                    <p-calendar id="datetemplate" v-model="date12">
                         <template #date="slotProps">
                             <strong v-if="slotProps.date.day > 10 && slotProps.date.day < 15" class="special-day">{{slotProps.date.day}}</strong>
                             <template v-else>{{slotProps.date.day}}</template>
                         </template>
-                    </Calendar>
+                    </p-calendar>
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="touchUI">TouchUI</label>
-                    <Calendar id="touchUI" v-model="date13" :touchUI="true" />
+                    <p-calendar id="touchUI" v-model="date13" :touch-u-i="true"></p-calendar>
                 </div>
             </div>
 
             <h5>Inline</h5>
-            <Calendar v-model="date14" :inline="true" :showWeek="true" />
+            <p-calendar v-model="date14" :inline="true" :show-week="true"></p-calendar>
         </div>
 
         <script type="module">