diff --git a/src/assets/icons/lock.svg b/src/assets/icons/lock.svg
new file mode 100644
index 0000000..024f0e7
--- /dev/null
+++ b/src/assets/icons/lock.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/images/team-member.svg b/src/assets/images/team-member.svg
new file mode 100644
index 0000000..0262c33
--- /dev/null
+++ b/src/assets/images/team-member.svg
@@ -0,0 +1,15 @@
+
diff --git a/src/components/base/buttons/BaseDocOkButton.vue b/src/components/base/buttons/BaseDocOkButton.vue
new file mode 100644
index 0000000..59ebb69
--- /dev/null
+++ b/src/components/base/buttons/BaseDocOkButton.vue
@@ -0,0 +1,37 @@
+
+ button.icon-wrap.flex.items-center.justify-center.py-1.px-2(:class="{disable: isDisable}")
+ span(v-if="numberIsVisible") 3
+ .icon-doc-ok.text-xxl
+
+
+
+
+
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 746589f..a08e224 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -1,21 +1,29 @@
- calendar-header(
- :currentDay="currentDate"
- @previous-date="switchPreviousDate"
- @next-date="switchNextDate"
- @selectedLayout="changeCalendarLayout")
+ .calendar-container.ml-2
+ calendar-header(
+ :currentDay="currentDate"
+ @previous-date="switchPreviousDate"
+ @next-date="switchNextDate"
+ @selectedLayout="changeCalendarLayout")
+ calendar-column(:info="columnInfo")
+
+
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
new file mode 100644
index 0000000..fba93bf
--- /dev/null
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -0,0 +1,57 @@
+
+ .calendar-column-wrapper.flex.flex-col
+ .header.flex.items-center.justify-between.py-2.px-6
+ .flex.items-center
+ img.avatar-wrapper.mr-2(:src="info.avatar" alt="Team member")
+ span.member-name.font-medium.text-base.mr-6 {{ info.name }}
+ img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
+ base-doc-ok-button
+ .body.flex.flex-col
+ .line.flex.items-center(v-for="hour in 10" :key="hour")
+ .middle-line
+
+
+
+
+
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index 24be3c8..8a5130f 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -134,10 +134,12 @@ export default {
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
border-radius: 4px
width: fit-content
background-color: var(--bg-ligth-blue-color)
+
.item-input
appearance: none
border: none
@@ -149,10 +151,12 @@ export default {
-webkit-appearance: none
&::placeholder
color: var(--font-black-color-1)
+
.icon
width: 24px
height: 24px
color: var(--font-dark-blue-color)
+
.close-icon
color: var(--font-dark-blue-color)
&:hover
diff --git a/src/pages/calendar/components/CalendarHeader.vue b/src/pages/calendar/components/CalendarHeader.vue
index 0ce8935..930fc1a 100644
--- a/src/pages/calendar/components/CalendarHeader.vue
+++ b/src/pages/calendar/components/CalendarHeader.vue
@@ -1,5 +1,5 @@
- .calendar-header-wrapper.flex.items-center.justify-between.ml-2.py-3.pl-5.pr-6
+ .calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
.flex
base-arrow-button.left-arrow.mr-4(@click="previousHandler")
base-arrow-button.right-arrow.mr-6(@click="nextHandler")