|
Lines 759-764
$("#placeBookingModal").on("show.bs.modal", function (e) {
Link Here
|
| 759 |
}); |
759 |
}); |
| 760 |
} |
760 |
} |
| 761 |
|
761 |
|
|
|
762 |
// Add hints for days before the start range and after the end range |
| 763 |
let leadDays = 2; |
| 764 |
let trailDays = 3; |
| 765 |
periodPicker.calendarContainer.addEventListener( |
| 766 |
"mouseover", |
| 767 |
function (e) { |
| 768 |
const target = e.target; |
| 769 |
const startDate = periodPicker.selectedDates[0] |
| 770 |
? dayjs(periodPicker.selectedDates[0]).startOf( |
| 771 |
"day" |
| 772 |
) |
| 773 |
: null; |
| 774 |
|
| 775 |
if (target.classList.contains("flatpickr-day")) { |
| 776 |
const hoverDate = dayjs(target.dateObj).startOf( |
| 777 |
"day" |
| 778 |
); |
| 779 |
let leadStart; |
| 780 |
let leadEnd; |
| 781 |
const trailStart = hoverDate |
| 782 |
.add(0, "day") |
| 783 |
.startOf("day"); |
| 784 |
const trailEnd = hoverDate |
| 785 |
.add(trailDays, "day") |
| 786 |
.startOf("day"); |
| 787 |
|
| 788 |
if (!startDate) { |
| 789 |
leadStart = hoverDate |
| 790 |
.subtract(leadDays, "day") |
| 791 |
.startOf("day"); |
| 792 |
leadEnd = hoverDate |
| 793 |
.subtract(0, "day") |
| 794 |
.startOf("day"); |
| 795 |
} else { |
| 796 |
leadStart = startDate |
| 797 |
.subtract(leadDays, "day") |
| 798 |
.startOf("day"); |
| 799 |
leadEnd = startDate |
| 800 |
.subtract(0, "day") |
| 801 |
.startOf("day"); |
| 802 |
} |
| 803 |
|
| 804 |
periodPicker.calendarContainer |
| 805 |
.querySelectorAll(".flatpickr-day") |
| 806 |
.forEach(function (dayElem) { |
| 807 |
const elemDate = dayjs( |
| 808 |
dayElem.dateObj |
| 809 |
).startOf("day"); |
| 810 |
|
| 811 |
if (elemDate.isSame(leadStart)) { |
| 812 |
dayElem.classList.add("leadRangeStart"); |
| 813 |
} else { |
| 814 |
dayElem.classList.remove( |
| 815 |
"leadRangeStart" |
| 816 |
); |
| 817 |
} |
| 818 |
|
| 819 |
if ( |
| 820 |
elemDate >= leadStart && |
| 821 |
elemDate < leadEnd |
| 822 |
) { |
| 823 |
dayElem.classList.add("leadRange"); |
| 824 |
} else { |
| 825 |
dayElem.classList.remove("leadRange"); |
| 826 |
} |
| 827 |
|
| 828 |
if (elemDate.isSame(leadEnd)) { |
| 829 |
dayElem.classList.add("leadRangeEnd"); |
| 830 |
} else { |
| 831 |
dayElem.classList.remove( |
| 832 |
"leadRangeEnd" |
| 833 |
); |
| 834 |
} |
| 835 |
|
| 836 |
if (elemDate.isSame(trailStart)) { |
| 837 |
dayElem.classList.add( |
| 838 |
"trailRangeStart" |
| 839 |
); |
| 840 |
} else { |
| 841 |
dayElem.classList.remove( |
| 842 |
"trailRangeStart" |
| 843 |
); |
| 844 |
} |
| 845 |
|
| 846 |
if ( |
| 847 |
elemDate > trailStart && |
| 848 |
elemDate <= trailEnd |
| 849 |
) { |
| 850 |
dayElem.classList.add("trailRange"); |
| 851 |
} else { |
| 852 |
dayElem.classList.remove("trailRange"); |
| 853 |
} |
| 854 |
|
| 855 |
if (elemDate.isSame(trailEnd)) { |
| 856 |
dayElem.classList.add("trailRangeEnd"); |
| 857 |
} else { |
| 858 |
dayElem.classList.remove( |
| 859 |
"trailRangeEnd" |
| 860 |
); |
| 861 |
} |
| 862 |
}); |
| 863 |
} |
| 864 |
} |
| 865 |
); |
| 866 |
|
| 762 |
// Enable flatpickr now we have date function populated |
867 |
// Enable flatpickr now we have date function populated |
| 763 |
periodPicker.redraw(); |
868 |
periodPicker.redraw(); |
| 764 |
$("#period_fields :input").prop("disabled", false); |
869 |
$("#period_fields :input").prop("disabled", false); |
| 765 |
- |
|
|