Attachment #170592 for bug #34440

View | Details | Raw Unified | Return to bug 34440
Collapse All | Expand All




    }
}

$dayLeadBackground: #fad2cf !default;
$dayTrailBackground: #fcdcb3 !default;
.flatpickr-day {

    &.leadRangeStart {
        border-radius: 50px 0 0 50px;
    }

    &.leadRange {
        box-shadow: -2.5 * $dayMargin 0 0 $dayLeadBackground, 2.5 * $dayMargin 0 0 $dayLeadBackground;
        background: $dayLeadBackground;
    }

    &.selected {
       &.leadRangeEnd {
           border-radius: 0;
       }
    }

    &:hover,
    &.selected {
        &.trailRangeStart {
            border-radius: 0;
        }
    }

    &.trailRange {
        box-shadow: -2.5 * $dayMargin 0 0 $dayTrailBackground, 2.5 * $dayMargin 0 0 $dayTrailBackground;
        background: $dayTrailBackground;
    }

    &.trailRangeEnd {
        border-radius: 0 50px 50px 0;
    }
}

.input-warning {
    background-color: #FF9;
    border-color: #900;




                    });
                }

                // Add hints for days before the start range and after the end range
                let leadDays = 2;
                let trailDays = 3;
                periodPicker.calendarContainer.addEventListener(
                    "mouseover",
                    function (e) {
                        const target = e.target;
                        const startDate = periodPicker.selectedDates[0]
                            ? dayjs(periodPicker.selectedDates[0]).startOf(
                                  "day"
                              )
                            : null;

                        if (target.classList.contains("flatpickr-day")) {
                            const hoverDate = dayjs(target.dateObj).startOf(
                                "day"
                            );
                            let leadStart;
                            let leadEnd;
                            const trailStart = hoverDate
                                .add(0, "day")
                                .startOf("day");
                            const trailEnd = hoverDate
                                .add(trailDays, "day")
                                .startOf("day");

                            if (!startDate) {
                                leadStart = hoverDate
                                    .subtract(leadDays, "day")
                                    .startOf("day");
                                leadEnd = hoverDate
                                    .subtract(0, "day")
                                    .startOf("day");
                            } else {
                                leadStart = startDate
                                    .subtract(leadDays, "day")
                                    .startOf("day");
                                leadEnd = startDate
                                    .subtract(0, "day")
                                    .startOf("day");
                            }

                            periodPicker.calendarContainer
                                .querySelectorAll(".flatpickr-day")
                                .forEach(function (dayElem) {
                                    const elemDate = dayjs(
                                        dayElem.dateObj
                                    ).startOf("day");

                                    if (elemDate.isSame(leadStart)) {
                                        dayElem.classList.add("leadRangeStart");
                                    } else {
                                        dayElem.classList.remove(
                                            "leadRangeStart"
                                        );
                                    }

                                    if (
                                        elemDate >= leadStart &&
                                        elemDate < leadEnd
                                    ) {
                                        dayElem.classList.add("leadRange");
                                    } else {
                                        dayElem.classList.remove("leadRange");
                                    }

                                    if (elemDate.isSame(leadEnd)) {
                                        dayElem.classList.add("leadRangeEnd");
                                    } else {
                                        dayElem.classList.remove(
                                            "leadRangeEnd"
                                        );
                                    }

                                    if (elemDate.isSame(trailStart)) {
                                        dayElem.classList.add(
                                            "trailRangeStart"
                                        );
                                    } else {
                                        dayElem.classList.remove(
                                            "trailRangeStart"
                                        );
                                    }

                                    if (
                                        elemDate > trailStart &&
                                        elemDate <= trailEnd
                                    ) {
                                        dayElem.classList.add("trailRange");
                                    } else {
                                        dayElem.classList.remove("trailRange");
                                    }

                                    if (elemDate.isSame(trailEnd)) {
                                        dayElem.classList.add("trailRangeEnd");
                                    } else {
                                        dayElem.classList.remove(
                                            "trailRangeEnd"
                                        );
                                    }
                                });
                        }
                    }
                );

                // Enable flatpickr now we have date function populated
                periodPicker.redraw();
                $("#period_fields :input").prop("disabled", false);
- 

Return to bug 34440

Lines 827-832 input { Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss (+36 lines)
827	}	827	}
828	}	828	}
829		829
		830	$dayLeadBackground: #fad2cf !default;
		831	$dayTrailBackground: #fcdcb3 !default;
		832	.flatpickr-day {
		833
		834	&.leadRangeStart {
		835	border-radius: 50px 0 0 50px;
		836	}
		837
		838	&.leadRange {
		839	box-shadow: -2.5 * $dayMargin 0 0 $dayLeadBackground, 2.5 * $dayMargin 0 0 $dayLeadBackground;
		840	background: $dayLeadBackground;
		841	}
		842
		843	&.selected {
		844	&.leadRangeEnd {
		845	border-radius: 0;
		846	}
		847	}
		848
		849	&:hover,
		850	&.selected {
		851	&.trailRangeStart {
		852	border-radius: 0;
		853	}
		854	}
		855
		856	&.trailRange {
		857	box-shadow: -2.5 * $dayMargin 0 0 $dayTrailBackground, 2.5 * $dayMargin 0 0 $dayTrailBackground;
		858	background: $dayTrailBackground;
		859	}
		860
		861	&.trailRangeEnd {
		862	border-radius: 0 50px 50px 0;
		863	}
		864	}
		865
830	.input-warning {	866	.input-warning {
831	background-color: #FF9;	867	background-color: #FF9;
832	border-color: #900;	868	border-color: #900;

Lines 759-764 $("#placeBookingModal").on("show.bs.modal", function (e) { Link Here

(-)a/koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js (-1 / +105 lines)
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	-