extract non-interactive calendar

components/wizard/dateSelect.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react'
 import { WizardContext } from './context/wizardStore'
 import InputWrapper from '../inputWrapper'
-import Calendar from './calendar'
+import Calendar from '../calendar'
 
 export default function DateSelect() {
-  const { onChangeEvent, state } = useContext(WizardContext)
+  const { onChangeEvent, onChange, state } = useContext(WizardContext)
   const { startDate, endDate } = state.formData
 
   const today = new Date().toISOString().substring(0, 10)
@@ -12,7 +12,12 @@ export default function DateSelect() {
   return (
     <>
       <InputWrapper label="Datum" required>
-        <Calendar className="m-6" />
+        <Calendar
+          start={startDate}
+          end={endDate}
+          onChange={onChange}
+          className="m-6"
+        />
         <div className="inline-block mr-6">
           <label className="flabel inline-block w-6 mr-3" htmlFor="startDate">
             Von