diff --git a/lms/public/css/style.css b/lms/public/css/style.css
index eb82e49d..3da8434e 100644
--- a/lms/public/css/style.css
+++ b/lms/public/css/style.css
@@ -2387,6 +2387,7 @@ select {
 	border: 1px solid var(--gray-200) !important;
 	border-radius: var(--border-radius-md) !important;
 	background-color: var(--gray-100) !important;
+	overflow: auto;
 }
 
 .toastui-calendar-panel .toastui-calendar-day-names.toastui-calendar-week {
diff --git a/lms/www/batches/batch.js b/lms/www/batches/batch.js
index 9a71e5e6..1206cb8f 100644
--- a/lms/www/batches/batch.js
+++ b/lms/www/batches/batch.js
@@ -692,6 +692,17 @@ const get_calendar_options = (element, calendar_id) => {
 			},
 		],
 		template: {
+			allday: function (event) {
+				let hide = event.raw.completed ? "" : "hide";
+				return `<div class="calendar-event-time" title="${
+					event.title
+				} - ${frappe.datetime.get_time(
+					event.start.d.d
+				)} - ${frappe.datetime.get_time(event.end.d.d)}">
+						<img class='icon icon-sm pull-right ${hide}' src="/assets/lms/icons/check.svg">
+						<div class="calendar-event-title"> ${event.title} </div>
+					</div>`;
+			},
 			time: function (event) {
 				let hide = event.raw.completed ? "" : "hide";
 				return `<div class="calendar-event-time" title="${
@@ -720,6 +731,7 @@ const create_events = (calendar, events, calendar_id) => {
 			start: `${event.date}T${format_time(event.start_time)}`,
 			end: `${event.date}T${format_time(event.end_time)}`,
 			isAllday: event.start_time ? false : true,
+			category: event.start_time ? "time" : "allday",
 			borderColor: clr,
 			backgroundColor: "var(--fg-color)",
 			customStyle: {
@@ -783,7 +795,7 @@ const add_links_to_events = (calendar) => {
 const scroll_to_date = (calendar, events) => {
 	if (
 		new Date() < new Date(events[0].date) ||
-		new Date() > new Date(events.slice(-1).date)
+		new Date() > new Date(events.slice(-1)[0].date)
 	) {
 		calendar.setDate(new Date(events[0].date));
 	}