diff --git a/src/views/calendar/CalendarDemo.vue b/src/views/calendar/CalendarDemo.vue
index fe819bb12..fa831c0ba 100755
--- a/src/views/calendar/CalendarDemo.vue
+++ b/src/views/calendar/CalendarDemo.vue
@@ -66,8 +66,8 @@
                     <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>
+                            <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>
                 </div>
@@ -150,13 +150,6 @@ export default {
 
 <style scoped>
 .special-day {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #1dcbb3;
-    color: #ffffff;
-    border-radius: 50%;
-    width: 2em;
-    height: 2em;
+    text-decoration: line-through;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index 503a87097..42548022e 100755
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -147,11 +147,17 @@ export default {
 <template v-pre>
 &lt;Calendar v-model="value"&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;span v-else&gt;{{slotProps.date.day}}&lt;/span&gt;
+        &lt;strong v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/strong&gt;
+        &lt;template v-else&gt;&#123;&#123;slotProps.date.day&#125;&#125;}&lt;/template&gt;
     &lt;/template&gt;
 &lt;/Calendar&gt;
 </template>
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+.special-day {
+    text-decoration: line-through;
+}
 </CodeHighlight>
 
                 <h3>Month Picker</h3>
@@ -602,9 +608,9 @@ export default {
     &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 && 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 #date="slotProps"&gt;
+                &lt;strong v-if="slotProps.date.day &gt; 10 && slotProps.date.day &lt; 15" class="special-day"&gt;{{slotProps.date.day}}&lt;/strong&gt;
+                &lt;template v-else&gt;&#123;&#123;slotProps.date.day&#125;&#125;}&lt;/template&gt;
             &lt;/template&gt;
         &lt;/Calendar&gt;
     &lt;/div&gt;
@@ -673,11 +679,14 @@ export default {
             maxDate: null,
             invalidDates: null
         }
-    },
-	components: {
-		'CalendarDoc': CalendarDoc
     }
 }
+</CodeHighlight>
+
+<CodeHighlight lang="css">
+.special-day {
+    text-decoration: line-through;
+}
 </CodeHighlight>
 
 			</TabPanel>