LeoVasanko/calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show holiday name tooltip on the entire day cell.

Browse Source
This commit is contained in:
Leo Vasanko
2025-09-25 07:23:22 -06:00
parent 0859e77b6a
commit 704773dc8a
1 changed files with 2 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/CalendarDay.vue
View File

@@ -48,11 +48,12 @@ const formattedDate = computed(() => {
:style="props.dragging ? 'touch-action:none;' : 'touch-action:pan-y;'" :style="props.dragging ? 'touch-action:none;' : 'touch-action:pan-y;'"
:class="[props.day.monthClass, { today: props.day.isToday, weekend: props.day.isWeekend, firstday: props.day.isFirstDay, selected: props.day.isSelected, holiday: props.day.isHoliday }]" :class="[props.day.monthClass, { today: props.day.isToday, weekend: props.day.isWeekend, firstday: props.day.isFirstDay, selected: props.day.isSelected, holiday: props.day.isHoliday }]"
:data-date="props.day.date" :data-date="props.day.date"
:title="props.day.holiday?.name"
> >
<span class="compact-date">{{ formattedDate }}</span> <span class="compact-date">{{ formattedDate }}</span>
<h1 class="day-number">{{ props.day.displayText }}</h1> <h1 class="day-number">{{ props.day.displayText }}</h1>
<span v-if="props.day.lunarPhase" class="lunar-phase">{{ props.day.lunarPhase }}</span> <span v-if="props.day.lunarPhase" class="lunar-phase">{{ props.day.lunarPhase }}</span>
<div v-if="props.day.holiday" class="holiday-info" dir="auto" :title="props.day.holiday.name"> <div v-if="props.day.holiday" class="holiday-info" dir="auto">
{{ props.day.holiday.name }} {{ props.day.holiday.name }}
</div> </div>
</div> </div>