Skip to content

Instantly share code, notes, and snippets.

@amr3k
Created October 9, 2022 08:39
Show Gist options
  • Save amr3k/759f3d2e2f6b66521af56583f9121f3f to your computer and use it in GitHub Desktop.
Save amr3k/759f3d2e2f6b66521af56583f9121f3f to your computer and use it in GitHub Desktop.
Flatpickr RTL
.flatpickr-calendar .dayContainer,
.flatpickr-calendar .flatpickr-weekdaycontainer {
flex-direction: row-reverse;
}
.flatpickr-month {
height: 32px;
}
.flatpickr-prev-month {
left: auto !important;
right: 0;
width: fit-content;
transform: scaleX(-1);
}
.flatpickr-next-month {
right: unset;
left: 0;
width: fit-content;
transform: scaleX(-1);
}
.flatpickr-day .selected.startRange,
.startRange.startRange,
.endRange.startRange {
border-radius: 0 50px 50px 0;
}
.flatpickr-day .selected.endRange,
.flatpickr-day .startRange.endRange,
.flatpickr-day .endRange.endRange {
border-radius: 50px 0 0 50px;
}
.flatpickr-day .selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day .startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day .endRange.startRange + .endRange:not(:nth-child(7n+1)) {
box-shadow: 10px 0 0 #569ff7;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment