ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-13 17:22:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

Color holidays

Browse Source
This commit is contained in:
Chris Kaczor
2024-12-19 15:06:41 +00:00
parent 2c740dd604
commit 532ee37169
2 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
WebDisplay/src/models/calendar/calendar-entry.ts
View File

@@ -3,4 +3,5 @@ export default interface CalendarEntry {
isAllDay: boolean;
start: Date;
end: Date;
isHoliday: boolean;
}

34
WebDisplay/src/pages/kiosk.vue
View File

@@ -77,7 +77,7 @@
loadCalendar();
setInterval(() => currentTime.value = new Date(), 1000);
setInterval(() => (currentTime.value = new Date()), 1000);
setInterval(() => loadCalendar(), 30 * 60 * 1000);
</script>
@@ -182,15 +182,18 @@
class="kiosk-calendar-day-item"
v-for="calendarDay in calendarDays">
<div>
<span class="kiosk-calendar-day-item-number">
{{ format(calendarDay.date, 'dd') }}
</span>
<span class="kiosk-calendar-day-item-name">
{{ format(calendarDay.date, 'EEEE') }}
</span>
<div class="kiosk-calendar-day-item-header">
<span class="kiosk-calendar-day-item-number">
{{ format(calendarDay.date, 'dd') }}
</span>
<span class="kiosk-calendar-day-item-name">
{{ format(calendarDay.date, 'EEEE') }}
</span>
</div>
<ul
class="kiosk-calendar-entry"
v-for="calendarEntry in calendarDay.entries">
v-for="calendarEntry in calendarDay.entries"
:class="calendarEntry.isHoliday ? 'holiday' : ''">
<span>
{{ calendarEntry.summary }}
</span>
@@ -250,7 +253,7 @@
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-rows: repeat(2, 50%);
grid-auto-flow: row;
grid-template-areas:
'kiosk-calendar . .'
@@ -326,11 +329,20 @@
text-align: center;
}
.kiosk-calendar-day-item-header {
display: flex;
align-items: center;
}
.kiosk-calendar-day-item-number {
font-size: 1.25em;
padding-right: 0.5em;
}
.kiosk-calendar-day-item-name {
font-size: 1em;
}
.kiosk-calendar-day-list {
margin-left: 10px;
overflow: auto;
@@ -362,4 +374,8 @@
.normal {
color: #208b20;
}
.holiday {
color: #5e83c7;
}
</style>