docs(ComponentCode): add cast prop (#2773)

docs/content/3.components/calendar.md

@@ -21,10 +21,31 @@ Use the `v-model` directive to control the selected date.
 
 ::component-code
 ---
+cast:
+  modelValue: DateValue
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: [2022, 2, 3]
 ---
 ::
 
-<!-- TODO: Add example with default value -->
+Use the `default-value` prop to set the initial value when you do not need to control its state.
+
+::component-code
+---
+cast:
+  defaultValue: DateValue
+ignore:
+  - defaultValue
+external:
+  - defaultValue
+props:
+  defaultValue: [2022, 2, 6]
+---
+::
 
 ### Multiple
 
@@ -32,10 +53,17 @@ Use the `multiple` prop to allow multiple selections.
 
 ::component-code
 ---
+prettier: true
+cast:
+  modelValue: DateValue[]
 ignore:
   - multiple
+  - modelValue
+external:
+  - modelValue
 props:
   multiple: true
+  modelValue: [[2022, 2, 4], [2022, 2, 6], [2022, 2, 8]]
 ---
 ::
 
@@ -45,10 +73,20 @@ Use the `range` prop to select a range of dates.
 
 ::component-code
 ---
+prettier: true
+cast:
+  modelValue: DateRange
 ignore:
   - range
+  - modelValue.start
+  - modelValue.end
+external:
+  - modelValue
 props:
   range: true
+  modelValue:
+    start: [2022, 2, 3]
+    end: [2022, 2, 20]
 ---
 ::