Calendar improvements

pages/calendar/calendar.pixy

@@ -8,5 +8,8 @@ component Calendar(days []*utils.CalendarDay, user *arn.User)
 				.calendar-entries
 					each entry in day.Entries
 						.calendar-entry
-							.calendar-entry-title= entry.Anime.Title.ByUser(user)
+							a.ajax(href=entry.Anime.Link())
-							.calendar-entry-episode= "Ep: " + strconv.Itoa(entry.Episode.Number)
+								.calendar-entry-title= entry.Anime.Title.ByUser(user)
+							.calendar-entry-info
+								.calendar-entry-time.utc-date-absolute(data-date=entry.Episode.AiringDate.Start)
+								.calendar-entry-episode= "Ep: " + strconv.Itoa(entry.Episode.Number)

pages/calendar/calendar.scarlet

@@ -12,21 +12,30 @@
 
 .weekday-name
 	text-align center
+	margin-bottom 1rem
 
 .calendar-entries
 	vertical
 
 .calendar-entry
 	ui-element
-	padding 0.75rem 1rem
+	padding 0.5rem 1rem
 	margin-bottom 0.5rem
 	overflow hidden
 
+.calendar-entry-info
+	horizontal
+
 .calendar-entry-title
 	clip-long-text
 
+.calendar-entry-time
+	opacity 0.85
+	font-size 0.9rem
+	flex 1
+
 .calendar-entry-episode
-	opacity 0.75
+	opacity 0.65
 	text-align right
 	font-size 0.9rem
 

scripts/AnimeNotifier.ts

@@ -8,7 +8,7 @@ import { Analytics } from "./Analytics"
 import { SideBar } from "./SideBar"
 import { InfiniteScroller } from "./InfiniteScroller"
 import { ServiceWorkerManager } from "./ServiceWorkerManager"
-import { displayAiringDate, displayDate } from "./DateView"
+import { displayAiringDate, displayDate, displayTime } from "./DateView"
 import { findAll, delay, canUseWebP, swapElements } from "./Utils"
 import * as actions from "./Actions"
 import { darkTheme } from "./Actions";
@@ -362,6 +362,10 @@ export class AnimeNotifier {
 		for(let element of findAll("utc-date")) {
 			displayDate(element, now)
 		}
+
+		for(let element of findAll("utc-date-absolute")) {
+			displayTime(element, now)
+		}
 	}
 
 	reloadContent(cached?: boolean) {

scripts/DateView.ts

@@ -119,3 +119,18 @@ export function displayDate(element: HTMLElement, now: Date) {
 
 	element.title = dayNames[startDate.getDay()] + " " + startTime
 }
+
+export function displayTime(element: HTMLElement, now: Date) {
+	if(element.dataset.date === "") {
+		element.innerText = ""
+		return
+	}
+
+	let startDate = new Date(element.dataset.date)
+
+	let h = startDate.getHours()
+	let m = startDate.getMinutes()
+	let startTime = (h <= 9 ? "0" + h : h) + ":" + (m <= 9 ? "0" + m : m)
+
+	element.innerText = startTime
+}