only months can be selected in transaction calendar mode

src/views/base/transactions/TransactionListPageBase.ts

@@ -27,12 +27,14 @@ import {
     getLocalDatetimeFromUnixTime,
     getActualUnixTimeForStore,
     getDummyUnixTimeForLocalUsage,
+    getCurrentYearAndMonth,
     parseDateFromUnixTime,
-    getUnixTime,
+    getYearAndMonth,
     getYear,
     getMonth,
-    getDay,
     getYearMonthFirstUnixTime,
+    getDay,
+    getUnixTime,
     isDateRangeMatchOneMonth
 } from '@/lib/datetime.ts';
 
@@ -171,6 +173,14 @@ export function useTransactionListPageBase() {
     const queryMinTime = computed<string>(() => formatUnixTimeToLongDateTime(query.value.minTime));
     const queryMaxTime = computed<string>(() => formatUnixTimeToLongDateTime(query.value.maxTime));
     const queryMonthlyData = computed<boolean>(() => isDateRangeMatchOneMonth(query.value.minTime, query.value.maxTime));
+    const queryMonth = computed<string>(() => {
+        if (!query.value.minTime || !query.value.maxTime) {
+            return getCurrentYearAndMonth();
+        }
+
+        return getYearAndMonth(parseDateFromUnixTime(query.value.minTime));
+    });
+
     const queryAllFilterCategoryIds = computed<Record<string, boolean>>(() => transactionsStore.allFilterCategoryIds);
     const queryAllFilterAccountIds = computed<Record<string, boolean>>(() => transactionsStore.allFilterAccountIds);
     const queryAllFilterTagIds = computed<Record<string, boolean>>(() => transactionsStore.allFilterTagIds);
@@ -373,6 +383,7 @@ export function useTransactionListPageBase() {
         queryMinTime,
         queryMaxTime,
         queryMonthlyData,
+        queryMonth,
         queryAllFilterCategoryIds,
         queryAllFilterAccountIds,
         queryAllFilterTagIds,

src/views/desktop/transactions/ListPage.vue

@@ -603,6 +603,13 @@
                                  v-model:show="showCustomDateRangeDialog"
                                  @dateRange:change="changeCustomDateFilter"
                                  @error="onShowDateRangeError" />
+
+    <month-selection-dialog :title="tt('Custom Date Range')"
+                            :model-value="queryMonth"
+                            v-model:show="showCustomMonthDialog"
+                            @update:modelValue="changeCustomMonthDateFilter"
+                            @error="onShowDateRangeError" />
+
     <edit-dialog ref="editDialog" :type="TransactionEditPageType.Transaction" />
     <import-dialog ref="importDialog" :persistent="true" />
 
@@ -678,9 +685,11 @@ import {
     parseDateFromUnixTime,
     getYear,
     getMonth,
-    getSpecifiedDayFirstUnixTime,
     getBrowserTimezoneOffsetMinutes,
     getActualUnixTimeForStore,
+    getSpecifiedDayFirstUnixTime,
+    getYearMonthFirstUnixTime,
+    getYearMonthLastUnixTime,
     getShiftedDateRangeAndDateType,
     getShiftedDateRangeAndDateTypeForBillingCycle,
     getDateTypeByDateRange,
@@ -787,6 +796,7 @@ const {
     queryMinTime,
     queryMaxTime,
     queryMonthlyData,
+    queryMonth,
     queryAllFilterCategoryIds,
     queryAllFilterAccountIds,
     queryAllFilterTagIds,
@@ -851,6 +861,7 @@ const amountMenuState = ref<boolean>(false);
 const alwaysShowNav = ref<boolean>(display.mdAndUp.value);
 const showNav = ref<boolean>(display.mdAndUp.value);
 const showCustomDateRangeDialog = ref<boolean>(false);
+const showCustomMonthDialog = ref<boolean>(false);
 const showFilterAccountDialog = ref<boolean>(false);
 const showFilterCategoryDialog = ref<boolean>(false);
 const showFilterTagDialog = ref<boolean>(false);
@@ -1236,7 +1247,12 @@ function changeDateFilter(dateRange: TimeRangeAndDateType | number | null): void
             customMinDatetime.value = query.value.minTime;
         }
 
-        showCustomDateRangeDialog.value = true;
+        if (pageType.value === TransactionListPageType.Calendar.type) {
+            showCustomMonthDialog.value = true;
+        } else {
+            showCustomDateRangeDialog.value = true;
+        }
+
         return;
     }
 
@@ -1313,6 +1329,34 @@ function changeCustomDateFilter(minTime: number, maxTime: number): void {
     updateUrlWhenChanged(changed);
 }
 
+function changeCustomMonthDateFilter(yearMonth: string): void {
+    if (!yearMonth) {
+        return;
+    }
+
+    const minTime = getYearMonthFirstUnixTime(yearMonth);
+    const maxTime = getYearMonthLastUnixTime(yearMonth);
+    const dateType = getDateTypeByDateRange(minTime, maxTime, firstDayOfWeek.value, DateRangeScene.Normal);
+
+    if (pageType.value === TransactionListPageType.Calendar.type) {
+        currentCalendarDate.value = getMonthFirstDayOrCurrentDayShortDate(minTime);
+    }
+
+    if (query.value.dateType === dateType && query.value.maxTime === maxTime && query.value.minTime === minTime) {
+        showCustomMonthDialog.value = false;
+        return;
+    }
+
+    const changed = transactionsStore.updateTransactionListFilter({
+        dateType: dateType,
+        maxTime: maxTime,
+        minTime: minTime
+    });
+
+    showCustomMonthDialog.value = false;
+    updateUrlWhenChanged(changed);
+}
+
 function shiftDateRange(startTime: number, endTime: number, scale: number): void {
     if (pageType.value === TransactionListPageType.List.type && recentDateRangeIndex.value === 0) { // first item is "All"
         return;

src/views/mobile/transactions/ListPage.vue

@@ -342,6 +342,12 @@
                                     @dateRange:change="changeCustomDateFilter">
         </date-range-selection-sheet>
 
+        <month-selection-sheet :title="tt('Custom Date Range')"
+                               :model-value="queryMonth"
+                               v-model:show="showCustomMonthSheet"
+                               @update:modelValue="changeCustomMonthDateFilter">
+        </month-selection-sheet>
+
         <f7-popover class="category-popover-menu"
                     v-model:opened="showCategoryPopover"
                     @popover:open="onPopoverOpen">
@@ -603,9 +609,13 @@ import {
 import {
     getCurrentUnixTime,
     parseDateFromUnixTime,
-    getSpecifiedDayFirstUnixTime,
     getBrowserTimezoneOffsetMinutes,
     getActualUnixTimeForStore,
+    getYear,
+    getMonth,
+    getSpecifiedDayFirstUnixTime,
+    getYearMonthFirstUnixTime,
+    getYearMonthLastUnixTime,
     getShiftedDateRangeAndDateType,
     getShiftedDateRangeAndDateTypeForBillingCycle,
     getDateTypeByDateRange,
@@ -613,7 +623,7 @@ import {
     getDateRangeByDateType,
     getDateRangeByBillingCycleDateType,
     getFullMonthDateRange,
-    getMonthFirstDayOrCurrentDayShortDate, getYear, getMonth
+    getMonthFirstDayOrCurrentDayShortDate
 } from '@/lib/datetime.ts';
 import {
     categoryTypeToTransactionType,
@@ -660,6 +670,7 @@ const {
     queryMinTime,
     queryMaxTime,
     queryMonthlyData,
+    queryMonth,
     queryAllFilterCategoryIds,
     queryAllFilterAccountIds,
     queryAllFilterTagIds,
@@ -700,6 +711,7 @@ const showCategoryPopover = ref<boolean>(false);
 const showAccountPopover = ref<boolean>(false);
 const showMorePopover = ref<boolean>(false);
 const showCustomDateRangeSheet = ref<boolean>(false);
+const showCustomMonthSheet = ref<boolean>(false);
 const showDeleteActionSheet = ref<boolean>(false);
 
 const allTransactionTagFilterTypes = computed<TypeAndDisplayName[]>(() => getAllTransactionTagFilterTypes());
@@ -941,7 +953,12 @@ function changeDateFilter(dateType: number): void {
             customMinDatetime.value = query.value.minTime;
         }
 
-        showCustomDateRangeSheet.value = true;
+        if (pageType.value === TransactionListPageType.Calendar.type) {
+            showCustomMonthSheet.value = true;
+        } else {
+            showCustomDateRangeSheet.value = true;
+        }
+
         showDatePopover.value = false;
         return;
     } else if (query.value.dateType === dateType) {
@@ -1019,6 +1036,32 @@ function changeCustomDateFilter(minTime: number, maxTime: number): void {
     }
 }
 
+function changeCustomMonthDateFilter(yearMonth: string): void {
+    if (!yearMonth) {
+        return;
+    }
+
+    const minTime = getYearMonthFirstUnixTime(yearMonth);
+    const maxTime = getYearMonthLastUnixTime(yearMonth);
+    const dateType = getDateTypeByDateRange(minTime, maxTime, firstDayOfWeek.value, DateRangeScene.Normal);
+
+    if (pageType.value === TransactionListPageType.Calendar.type) {
+        currentCalendarDate.value = getMonthFirstDayOrCurrentDayShortDate(minTime);
+    }
+
+    const changed = transactionsStore.updateTransactionListFilter({
+        dateType: dateType,
+        maxTime: maxTime,
+        minTime: minTime
+    });
+
+    showCustomMonthSheet.value = false;
+
+    if (changed) {
+        reload();
+    }
+}
+
 function shiftDateRange(minTime: number, maxTime: number, scale: number): void {
     if (query.value.dateType === DateRange.All.type) {
         return;