diff --git a/src/views/calendar/CalendarDemo.vue b/src/views/calendar/CalendarDemo.vue
index 1b5d2ba1f..fe819bb12 100755
--- a/src/views/calendar/CalendarDemo.vue
+++ b/src/views/calendar/CalendarDemo.vue
@@ -7,72 +7,73 @@
             </div>
         </div>
 
-        <div class="content-section implementation" style="padding-top:0">
-            <div class="p-grid p-fluid">
-                <div class="p-col-12 p-md-4">
-                    <h3>Basic</h3>
-                    <Calendar v-model="date1" />
+        <div class="content-section implementation">
+            <h3>Popup</h3>
+            <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" />
                 </div>
-                <div class="p-col-12 p-md-4">
-                    <h3>Spanish</h3>
-                    <Calendar v-model="date2" :locale="es" dateFormat="dd/mm/yy" />
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="icon">Icon</label>
+                    <Calendar id="icon" v-model="date3" :showIcon="true" />
                 </div>
-                <div class="p-col-12 p-md-4">
-                    <h3>Icon</h3>
-                    <Calendar v-model="date3" :showIcon="true" />
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="spanish">Spanish</label>
+                    <Calendar id="spanish" v-model="date2" :locale="es" dateFormat="dd/mm/yy" />
                 </div>
-                <div class="p-col-12 p-md-4">
-                    <h3>Min-Max</h3>
-                    <Calendar v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
+                <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" />
                 </div>
-                <div class="p-col-12 p-md-4">
-                    <h3>Disable Days</h3>
-                    <Calendar v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
+                <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" />
                 </div>
-                <div class="p-col-12 p-md-4">
-                    <h3>Navigators</h3>
-                    <Calendar v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="navigators">Navigators</label>
+                    <Calendar id="navigators" v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" />
                 </div>
-                <div class="p-col-12 p-md-4">
-                    <h3>Multiple</h3>
-                    <Calendar v-model="dates1" selectionMode="multiple" :manualInput="false" />
+                <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" />
                 </div>
-                <div class="p-col-12 p-md-4">
-                    <h3>Range</h3>
-                    <Calendar v-model="dates2" selectionMode="range" :manualInput="false" />
+                <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" />
                 </div>
-                <div class="p-col-12 p-md-4">
-                    <h3>Button Bar</h3>
-                    <Calendar v-model="date7" :showButtonBar="true" />
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="buttonbar">Button Bar</label>
+                    <Calendar id="buttonbar" v-model="date7" :showButtonBar="true" />
                 </div>
-                <div class="p-col-12 p-md-4">
-                    <h3>Time / 24h</h3>
-                    <Calendar v-model="date8" :showTime="true" :showSeconds="true" />
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="time24">Time / 24h</label>
+                    <Calendar id="time24" v-model="date8" :showTime="true" :showSeconds="true" />
                 </div>
-                <div class="p-col-12 p-md-4">
-                    <h3>Time Only / 12h</h3>
-                    <Calendar v-model="date9" :timeOnly="true" hourFormat="12" />
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="time12">Time / 12h</label>
+                    <Calendar id="time12" v-model="date9" :timeOnly="true" hourFormat="12" />
                 </div>
-                <div class="p-col-12 p-md-4">
-                    <h3>Month/Year Picker</h3>
-                    <Calendar v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" />
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="monthpicker">Month Picker</label>
+                    <Calendar id="monthpicker" 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 class="p-field p-col-12 p-md-4">
+                    <label for="multiplemonths">Multiple Months</label>
+                    <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
                 </div>
