diff --git a/src/components/budgets/BudgetView2.vue b/src/components/budgets/BudgetView2.vue
index ed1c441..4f81513 100644
--- a/src/components/budgets/BudgetView2.vue
+++ b/src/components/budgets/BudgetView2.vue
@@ -12,7 +12,7 @@ import {
 } from "@/services/budgetsService";
 import {Budget, BudgetCategory, Warn} from "@/models/Budget";
 import {useRoute} from "vue-router";
-import {formatAmount, formatDate} from "@/utils/utils";
+import {formatAmount, formatDate, getMonthName, getMonthName2} from "@/utils/utils";
 import ProgressBar from "primevue/progressbar";
 import ProgressSpinner from "primevue/progressspinner";
 import BudgetCategoryView from "@/components/budgets/BudgetCategoryView.vue";
@@ -27,7 +27,7 @@ import Divider from "primevue/divider";
 import TransactionForm from "@/components/transactions/TransactionForm.vue";
 import Checkbox from "primevue/checkbox";
 import {useDrawerStore} from "@/stores/drawerStore";
-import { EventBus } from '@/utils/EventBus.ts';
+import {EventBus} from '@/utils/EventBus.ts';
 
 // Зарегистрируем плагин
 ChartJS.register(ChartDataLabels);
@@ -624,6 +624,74 @@ const expandCats = (value: boolean) => {
     }
   }
 };
