diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue index e8b57ec..c21640f 100644 --- a/src/pages/calendar/TheCalendar.vue +++ b/src/pages/calendar/TheCalendar.vue @@ -2,6 +2,7 @@ .calendar-container calendar-schedule( :currentDate="currentDate" + :timeInformation="timeInformation" @previous-date="switchPreviousDate" @next-date="switchNextDate" @selected-layout="changeCalendarLayout" @@ -18,6 +19,10 @@ export default { return { calendarLayout: "", currentDate: moment(), + timeInformation: { + dayStartTime: "8:00", + dayEndTime: "18:00", + }, }; }, methods: { diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue index 429a388..18ec6df 100644 --- a/src/pages/calendar/components/CalendarBackground.vue +++ b/src/pages/calendar/components/CalendarBackground.vue @@ -2,18 +2,21 @@ .calendar-background-wrapper.flex.flex-col .header.flex.items-center.justify-between.py-2.px-6 .body.flex.flex-col + .line-wrapper + .line.flex.items-center(v-for="hour in hoursArray" :key="hour") + .middle-line .time-circle-indicator.-left-6px(v-if="isShownIndicator" :style="circleIndicatorLocation") span.time-line-indicator.block(v-if="isShownIndicator" :style="lineIndicatorLocation") - .line.flex.items-center(v-for="hour in hoursArray" :key="hour") - .middle-line @@ -61,7 +70,7 @@ export default { .line border-bottom: 1px solid var(--border-light-grey-color) height: 62px - &:nth-child(3) + &:first-child height: 63px border-top: 1px solid var(--border-light-grey-color) &:last-child diff --git a/src/pages/calendar/components/CalendarClockColumn.vue b/src/pages/calendar/components/CalendarClockColumn.vue index 203cc72..6158180 100644 --- a/src/pages/calendar/components/CalendarClockColumn.vue +++ b/src/pages/calendar/components/CalendarClockColumn.vue @@ -4,20 +4,30 @@