playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_picker", props: {
+  label: "Date Picker",
+  picker_id: "disabled_date",
+   selection_type: "month"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerMonthAndYear = (props) => {
+  return (
+    <div>
+      <DatePicker
+          label="Date Picker"
+          pickerId="disabled-date"
+          selectionType="month"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DatePickerMonthAndYear

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md

@@ -0,0 +1 @@
+By default selectType prop is disabled. To activate it set `selectionType` prop in JSX/TSX to `month`. To activate it set `selection_type` prop in a rails file to `month`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import { DatePicker, LabelValue } from '../..'
+
+const DatePickerOnChange = (props) => {
+  const today = new Date()
+  const [dateString, setDateString] = useState(today.toLocaleDateString())
+  const [dateObj, setDateObj] = useState([today])
+
+  const changeHandler = (dateStr, selectedDates) => {
+    setDateString(dateStr)
+    setDateObj(selectedDates)
+  }
+
+  return (
+    <div>
+      <DatePicker
+          defaultDate={dateString}
+          marginBottom="lg"
+          onChange={changeHandler}
+          pickerId="date-picker-onchange"
+          {...props}
+      />
+      <LabelValue
+          label="Date Object"
+          marginBottom="lg"
+          value={dateObj[0] ? dateObj[0].toString() : ''}
+          {...props}
+      />
+      <LabelValue
+          label="Date String"
+          value={dateString}
+          {...props}
+      />
+    </div>
+  )
+}
+export default DatePickerOnChange

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md

@@ -0,0 +1,3 @@
+Your change handler function has access to two arguments: `dateStr` and `selectedDates`.
+
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx

@@ -0,0 +1,43 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import { DatePicker,LabelValue } from '../..'
+
+
+const DatePickerOnClose = (props) => {
+  const today = new Date()
+  const [dateString, setDateString] = useState(today.toLocaleDateString())
+  const [dateObj, setDateObj] = useState([today])
+
+  const handleOnClose = (selectedDates, dateStr) => {
+    setDateString(dateStr)
+    setDateObj(selectedDates)
+  }
+
+
+  return (
+    <div>
+        <DatePicker
+            defaultDate={dateString}
+            enableTime
+            marginBottom="lg"
+            onClose={handleOnClose}
+            pickerId="date-picker-on-close"
+            showTimezone
+            {...props}
+        />
+        <LabelValue
+            label="Date Object"
+            marginBottom="lg"
+            value={dateObj[0] ? dateObj[0].toString() : ''}
+            {...props}
+        />
+        <LabelValue
+            label="Date String"
+            value={dateString}
+            {...props}
+        />
+    </div>
+  )
+}
+
+export default DatePickerOnClose

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md

@@ -0,0 +1,3 @@
+The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
+
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb

@@ -0,0 +1,44 @@
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
+    <%= pb_rails("date_picker", props: {
+      label: "Datepicker (opens on the right)",
+      picker_id: "date-picker-positions1",
+      position: "auto right",
+      scroll_container: ".pb--page--content--main",
+      static_position: false
+    }) %>
+  <% end %>
+<% end %>
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
+    <%= pb_rails("date_picker", props: {
+      label: "Datepicker (opens on the left)",
+      picker_id: "date-picker-positions2",
+      position: "auto left",
+      scroll_container: ".pb--page--content--main",
+      static_position: false
+    }) %>
+  <% end %>
+<% end %>
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
+    <%= pb_rails("date_picker", props: {
+      label: "Datepicker (opens above on the left)",
+      picker_id: "date-picker-positions3",
+      position: "above left",
+      scroll_container: ".pb--page--content--main",
+      static_position: false
+    }) %>
+  <% end %>
+<% end %>
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
+    <%= pb_rails("date_picker", props: {
+      label: "Datepicker (opens below on the right)",
+      picker_id: "date-picker-positions4",
+      position: "below right",
+      scroll_container: ".pb--page--content--main",
+      static_position: false
+    }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import DatePicker from '../_date_picker'
+
+const DatePickerPositions = (props) => (
+  <React.Fragment>
+    <Flex>
+      <FlexItem fixedSize="50%">
+        <DatePicker
+            label="Datepicker (opens on the right)"
+            pickerId="date-picker-positions1"
+            position="auto right"
+            scrollContainer=".pb--page--content--main"
+            staticPosition={false}
+            {...props}
+        />
+      </FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem fixedSize="50%">
+        <DatePicker
+            label="Datepicker (opens on the left)"
+            pickerId="date-picker-positions2"
+            position="auto left"
+            scrollContainer=".pb--page--content--main"
+            staticPosition={false}
+            {...props}
+        />
+      </FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem fixedSize="50%">
+        <DatePicker
+            label="Datepicker (opens above on the left)"
+            pickerId="date-picker-positions3"
+            position="above left"
+            scrollContainer=".pb--page--content--main"
+            staticPosition={false}
+            {...props}
+        />
+      </FlexItem>
+    </Flex>
+    <Flex>
+      <FlexItem fixedSize="50%">
+        <DatePicker
+            label="Datepicker (opens below on the right)"
+            pickerId="date-picker-positions4"
+            position="below right"
+            scrollContainer=".pb--page--content--main"
+            staticPosition={false}
+            {...props}
+        />
+      </FlexItem>
+    </Flex>
+  </React.Fragment>
+)
+
+export default DatePickerPositions

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md

@@ -0,0 +1,9 @@
+Datepicker supports `position` options from [Flatpickr Options Documentation](https://flatpickr.js.org/options/). There are multiple positioning options to choose from.
+
+**Note:** In order for the above prop to work properly, you must also send `staticPosition={false}` to your Datepicker kit instance.
+
+#### Affix Datepicker Upon Scrolling
+
+Upon adding `static={false}` to the date picker, you will notice that the date picker detaches from the input field while scrolling. This is a known Flatpickr nuance. By adding the `scrollContainer` prop, you can tell the date picker which DOM container it should watch for scroll events. In this example, you can see that `scrollContainer=".pb--page--content--main"` is being passed in order to keep the date picker correctly positioned on page scroll.
+
+**Useage:** `scrollContainer: .validQuerySelectorHere`

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("card", props: {id: "position-element", margin_bottom: "md"}) do %>
+  <%= pb_rails("body") do %>👋 Datepicker will position from here based on ID.<% end %>
+<% end %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
+    <%= pb_rails("date_picker", props: {
+      label: "Datepicker (opens on the right)",
+      picker_id: "date-picker-position-element",
+      position: "auto right",
+      position_element: "#position-element",
+      scroll_container: ".pb--page--content--main",
+      static_position: false
+    }) %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("card", props: {classname: "position-element", margin_bottom: "md"}) do %>
+  <%= pb_rails("body") do %>👋 Datepicker will position from here based on class name.<% end %>
+<% end %>
+
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "50%"}) do %>
+    <%= pb_rails("date_picker", props: {
+      label: "Datepicker (opens on the right)",
+      picker_id: "date-picker-position-element2",
+      position: "auto right",
+      position_element: ".position-element",
+      scroll_container: ".pb--page--content--main",
+      static_position: false
+    }) %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx

@@ -0,0 +1,67 @@
+import React, { useRef, useEffect, useState } from 'react'
+
+import Card from '../../pb_card/_card'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import DatePicker from '../_date_picker'
+
+const DatePickerPositionsElement = (props) => {
+  const cardRefTop = useRef(null),
+        cardRefBtm = useRef(null)
+
+  const [cardTop, setCardTop] = useState()
+  const [cardBtm, setCardBtm] = useState()
+
+  useEffect(() => {
+    setCardTop(cardRefTop.current)
+    setCardBtm(cardRefBtm.current)
+  }, [cardTop, cardBtm])
+
+  return (
+    <React.Fragment>
+      <div ref={cardRefTop}>
+        <Card
+            marginBottom="md"
+        >
+          {'👋 Datepicker will position from here based on ID.'}
+        </Card>
+      </div>
+      <Flex>
+        <FlexItem fixedSize="50%">
+          <DatePicker
+              label="Datepicker (opens on the right)"
+              pickerId="date-picker-position-element"
+              position="auto right"
+              positionElement={cardTop}
+              scrollContainer=".pb--page--content--main"
+              staticPosition={false}
+              {...props}
+          />
+        </FlexItem>
+      </Flex>
+
+      <div ref={cardRefBtm}>
+        <Card
+            marginBottom="md"
+        >
+            {'👋 Datepicker will position from here based on class name.'}
+        </Card>
+      </div>
+      <Flex>
+        <FlexItem fixedSize="50%">
+          <DatePicker
+              label="Datepicker (opens on the right)"
+              pickerId="date-picker-position-element2"
+              position="auto right"
+              positionElement={cardBtm}
+              scrollContainer=".pb--page--content--main"
+              staticPosition={false}
+              {...props}
+          />
+        </FlexItem>
+      </Flex>
+    </React.Fragment>
+  )
+}
+
+export default DatePickerPositionsElement

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_picker", props: {
+  default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
+  mode: "range",
+  picker_id: "date-picker-range"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerRange = (props) => (
+  <div>
+    <DatePicker
+        defaultDate={[new Date(), new Date().fp_incr(7)]}
+        mode="range"
+        pickerId="date-picker-range"
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerRange

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("date_picker", props: {
+  default_date: DateTime.now.utc.iso8601,
+  picker_id: "date-picker-time",
+  enable_time: true,
+  show_timezone: true
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.jsx

@@ -0,0 +1,38 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useMemo, useState } from 'react'
+
+import DatePicker from '../_date_picker'
+import Body from '../../pb_body/_body'
+
+const DEFAULT_DATE = new Date()
+DEFAULT_DATE.setHours(12)
+DEFAULT_DATE.setMinutes(0)
+
+const DatePickerTime = (props) => {
+  const [selectedDateTime, setSelectedDateTime] = useState(DEFAULT_DATE)
+
+  const refExample = React.createRef()
+
+  const handleOnInputChanged = (dateTime) => {
+    setSelectedDateTime(dateTime)
+  }
+
+  return (
+    <div ref={refExample}>
+      <Body marginBottom="md">{selectedDateTime.toString()}</Body>
+      {useMemo(() => (
+        <DatePicker
+            closeOnSelect={false}
+            defaultDate={DEFAULT_DATE}
+            enableTime
+            onChange={handleOnInputChanged}
+            pickerId="date-picker-time"
+            showTimezone
+            {...props}
+        />
+      ), [props])}
+    </div>
+  )
+}
+
+export default DatePickerTime

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.md

@@ -0,0 +1 @@
+To select time as well, you should pass the `enableTime` boolean prop. You can also enable timezone display by passing `showTimezone`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("date_picker", props: {
+  label: "Date Picker",
+  picker_id: "week_date_picker",
+  selection_type: "week"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerWeek = (props) => {
+  return (
+    <div>
+      <DatePicker
+          label="Date Picker"
+          pickerId="week-date-picker" 
+          selectionType="week"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default DatePickerWeek

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.md

@@ -0,0 +1 @@
+By default selectType prop is disabled. To activate it set `selectionType` prop in JSX/TSX to `week`. To activate it set `selection_type` prop in a rails file to `week`.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("date_picker", props: {
+  default_date: "05/05/2015",
+  max_date: "12/31/2018",
+  min_date: "01/01/2015",
+  picker_id: "date-picker-year-range",
+  year_range: [2015, 2018]
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import DatePicker from '../_date_picker'
+
+const DatePickerYearRange = (props) => (
+  <div>
+    <DatePicker
+        defaultDate="05/05/2015"
+        maxDate="12/31/2018"
+        minDate="01/01/2015"
+        pickerId="date-picker-year-range"
+        yearRange={[2015, 2018]}
+        {...props}
+    />
+  </div>
+)
+
+export default DatePickerYearRange

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.md

@@ -0,0 +1 @@
+Defaults to `[1900, 2100]`.  Combine with min-max prop for best results.

data/app/pb_kits/playbook/pb_date_picker/docs/_description.md

@@ -0,0 +1,9 @@
+Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a vanilla js library.  Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.  You can implement additional features and functionality by accessing a flatpickr instance directly (demonstrated in the 'flatpickr methods' example below).  This is done with the following code.
+
+`const fpInstance = document.querySelector('#pickerId')._flatpickr`
+
+`pickerId` is a prop passed to the date picker kit.  Flatpickr uses this id to target an input and attach a flatpickr instance to that input.
+
+To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.
+
+The Date Picker works best with Javascript Date Objects or ISO Date strings.  If you're programming in js use Date Objects.  If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string.  For example, `DateTime.now.utc.iso8601`.  This ensures that the string passed to the Date Picker kit behaves as expected.

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -0,0 +1,48 @@
+examples:
+
+  rails:
+  - date_picker_default: Default
+  - date_picker_hide_icon: Hide Input Icon
+  - date_picker_default_date: Default Date
+  - date_picker_allow_input: Allow Input
+  - date_picker_input: Input Field
+  - date_picker_label: Label
+  - date_picker_range: Range
+  - date_picker_format: Format
+  - date_picker_disabled: Disabled Dates
+  - date_picker_min_max: Min Max
+  - date_picker_error: Error
+  - date_picker_flatpickr_methods: Flatpickr Methods
+  - date_picker_hooks: Hooks
+  - date_picker_year_range: Year Range
+  - date_picker_anti_patterns: Anti-Patterns
+  - date_picker_inline: Inline
+  - date_picker_month_and_year: Month & Year Only
+  - date_picker_week: Week
+  - date_picker_time: Time Selection
+  - date_picker_positions: Custom Positions
+  - date_picker_positions_element: Custom Position (based on element)
+
+  react:
+  - date_picker_default: Default
+  - date_picker_hide_icon: Hide Input Icon
+  - date_picker_default_date: Default Date
+  - date_picker_allow_input: Allow Input
+  - date_picker_input: Input Field
+  - date_picker_label: Label
+  - date_picker_on_change: onChange
+  - date_picker_on_close: onClose
+  - date_picker_range: Range
+  - date_picker_format: Format
+  - date_picker_disabled: Disabled Dates
+  - date_picker_min_max: Min Max
+  - date_picker_error: Error
+  - date_picker_flatpickr_methods: Flatpickr Methods
+  - date_picker_hooks: Hooks
+  - date_picker_year_range: Year Range
+  - date_picker_inline: Inline
+  - date_picker_month_and_year: Month & Year Only
+  - date_picker_week: Week
+  - date_picker_time: Time Selection
+  - date_picker_positions: Custom Positions
+  - date_picker_positions_element: Custom Position (based on element)

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -0,0 +1,22 @@
+export { default as DatePickerDefault } from './_date_picker_default.jsx'
+export { default as DatePickerHideIcon } from './_date_picker_hide_icon.jsx'
+export { default as DatePickerInput } from './_date_picker_input.jsx'
+export { default as DatePickerDefaultDate } from './_date_picker_default_date.jsx'
+export { default as DatePickerLabel } from './_date_picker_label.jsx'
+export { default as DatePickerOnChange } from './_date_picker_on_change.jsx'
+export { default as DatePickerRange } from './_date_picker_range.jsx'
+export { default as DatePickerFormat } from './_date_picker_format.jsx'
+export { default as DatePickerDisabled } from './_date_picker_disabled.jsx'
+export { default as DatePickerMinMax } from './_date_picker_min_max.jsx'
+export { default as DatePickerError } from './_date_picker_error.jsx'
+export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
+export { default as DatePickerFlatpickrMethods } from './_date_picker_flatpickr_methods.jsx'
+export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
+export { default as DatePickerInline } from './_date_picker_inline.jsx'
+export { default as DatePickerMonthAndYear } from './_date_picker_month_and_year.jsx'
+export { default as DatePickerTime } from './_date_picker_time.jsx'
+export { default as DatePickerWeek } from './_date_picker_week.jsx'
+export { default as DatePickerPositions } from './_date_picker_positions.jsx'
+export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
+export { default as DatePickerAllowInput } from './_date_picker_allow_input'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss

@@ -0,0 +1,33 @@
+// Calendar Icon Styles
+.cal_icon_wrapper {
+  pointer-events: none;
+  position: absolute;
+  top: $space_md + 2;
+  right: 0;
+  border-left: 1px solid $border_light;
+  width: $space_xl + $space_xs;
+  height: $space_xl + 5;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-left: $space_sm - 1;
+  color: $text_lt_light;
+  @media (hover: hover) {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+  &.dark {
+    color: $white;
+    border-color: $border_dark;
+  }
+  &.no_label_shift {
+    top: 0;
+  }
+  &.error {
+    border-left-color: $error;
+  }
+}
+.cal_icon {
+  width: $space_sm;
+}

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss

@@ -0,0 +1,78 @@
+// Day and Range Styles
+.flatpickr-day {
+  user-select: none;
+  @media (hover: hover) {
+    &:hover {
+      transition-duration: $transition_short;
+      transition-timing-function: $easeIn;
+      background-color: #F6FAFF;
+      border-color: #F6FAFF;
+      box-shadow: $shadow_deep;
+    }
+  }
+}
+.flatpickr-day.today {
+  border: none;
+  font-weight: $bold;
+  color: $charcoal;
+  &.selected {
+    color: $text_dk_default;
+  }
+}
+.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
+  border-radius: $space_xl + 10;
+  background-color: $primary;
+  border-color: $primary;
+  box-shadow: $shadow_deep;
+  font-weight: $bold;
+}
+.flatpickr-day.startRange {
+  box-shadow: $space_sm + 1 0 0 #F7FBFF
+}
+.flatpickr-day.endRange {
+  box-shadow: -$space_sm 0 0 #F7FBFF
+}
+.flatpickr-day.inRange {
+  background-color: #F7FBFF;
+  border-color: transparent;
+  box-shadow: -$space_xs + 4 0 0 #F7FBFF, $space_xs - 3 0 0 #F7FBFF;
+}
+/*
+Plugin author didn't consider providing a class context, so
+instead we have to use the id! ¯\_(ツ)_/¯
+*/
+#cal-week-date-picker {
+  .flatpickr-day.inRange:not(.selected) {
+    &:nth-of-type(1),
+    &:nth-of-type(7n+1) {
+      border-radius: 30px 0 0 30px;
+    }
+    &:nth-of-type(7n) {
+      border-radius: 0 30px 30px 0;
+    }
+  }
+  .flatpickr-day.inRange {
+    &.selected {
+      background-color: $primary;
+      box-shadow: none;
+      color: #ffffff;
+    }
+  }
+  .flatpickr-day.selected:hover {
+    transition: none;
+  }
+}
+.flatpickr-innerContainer {
+  overflow: visible;
+}
+.flatpickr-days {
+  overflow: visible;
+}
+// Weekday Styling
+div.flatpickr-weekdays {
+  margin-top: $space_xs;
+}
+span.flatpickr-weekday {
+  @include caption;
+  user-select: none;
+}