lv plan range view styling

public/css/components/calendar/frame.css

@@ -104,6 +104,13 @@
 .fhc-calendar-base-grid-line {
 	grid-gap: var(--fhc-calendar-gap-events, var(--fhc-calendar-gap, 1px));
 }
+.fhc-calendar-mode-range .main-header-sunday,
+.fhc-calendar-mode-range .all-day-events-sunday,
+.fhc-calendar-mode-range .fhc-calendar-base-grid-line-sunday {
+	border: solid;
+	border-width: 0 0 8px 0;
+	border-color: var(--fhc-calendar-gap);
+}
 .fhc-calendar-base-label-time {
 	display: flex;
 	flex-direction: column;

public/js/components/Calendar/Base/Grid.js

@@ -328,7 +328,10 @@ export default {
 				v-for="(date, index) in axisMain"
 				:key="index"
 				class="main-header"
-				:class="{'collapsed-header': axisMainCollapsible && hasValidEvents && !events[index].length}"
+				:class="{
+					'collapsed-header': axisMainCollapsible && hasValidEvents && !events[index].length,
+					'main-header-sunday': date.weekday === 7
+				}"
 				:style="'grid-' + axisCol + ':' + (2+index)"
 			>
 				<slot name="main-header" v-bind="{ index, date }" />
@@ -344,6 +347,7 @@ export default {
 				v-for="(events, index) in eventsAllDay"
 				:key="index"
 				class="all-day-events"
+				:class="{'all-day-events-sunday': axisMain[index].weekday === 7}"
 				:style="'grid-' + axisCol + ':' + (2+index)"
 			>
 				<grid-line-event
@@ -373,7 +377,7 @@ export default {
 					v-for="(part, index) in axisPartsSave"
 					:key="index"
 					class="part-header"
-					:style="'grid-' + axisCol + ':1;grid-' + axisRow + ': ps_' + index + '/pe_' + index"
+					:style="'grid-' + axisCol + ':1;grid-' + axisRow + ': ps_' + index + '/pe_' + index + ';min-width:50px;'"
 				>
 					<slot name="part-header" v-bind="{ index, part }" />
 				</div>

public/js/components/Calendar/Base/Grid/Line.js

@@ -123,6 +123,7 @@ export default {
 	template: /* html */ `
 	<div
 		class="fhc-calendar-base-grid-line"
+		:class="{'fhc-calendar-base-grid-line-sunday': $props.date.weekday === 7}"
 		style="position:relative;display:grid;grid-auto-flow:dense"
 		:style="'grid-template-' + axisRow + 's:subgrid'"
 	>

public/js/components/Calendar/LvPlan.js

@@ -16,7 +16,14 @@ export default {
 	components: {
 		FhcCalendar
 	},
-	inject: ["isMobile"],
+	inject: {
+		isMobile: {
+			default: false,
+		},
+		rangeLength: {
+			default: 30,
+		}
+	},
 	props: {
 		date: {
 			type: [Date, String, Number, luxon.DateTime],
@@ -69,21 +76,43 @@ export default {
 		backgrounds() {
 			let now = luxon.DateTime.now().setZone(this.timezone);
 
-			if (this.mode == 'Month')
+			if (this.mode == 'Month') {
 				return [
 					{
 						class: 'background-past',
 						end: now.startOf('day')
 					}
 				];
+			} else if (this.mode == 'Range') {
+				return [];
+				const start = luxon.DateTime.fromISO(this.$props.date);
+				const end = start.plus({days: this.rangeLength});
+				let backgrounds = [];
 
-			return [
-				{
-					class: 'background-past',
-					end: now,
-					label: now.startOf('minute').toISOTime({ suppressSeconds: true, includeOffset: false })
+				let saturdayOffset = 6 - start.weekday;
+				let saturday = start.plus({days: saturdayOffset});
+				while (saturday.ts < end.ts) {
+					backgrounds.push(
+						{
+							class: "background-weekend",
+							start: saturday.startOf("day"),
+							end: saturday.plus({days: 1}).endOf("day"),
+						}
+					);
+
+					saturday = saturday.plus({days: 7});
 				}
-			];
+
+				return backgrounds;
+			} else {
+				return [
+					{
+						class: 'background-past',
+						end: now,
+						label: now.startOf('minute').toISOTime({ suppressSeconds: true, includeOffset: false })
+					}
+				];
+			}
 		},
 		modes() {
 			let modes = {

public/js/components/Calendar/Mode/Range.js

@@ -87,7 +87,7 @@ export default {
 	},
 	template: /*html*/ `
 	<div
-		class="fhc-calendar-mode-range flex-grow-1 position-relative"
+		class="fhc-calendar-mode-range flex-grow-1 position-relative d-flex flex-column"
 		@cal-click-default.capture="handleClickDefaults"
 	>
 		<div
@@ -109,7 +109,7 @@ export default {
 				</option>
 			</form-input>
 		</div>
-		<base-slider ref="slider" v-slot="slot">
+		<base-slider ref="slider" v-slot="slot" class="flex-grow-1">
 			<range-view ref="view" v-bind="viewAttrs()">
 				<template v-slot="slot"><slot v-bind="slot" mode="range" /></template>
 			</range-view>

public/js/components/Cis/LvPlan/MyLvPlan.js

@@ -33,7 +33,11 @@ export default {
 	inject: ["isMobile"],
 	provide() {
 		return { 
-			rangeLength: Vue.computed(() => this.$route.params.range_length || 30),
+			rangeLength: Vue.computed(() => {
+				if (!this.$route.params.range_length) return 30;
+				else if (this.$route.params.range_length > 365) return 365;
+				else return this.$route.params.range_length;
+			}),
 			rangeViewPresets: Vue.computed(() => this.semesterRangePresets)
 		};
 	},