-                <div class="p-col-12 p-md-4">
-                    <h3>Date Template</h3>
-                    <Calendar v-model="date12">
+                <div class="p-field p-col-12 p-md-4">
+                    <label for="datetemplate">Date Template</label>
+                    <Calendar id="datetemplate" 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 class="p-field p-col-12 p-md-4">
+                    <label for="touchUI">TouchUI</label>
+                    <Calendar id="touchUI" v-model="date13" :touchUI="true" />
                 </div>
             </div>
 
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index 3f74d7a75..503a87097 100755
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -545,71 +545,72 @@ export default {
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;div class="p-grid p-fluid"&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;h3&gt;Basic&lt;/h3&gt;
-        &lt;Calendar v-model="date1" /&gt;
+&lt;h3&gt;Popup&lt;/h3&gt;
+&lt;div class=" p-fluid p-grid p-formgrid"&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;label for="basic"&gt;Basic&lt;/label&gt;
+        &lt;Calendar id="basic" v-model="date1" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;h3&gt;Spanish&lt;/h3&gt;
-        &lt;Calendar v-model="date2" :locale="es" dateFormat="dd/mm/yy" /&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;label for="icon"&gt;Icon&lt;/label&gt;
+        &lt;Calendar id="icon" v-model="date3" :showIcon="true" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;h3&gt;Icon&lt;/h3&gt;
-        &lt;Calendar v-model="date3" :showIcon="true" /&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;label for="spanish"&gt;Spanish&lt;/label&gt;
+        &lt;Calendar id="spanish" v-model="date2" :locale="es" dateFormat="dd/mm/yy" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;h3&gt;Min-Max&lt;/h3&gt;
-        &lt;Calendar v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;label for="minmax"&gt;MinMax&lt;/label&gt;
+        &lt;Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;h3&gt;Disable Days&lt;/h3&gt;
-        &lt;Calendar v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" /&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;label for="disableddays"&gt;Disabled Days&lt;/label&gt;
+        &lt;Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;h3&gt;Navigators&lt;/h3&gt;
-        &lt;Calendar v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" /&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;label for="navigators"&gt;Navigators&lt;/label&gt;
+        &lt;Calendar id="navigators" v-model="date6" :monthNavigator="true" :yearNavigator="true" yearRange="2000:2030" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;h3&gt;Multiple&lt;/h3&gt;
-        &lt;Calendar v-model="dates1" selectionMode="multiple" :manualInput="false" /&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;label for="multiple"&gt;Multiple&lt;/label&gt;
+        &lt;Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;h3&gt;Range&lt;/h3&gt;
-        &lt;Calendar v-model="dates2" selectionMode="range" :manualInput="false" /&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;label for="range"&gt;Range&lt;/label&gt;
+        &lt;Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;h3&gt;Button Bar&lt;/h3&gt;
-        &lt;Calendar v-model="date7" :showButtonBar="true" /&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;label for="buttonbar"&gt;Button Bar&lt;/label&gt;
+        &lt;Calendar id="buttonbar" v-model="date7" :showButtonBar="true" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;h3&gt;Time / 24h&lt;/h3&gt;
-        &lt;Calendar v-model="date8" :showTime="true" :showSeconds="true" /&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;label for="time24"&gt;Time / 24h&lt;/label&gt;
+        &lt;Calendar id="time24" v-model="date8" :showTime="true" :showSeconds="true" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;h3&gt;Time Only / 12h&lt;/h3&gt;
-        &lt;Calendar v-model="date9" :timeOnly="true" hourFormat="12" /&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;label for="time12"&gt;Time / 12h&lt;/label&gt;
+        &lt;Calendar id="time12" v-model="date9" :timeOnly="true" hourFormat="12" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;h3&gt;Month/Year Picker&lt;/h3&gt;
-        &lt;Calendar v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" /&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;label for="monthpicker"&gt;Month Picker&lt;/label&gt;
+        &lt;Calendar id="monthpicker" v-model="date10" view="month" dateFormat="mm/yy" :yearNavigator="true" yearRange="2000:2030" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;h3&gt;Multiple Months&lt;/h3&gt;
-        &lt;Calendar v-model="date11" :numberOfMonths="3" /&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;label for="multiplemonths"&gt;Multiple Months&lt;/label&gt;
+        &lt;Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;h3&gt;Date Template&lt;/h3&gt;
-        &lt;Calendar v-model="date12"&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;label for="datetemplate"&gt;Date Template&lt;/label&gt;
+        &lt;Calendar id="datetemplate" v-model="date12"&gt;
             &lt;template #date="slotProps"&gt;
-                &lt;div v-if="slotProps.date.day &gt; 10 &amp;&amp; slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/div&gt;
+                &lt;div v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/div&gt;
                 &lt;span v-else&gt;{{slotProps.date.day}}&lt;/span&gt;
             &lt;/template&gt;
         &lt;/Calendar&gt;
     &lt;/div&gt;
-    &lt;div class="p-col-12 p-md-4"&gt;
-        &lt;h3&gt;Touch UI&lt;/h3&gt;
-        &lt;Calendar v-model="date13" :touchUI="true" /&gt;
+    &lt;div class="p-field p-col-12 p-md-4"&gt;
+        &lt;label for="touchUI"&gt;TouchUI&lt;/label&gt;
+        &lt;Calendar id="touchUI" v-model="date13" :touchUI="true" /&gt;
     &lt;/div&gt;
 &lt;/div&gt;