Merge pull request #702 from pateljannat/timetable-mobile-view

feat: day view for timetable on mobile
frappe · Dec 12, 2023 · ae4aadb · ae4aadb
2 parents 0e2fabf + e5dc2ba
commit ae4aadb
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 20 deletions.
diff --git a/lms/lms/doctype/lms_settings/lms_settings.json b/lms/lms/doctype/lms_settings/lms_settings.json
@@ -16,6 +16,7 @@
   "portal_course_creation",
   "section_break_szgq",
   "send_calendar_invite_for_evaluations",
+  "show_day_view",
   "allow_student_progress",
   "column_break_2",
   "show_dashboard",
@@ -341,12 +342,18 @@
   {
    "fieldname": "column_break_uwsp",
    "fieldtype": "Column Break"
+  },
+  {
+   "default": "0",
+   "fieldname": "show_day_view",
+   "fieldtype": "Check",
+   "label": "Show Day View in Timetable"
   }
  ],
  "index_web_pages_for_search": 1,
  "issingle": 1,
  "links": [],
- "modified": "2023-11-07 11:23:14.257687",
+ "modified": "2023-12-12 10:32:13.638368",
  "modified_by": "Administrator",
  "module": "LMS",
  "name": "LMS Settings",

diff --git a/lms/public/css/style.css b/lms/public/css/style.css
@@ -2443,13 +2443,23 @@ select {
 }
 
 .calendar-legends {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	width: 50%;
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+	width: 75%;
 	margin: 0 auto 1rem;
 }
 
+@media (max-width: 767px) {
+	.calendar-legends {
+		grid-template-columns: repeat(2, 1fr);
+		width: 100%;
+	}
+
+	.legend-item {
+		margin-bottom: 0.5rem;
+	}
+}
+
 .batch-details {
 	width: 50%;
 	margin: 2rem 0;

diff --git a/lms/www/batches/batch.html b/lms/www/batches/batch.html
@@ -641,6 +641,7 @@
 		const allow_future = {{ batch_info.allow_future }};
 		const is_student = "{{ is_student or '' }}";
 		const evaluation_end_date = "{{ batch_info.evaluation_end_date if batch_info.evaluation_end_date else '' }}"
+		const show_day_view = {{ settings.show_day_view }};
 	</script>
 
 	<link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />

diff --git a/lms/www/batches/batch.js b/lms/www/batches/batch.js
@@ -672,7 +672,7 @@ const get_calendar_options = (element, calendar_id) => {
 	const end_time = element.data("end");
 
 	return {
-		defaultView: "week",
+		defaultView: $(window).width() < 768 || show_day_view ? "day" : "week",
 		usageStatistics: false,
 		week: {
 			narrowWeekend: true,
@@ -805,22 +805,42 @@ const scroll_to_date = (calendar, events) => {
 };
 
 const set_calendar_range = (calendar, events) => {
-	let week_start = moment(calendar.getDateRangeStart().d.d);
-	let week_end = moment(calendar.getDateRangeEnd().d.d);
+	let day_view = $(window).width() < 768 || show_day_view ? true : false;
+	if (day_view) {
+		let calendar_date = moment(calendar.getDate().d.d).format(
+			"DD MMMM YYYY"
+		);
+		$(".calendar-range").text(`${calendar_date}`);
 
-	$(".calendar-range").text(
-		`${moment(week_start).format("DD MMMM YYYY")} - ${moment(
-			week_end
-		).format("DD MMMM YYYY")}`
-	);
-
-	if (week_start.diff(moment(events[0].date), "days") <= 0)
-		$("#prev-week").hide();
-	else $("#prev-week").show();
+		if (moment(events[0].date).isSameOrBefore(moment(calendar)))
+			$("#prev-week").hide();
+		else $("#prev-week").show();
 
-	if (week_end.diff(moment(events.slice(-1)[0].date), "days") > 0)
-		$("#next-week").hide();
-	else $("#next-week").show();
+		if (
+			moment(calendar_date).isSameOrAfter(
+				moment(events.slice(-1)[0].date)
+			)
+		)
+			$("#next-week").hide();
+		else $("#next-week").show();
+	} else {
+		let week_start = moment(calendar.getDateRangeStart().d.d);
+		let week_end = moment(calendar.getDateRangeEnd().d.d);
+
+		$(".calendar-range").text(
+			`${moment(week_start).format("DD MMMM YYYY")} - ${moment(
+				week_end
+			).format("DD MMMM YYYY")}`
+		);
+
+		if (week_start.diff(moment(events[0].date), "days") <= 0)
+			$("#prev-week").hide();
+		else $("#prev-week").show();
+
+		if (week_end.diff(moment(events.slice(-1)[0].date), "days") > 0)
+			$("#next-week").hide();
+		else $("#next-week").show();
+	}
 };
 
 const get_background_color = (doctype) => {