update

wp-content/plugins/yacht-booking-system/frontend/assets/js/calendar.js

@@ -22,8 +22,14 @@
 			}
 			return color;
 		};
-		const availableBg = normalizeColor($wrapper.data('available-bg'), '#35b56a', '#d4edda');
-		const bookedBg = normalizeColor($wrapper.data('booked-bg'), '#e53935', '#f8d7da');
+		const availableBg = normalizeColor($wrapper.data('available-bg'), '#f5f9ff', '#d4edda');
+		const bookedBg = normalizeColor($wrapper.data('booked-bg'), '#bc1834', '#f8d7da');
+
+		// Expose colors as CSS custom properties so half-day gradients can read them.
+		$wrapper.css({
+			'--yacht-available-bg': availableBg,
+			'--yacht-booked-bg': bookedBg
+		});
 		const yachtItems = yachtsData ? JSON.parse(yachtsData) : [];
 		const yachtMap = {};
 		const state = {
@@ -165,16 +171,58 @@
 						end: endDate
 					},
 					success: function(data) {
+						// Index by date so we can probe neighbours for edge detection.
+						const byDate = {};
+						data.forEach(function(day) {
+							byDate[day.date] = day;
+						});
+
+						function shiftDate(dateString, deltaDays) {
+							const d = new Date(dateString + 'T00:00:00');
+							d.setDate(d.getDate() + deltaDays);
+							return formatDate(d);
+						}
+
+						function sameSegment(a, b) {
+							if (!a || !b) return false;
+							if (a.status !== b.status) return false;
+							// Different bookings (or booking vs blocked) break the segment.
+							const aId = a.booking_id || null;
+							const bId = b.booking_id || null;
+							return aId === bId;
+						}
+
 						const events = data.map(function(day) {
+							const status = day.status;
+							const classes = ['yacht-day-' + status];
+
+							if (status !== 'available') {
+								const prev = byDate[shiftDate(day.date, -1)];
+								const next = byDate[shiftDate(day.date, +1)];
+								const isStart = !sameSegment(day, prev);
+								const isEnd = !sameSegment(day, next);
+
+								if (isStart && isEnd) {
+									// Single-day blockade — render as full booked, no half.
+									classes.push('yacht-day-' + status + '-single');
+								} else if (isStart) {
+									classes.push('yacht-day-' + status + '-start');
+								} else if (isEnd) {
+									classes.push('yacht-day-' + status + '-end');
+								} else {
+									classes.push('yacht-day-' + status + '-mid');
+								}
+							}
+
 							return {
 								id: day.date,
 								start: day.date,
 								allDay: true,
 								display: 'background',
-								backgroundColor: day.status === 'available' ? availableBg : bookedBg,
-								classNames: ['yacht-day-' + day.status],
+								backgroundColor: status === 'available' ? availableBg : bookedBg,
+								classNames: classes,
 								extendedProps: {
-									status: day.status,
+									status: status,
 									booking_id: day.booking_id || null
 								}
 							};