{{ getDisplayDay(date) }}
+ {{ alternateDates[`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`] }}
{{ getDisplayMonthTotalAmount(dailyTotalAmounts[day].income, defaultCurrency, '', dailyTotalAmounts[day].incompleteIncome) }}
{{ getDisplayMonthTotalAmount(dailyTotalAmounts[day].expense, defaultCurrency, '', dailyTotalAmounts[day].incompleteExpense) }}
@@ -35,7 +36,7 @@ import { useI18n } from '@/locales/helpers.ts';
import { useUserStore } from '@/stores/user.ts';
import type { TransactionTotalAmount } from '@/stores/transaction.ts';
-import { type TextualYearMonthDay, type WeekDayValue } from '@/core/datetime.ts';
+import type { CalendarAlternateDate, TextualYearMonthDay, WeekDayValue } from '@/core/datetime.ts';
import { INCOMPLETE_AMOUNT_SUFFIX } from '@/consts/numeral.ts';
import { arrangeArrayWithNewStartIndex } from '@/lib/common.ts';
@@ -69,6 +70,7 @@ const {
getAllLongWeekdayNames,
getAllShortWeekdayNames,
getCalendarDayOfMonthFromUnixTime,
+ getCalendarAlternateDates,
formatAmountToLocalizedNumeralsWithCurrency
} = useI18n();
@@ -82,6 +84,28 @@ const dateTime = computed({
set: (value: TextualYearMonthDay | '') => emit('update:modelValue', value)
});
+const alternateDates = computed | undefined>(() => {
+ const yearMonthDay = props.modelValue ? props.modelValue.split('-') : null;
+
+ if (!yearMonthDay || yearMonthDay.length !== 3) {
+ return undefined;
+ }
+
+ const allDates: CalendarAlternateDate[] | undefined = getCalendarAlternateDates({ year: parseInt(yearMonthDay[0]), month1base: parseInt(yearMonthDay[1]) })
+
+ if (!allDates) {
+ return undefined;
+ }
+
+ const ret: Record = {};
+
+ for (const alternateDate of allDates) {
+ ret[`${alternateDate.year}-${alternateDate.month}-${alternateDate.day}`] = alternateDate.displayDate;
+ }
+
+ return ret;
+});
+
function noTransactionInMonthDay(date: Date): boolean {
const dateTime = parseDateTimeFromUnixTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(date), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes()));
return !props.dailyTotalAmounts || !props.dailyTotalAmounts[dateTime.getGregorianCalendarDay()];
@@ -105,7 +129,17 @@ function getDisplayDay(date: Date): string {
justify-content: center;
}
-.transaction-calendar.dp__main .dp__calendar .dp__calendar_row > .dp__calendar_item .transaction-calendar-daily-amounts > span.transaction-calendar-daily-amount {
+.transaction-calendar-alternate-date {
+ margin-top: -3px;
+ opacity: 0.5;
+}
+
+.dp__cell_disabled .transaction-calendar-alternate-date {
+ opacity: 0.8;
+}
+
+.dp__main.transaction-calendar .dp__calendar .dp__calendar_row > .dp__calendar_item .transaction-calendar-daily-amounts > span.transaction-calendar-alternate-date,
+.dp__main.transaction-calendar .dp__calendar .dp__calendar_row > .dp__calendar_item .transaction-calendar-daily-amounts > span.transaction-calendar-daily-amount {
display: block;
width: 100%;
overflow: hidden;
diff --git a/src/components/desktop/DateRangeSelectionDialog.vue b/src/components/desktop/DateRangeSelectionDialog.vue
index 1d492bbf..f5fe0276 100644
--- a/src/components/desktop/DateRangeSelectionDialog.vue
+++ b/src/components/desktop/DateRangeSelectionDialog.vue
@@ -22,6 +22,7 @@
:enable-time-picker="true"
:vertical="true"
:preset-dates="presetRanges"
+ :show-alternate-dates="true"
v-model="dateRange">
diff --git a/src/components/desktop/DateSelect.vue b/src/components/desktop/DateSelect.vue
index aada2374..a7f2edaa 100644
--- a/src/components/desktop/DateSelect.vue
+++ b/src/components/desktop/DateSelect.vue
@@ -16,6 +16,7 @@