Подняла информацию из LayoutSwitch до родителя

src/pages/calendar/TheCalendar.vue

@@ -2,7 +2,8 @@
   calendar-header(
     :currentDay="currentDate"
     @previous-date="switchPreviousDate"
-    @next-date="switchNextDate")
+    @next-date="switchNextDate"
+    @selectedLayout="changeCalendarLayout")
 </template>
 
 <script>
@@ -14,6 +15,7 @@ export default {
   data() {
     return {
       currentDate: moment(),
+      calendarLayout: "",
     };
   },
   methods: {
@@ -23,7 +25,9 @@ export default {
     switchNextDate() {
       this.currentDate = this.currentDate.clone().add(1, "day");
     },
+    changeCalendarLayout(option) {
+      this.calendarLayout = option;
+    },
   },
 };
 </script>
-,

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -131,7 +131,7 @@ export default {
 .event-form
   height: fit-content
   min-width: 448px
-  background-color: var(--bg-white-color)
+  background-color: var(--default-white)
   box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
   border-radius: 4px
 .form-item

src/pages/calendar/components/CalendarHeader.vue

@@ -22,7 +22,6 @@ export default {
   data() {
     return {
       isToday: true,
-      selectedLayout: "",
     };
   },
   computed: {
@@ -39,7 +38,7 @@ export default {
   },
   methods: {
     changeSelectedLayout(option) {
-      this.selectedLayout = option;
+      this.$emit("selectedLayout", option);
     },
     previousHandler() {
       this.$emit("previous-date");
@@ -60,7 +59,7 @@ export default {
 <style lang="sass" scoped>
 .calendar-header-wrapper
   width: 100%
-  background-color: var(--bg-white-color)
+  background-color: var(--default-white)
   height: 56px
   border-radius: 4px
 

src/pages/calendar/components/CalendarLayoutSwitch.vue

@@ -37,7 +37,7 @@ export default {
 <style lang="sass" scoped>
 .active
   background-color: #6787e7
-  color: var(--bg-white-color)
+  color: var(--default-white)
   border-radius: 4px
 
 .layout-switch-wrapper