diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index a3177c6..124a255 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -17,3 +17,4 @@
--bg-hover-row-table: rgba(215, 217, 255, 0.25)
--default-white: #fff
--btn-red-color: #ff6f6f
+ --time-indicator-color: #E93131
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 4b49368..e7d8d2f 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -6,7 +6,8 @@
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
+ .flex.flex-col
+ span.block.time-indicator(:style="indicatorLocation")
.line.flex.items-center(v-for="hour in hoursArray" :key="hour")
.middle-line
@@ -24,6 +25,22 @@ export default {
},
},
hoursArray: Array,
+ currentTime: String,
+ },
+ computed: {
+ indicatorLocation() {
+ return {
+ top: `${this.calculateIndicatorLocation()}px`,
+ };
+ },
+ },
+ methods: {
+ calculateIndicatorLocation() {
+ let newTime = this.currentTime
+ .split(":")
+ .map((elem) => parseInt(elem, 10));
+ return (newTime[0] - 7) * 60 + newTime[1];
+ },
},
};
@@ -31,6 +48,7 @@ export default {
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 547437b..a70755f 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -7,7 +7,7 @@
@selected-layout="selectedLayout")
.schedule-body.flex
calendar-clock-column(:hoursArray="hoursArray")
- calendar-column(:info="columnInfo" :hoursArray="hoursArray")
+ calendar-column(:info="columnInfo" :hoursArray="hoursArray" :currentTime="currtentTime")