feat(datetime): add new calendar parts

Author: thetaPC

static/usage/v8/datetime/styling/calendar-header/angular/example_component_css.md

@@ -1,9 +1,30 @@
 ```css
 /*
- * Custom Datetime Calendar Header Part
+ * Custom Datetime Calendar Header Parts
  * -------------------------------------------
  */
+ion-datetime::part(calendar-header) {
+  background-color: orange;
+}
+
 ion-datetime::part(month-year-button) {
   background-color: lightblue;
 }
+
+ion-datetime::part(prev-next-buttons) {
+  background-color: firebrick;
+}
+
+ion-datetime::part(prev-button) {
+  color: white;
+}
+
+ion-datetime::part(next-button) {
+  color: black;
+}
+
+ion-datetime::part(days-of-week) {
+  background-color: #9ad162;
+  color: white;
+}
 ```

static/usage/v8/datetime/styling/calendar-header/demo.html

@@ -15,9 +15,30 @@
       * -------------------------------------------
       */
 
+      ion-datetime::part(calendar-header) {
+        background-color: orange;
+      }
+
       ion-datetime::part(month-year-button) {
         background-color: lightblue;
       }
+
+      ion-datetime::part(prev-next-buttons) {
+        background-color: firebrick;
+      }
+
+      ion-datetime::part(prev-button) {
+        color: white;
+      }
+
+      ion-datetime::part(next-button) {
+        color: black;
+      }
+
+      ion-datetime::part(days-of-week) {
+        background-color: #9ad162;
+        color: white;
+      }
     </style>
   </head>
 

static/usage/v8/datetime/styling/calendar-header/javascript.md

@@ -3,11 +3,32 @@
 
 <style>
   /*
-   * Custom Datetime Calendar Header Part
+   * Custom Datetime Calendar Header Parts
    * -------------------------------------------
    */
+  ion-datetime::part(calendar-header) {
+    background-color: orange;
+  }
+
   ion-datetime::part(month-year-button) {
     background-color: lightblue;
   }
+
+  ion-datetime::part(prev-next-buttons) {
+    background-color: firebrick;
+  }
+
+  ion-datetime::part(prev-button) {
+    color: white;
+  }
+
+  ion-datetime::part(next-button) {
+    color: black;
+  }
+
+  ion-datetime::part(days-of-week) {
+    background-color: #9ad162;
+    color: white;
+  }
 </style>
 ```

static/usage/v8/datetime/styling/calendar-header/react/main_css.md

@@ -1,9 +1,30 @@
 ```css
 /*
- * Custom Datetime Calendar Header Part
+ * Custom Datetime Calendar Header Parts
  * -------------------------------------------
  */
+ion-datetime::part(calendar-header) {
+  background-color: orange;
+}
+
 ion-datetime::part(month-year-button) {
   background-color: lightblue;
 }
+
+ion-datetime::part(prev-next-buttons) {
+  background-color: firebrick;
+}
+
+ion-datetime::part(prev-button) {
+  color: white;
+}
+
+ion-datetime::part(next-button) {
+  color: black;
+}
+
+ion-datetime::part(days-of-week) {
+  background-color: #9ad162;
+  color: white;
+}
 ```

static/usage/v8/datetime/styling/calendar-header/vue.md

@@ -12,8 +12,29 @@
    * Custom Datetime Calendar Header Part
    * -------------------------------------------
    */
+  ion-datetime::part(calendar-header) {
+    background-color: orange;
+  }
+
   ion-datetime::part(month-year-button) {
     background-color: lightblue;
   }
+
+  ion-datetime::part(prev-next-buttons) {
+    background-color: firebrick;
+  }
+
+  ion-datetime::part(prev-button) {
+    color: white;
+  }
+
+  ion-datetime::part(next-button) {
+    color: black;
+  }
+
+  ion-datetime::part(days-of-week) {
+    background-color: #9ad162;
+    color: white;
+  }
 </style>
 ```