+const calendarExpanded = ref(false);
+const calendar = ref<{ date: Date, dateStr: string, expenses: any[], expensesSum: number }[]>([]);
+
+watch([budget, plannedExpenses], () => {
+  if (!budget.value?.dateFrom || !budget.value?.dateTo) {
+    calendar.value = [];
+    return;
+  }
+
+  const result: { date: Date, dateStr: string, expenses: any[], expensesSum: number, }[] = [];
+
+  const startDate = new Date(budget.value.dateFrom);
+  const endDate = new Date(budget.value.dateTo);
+  let currentDate = new Date(startDate);
+  let lastDateWithExpenses = null;
+  let periodStart = null;
+
+  while (currentDate <= endDate) {
+    const formattedDate = currentDate.toISOString().split("T")[0];
+    const expenses = plannedExpenses.value.filter((transaction) => {
+      return transaction.date === formattedDate;
+    });
+    const expensesSum = expenses.reduce((sum, expense) => sum + (expense.amount || 0), 0);
+
+    if (expenses.length == 0) {
+      if (!periodStart) periodStart = new Date(currentDate); // Сохраняем начало периода без трат
+    } else {
+      if (lastDateWithExpenses && periodStart) {
+        // Добавляем период без трат, если он был
+        result.push({
+          date: currentDate,
+          dateStr: periodStart.toLocaleDateString('ru-RU') === new Date(new Date(currentDate).setDate(currentDate.getDate() - 1)).toLocaleDateString('ru-RU')
+              ? periodStart.getUTCDate() + " " + getMonthName2(periodStart.getMonth(), "род") + " " + periodStart.getUTCFullYear() + ' трат нет.'
+              : `В период с ${periodStart.toLocaleDateString('ru-RU')} по ${new Date(new Date(currentDate).setDate(currentDate.getDate() - 1)).toLocaleDateString('ru-RU')} трат нет.`,
+          expenses: [],
+          expensesSum: 0,
+        });
+        periodStart = null;
+      }
+
+      // Добавляем день с тратами
+      lastDateWithExpenses = new Date(currentDate)
+      result.push({
+        date: currentDate,
+        dateStr: currentDate.getUTCDate() + " " + getMonthName2(currentDate.getMonth(), "род") + " " + currentDate.getUTCFullYear(),
+        expenses: expenses,
+        expensesSum: expensesSum,
+      });
+
+      // lastDateWithExpenses = new Date(currentDate); // Сохраняем дату с тратами
+    }
+
+    currentDate.setDate(currentDate.getDate() + 1);
+  }
+
+  // Добавляем последний период без трат, если он был
+  if (lastDateWithExpenses && periodStart) {
+    result.push({
+      date: currentDate,
+      dateStr: `В период с ${periodStart.toLocaleDateString('ru-RU')} по ${lastDateWithExpenses.toLocaleDateString('ru-RU')} трат нет.`,
+      expenses: [],
+      expensesSum: 0
+    });
+    periodStart = null;
+  }
+
+  calendar.value = result;
+}, {immediate: true});
 
 onMounted(async () => {
   updateLoading.value = true;
@@ -637,7 +705,7 @@ onMounted(async () => {
       // fetchBudgetCategories(),
       // fetchBudgetTransactions(),
     ]);
-    EventBus.on('transactions-updated', fetchBudgetInfo,true);
+    EventBus.on('transactions-updated', fetchBudgetInfo, true);
   } catch (error) {
     console.error('Error during fetching data:', error);
   } finally {
@@ -645,7 +713,7 @@ onMounted(async () => {
   }
 });
 
-onUnmounted( async () => {
+onUnmounted(async () => {
   EventBus.off('transactions-updated', fetchBudgetInfo);
 })
 </script>
@@ -656,7 +724,7 @@ onUnmounted( async () => {
 
   <div v-else class="px-4 bg-gray-100 h-full ">
 
-    <div  class=" flex flex-col gap-3">
+    <div class=" flex flex-col gap-3">
       <div class="flex flex-row justify-between ">
         <div class="flex flex-col gap-2">
           <h2 class="text-4xl  font-bold">Бюджет {{ budget.name }} </h2>
@@ -698,6 +766,9 @@ onUnmounted( async () => {
 
         </div>
       </div>
+
+      <!--      hui {{calendar}}-->
+
       <div class="flex flex-col gap-2">
         <!-- Аналитика и плановые доходы/расходы -->
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 items-start ">
@@ -934,12 +1005,34 @@ onUnmounted( async () => {
             <div>
               <!-- Планируемые расходы -->
               <div class="pb-4">
+
                 <div class="flex flex-row gap-4 items-center mb-4">
                   <h3 class="text-2xl font-bold text-rose-500 ">Расходы</h3>
                   <button @click="openDrawer('PLANNED', 'EXPENSE')">
                     <span class="font-light text-sm">+ Добавить</span>
                   </button>
                 </div>
+                <div class="flex flex-col gap-4 pb-4">
+                  <div class="flex flex-row gap-2"><span class="text-lg font-bold items-center">Календарь</span>
+                    <button class="font-light text-sm" @click="calendarExpanded = !calendarExpanded">
+                      {{ calendarExpanded ? 'Скрыть' : 'Раскрыть' }}
+                    </button>
+                  </div>
+
+                  <div v-for="day, dayOne in calendar" class="flex flex-col justify-between p-4 shadow-lg rounded-lg " v-if="calendarExpanded"
+                       :class="day.date.toISOString().split('T')[0] == new Date().toISOString().split('T')[0]? 'bg-emerald-200' : 'bg-white '">
+                    <p class="font-bold text-xl">{{ day.dateStr }} <span
+                        v-if="day.expensesSum>0"> Траты по плану: {{ formatAmount(day.expensesSum) }} ₽</span></p>
+
+                    <BudgetTransactionView v-for="expense in day.expenses" :key="expense.id"
+                                           :transaction="expense"
+                                           :is-list="false"
+                                           @transaction-updated="updateTransactions"
+                                           @transaction-checked="updateTransactions"
+                    />
+
+                  </div>
+                </div>
                 <ul class="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <li v-for="(category, categoryId) in categoriesTransactions" :key="categoryId"
                       class="flex flex-col justify-between p-4 shadow-lg rounded-lg bg-white  ">
@@ -949,9 +1042,9 @@ onUnmounted( async () => {
                       <span class=" font-bold line-clamp-1" style="font-size: 1.25rem">{{
                           category.name.category.icon
                         }} {{ category.name.category.name }}</span>
-                        <button @click="openDrawer('INSTANT', 'EXPENSE', category.name.category.id)">
-                          <i class="pi pi-plus-circle"/>
-                        </button>
+                          <button @click="openDrawer('INSTANT', 'EXPENSE', category.name.category.id)">
+                            <i class="pi pi-plus-circle"/>
+                          </button>
                         </div>
                         <div class="flex flex-row w-fit gap-1 justify-between">
 
@@ -1058,10 +1151,10 @@ onUnmounted( async () => {
       </div>
     </div>
 
-<!--    <TransactionForm v-if="drawerOpened" :visible="drawerOpened" :transaction-type="transactionType"-->
-<!--                     :category-type="categoryType" @close-drawer="closeDrawer" @transaction-updated="updateTransactions"-->
-<!--                     @delete-transaction="updateTransactions"-->
-<!--                     @create-transaction="updateTransactions"/>-->
+    <!--    <TransactionForm v-if="drawerOpened" :visible="drawerOpened" :transaction-type="transactionType"-->
+    <!--                     :category-type="categoryType" @close-drawer="closeDrawer" @transaction-updated="updateTransactions"-->
+    <!--                     @delete-transaction="updateTransactions"-->
+    <!--                     @create-transaction="updateTransactions"/>-->
   </div>
 
   <div id="footer" class="h-24 bg-gray-100"/>
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 702c189..0d9e858 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -45,6 +45,19 @@ export const getMonthName = (month: number) => {
     }
 }
 
+export const getMonthName2 = (monthIndex: number, caseName: "имен" | "род" | "дат" | "вин" | "твор" | "пред") => {
+    const months = {
+        имен: ["январь", "февраль", "март", "апрель", "май", "июнь", "июль", "август", "сентябрь", "октябрь", "ноябрь", "декабрь"],
+        род: ["января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря"],
+        дат: ["январю", "февралю", "марту", "апрелю", "маю", "июню", "июлю", "августу", "сентябрю", "октябрю", "ноябрю", "декабрю"],
+        вин: ["январь", "февраль", "март", "апрель", "май", "июнь", "июль", "август", "сентябрь", "октябрь", "ноябрь", "декабрь"],
+        твор: ["январём", "февралём", "мартом", "апрелем", "маем", "июнем", "июлем", "августом", "сентябрем", "октябрем", "ноябрём", "декабрём"],
+        пред: ["январе", "феврале", "марте", "апреле", "мае", "июне", "июле", "августе", "сентябре", "октябре", "ноябре", "декабре"]
+    };
+
+    return months[caseName][monthIndex];
+}
+
 export const generateRandomColors = () => {
 
     const r = Math.floor(Math.random() * 256);
@@ -52,7 +65,7 @@ export const generateRandomColors = () => {
     const b = Math.floor(Math.random() * 256);
     const a = 0.5; // Прозрачность от 0.00 до 1.00
 
-    return [r,g,b]
+    return [r, g, b]
 }
 
 // Пример использования