Added better calendar to contact form

website/Contactform.html

@@ -1,3 +1,8 @@
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+</head>
+
 <div class="container strongly-spaced-row" data-section-type="contact" data-components="custom-select" data-cc-animate>
   <div id="template" class="reading-width">
     {% form 'contact' %}
@@ -107,6 +112,19 @@
                         {% if block.settings.required %}required{% endif %}/>
                     {% endif %}
                   {% endif %}
+                  
+                {% when 'calendar_input' %}
+                {% if block.settings.title != blank %}
+                    {%- assign title_handle = block.settings.title | handle -%}
+                    <label for="contact_{{ title_handle }}">{{ block.settings.title | escape }}</label>
+                    <input
+                        type="text"
+                        id="ContactFormDates"
+                        name="contact[{{ title_handle }}]"
+                        value="{{ form[title_handle] }}"
+                        {% if block.settings.required %}required{% endif %}
+                    />
+                {% endif %}
 
                 {% when 'custom_dropdown' %}
                   {% if block.settings.title != blank %}
@@ -177,6 +195,28 @@
     }
   });
 </script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    flatpickr("#ContactFormDates", {
+      mode: "multiple",
+      dateFormat: "d-m-y",
+      altInput: true,
+      altFormat: "d.m.Y",
+      minDate: "today",
+      "locale": {
+          "firstDayOfWeek": 1 // start week on Monday
+      },
+      allowInput:true,
+      onOpen: function(selectedDates, dateStr, instance) {
+          $(instance.altInput).prop('readonly', true);
+      },
+      onClose: function(selectedDates, dateStr, instance) {
+          $(instance.altInput).prop('readonly', false);
+          $(instance.altInput).blur();
+      }      
+    });
+  });
+</script>
 
 {% schema %}
   {
@@ -270,6 +310,31 @@
           }
         ]
       },
+      {
+        "type": "calendar_input",
+        "name": "Calendar",
+        "limit": 1,
+        "settings": [
+          {
+            "type": "text",
+            "id": "title",
+            "label": "Label",
+            "default": "Calendar"
+          },
+          {
+            "type": "checkbox",
+            "id": "required",
+            "label": "Required",
+            "default": true
+          },
+          {
+            "type": "checkbox",
+            "id": "half_width",
+            "label": "Half width",
+            "default": false
+          }
+        ]
+      },
       {
         "type": "custom_input",
         "name": "Custom input",
@@ -305,7 +370,7 @@
               {
                 "label": "Text area",
                 "value": "textarea"
-              }
+              },
             ]
           },
           {

website/temp

@@ -1,25 +0,0 @@
-<head>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
-  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
-</head>
-
-        <div class="field">
-          <label for="ContactFormDates">Wunschtermin(e)</label>
-          <input
-            type="text"
-            id="ContactFormDates"
-            name="contact[Wunschtermine]"
-            placeholder="Datum auswählen"
-          >
-        </div>
-        <script>
-          document.addEventListener("DOMContentLoaded", function () {
-
-            flatpickr("#ContactFormDates", {
-              mode: "multiple",
-              dateFormat: "Y-m-d",
-              minDate: "today"
-            });
-
-          });
-        </script>