eola Style Guide 2025: Calendar

Calendar

This is a date picker to provide a simple way to select a value from the calendar form. This has Formik baked into it for ease of use.

Examples

Calendar - using a hidden input

<Formik initialValues={{calendar: undefined}} onSubmit={()=> {}}>
  {({ values }) => (
    <Form style={{ width: '100%', maxWidth: 480 }}>
      <Calendar
        name="calendar"
        availableDays={dayjs().add(2, 'days').toDate()}
      />
      <p>{dayjs(values.calendar).format('DD/MM/YYYY')}</p>
    </Form>    
  )}
</Formik>

Calendar - static

<StaticCalendar
        name="calendar"
        start={dayjs().add(0, 'days')}
        availableDays={dayjs().add(2, 'days').toDate()}
      />