#1694-absence-multiple-range-datepicker

[DeClercqJan]

What it should do

• pass in array of arrays. Those arrays contain moment objects

• these ranges can help identify user of ranges that have already been selected (or alternatively, are still free) e.g. for people who want to determine what times they can take holidays so that not all employees take holidays at the same time

• edit April 6: also added isDisabled flag in order to display data that cannot be changed. E.g. case of a request for leave that needs to approved or declined. The reviewer should not be able to change the date, only approve or decline

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• I have read the CONTRIBUTING document.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

How does it look?

To be discussed

making (background)colors variable for every range. Tried but failed by doing:

• styled component: not easy to transform nested scss logic
• inline style passing to component overwrites all subclasses that are added to differantatie display. e.g. the color of "button in-range active" should not be the same as "button already-selected-active-until-date"
• created array of colors at highest level. Same length as array of ranges. Then in Month component, mix and match by way of index of both array. Problem: rerenders of React. One can choose to inject such an array as a fixed thing so that it doesn't rerender

References

• Issue #1694 https://github.com/optiosteam/optios-client/issues/1694