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; isAllDay: boolean;
start: Date; start: Date;
end: Date; end: Date;
isHoliday: boolean;
} }

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

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