diff --git a/packages/nc-gui/components/smartsheet/toolbar/CalendarMode.vue b/packages/nc-gui/components/smartsheet/toolbar/CalendarMode.vue index 74c73c4106..4a0c86535e 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/CalendarMode.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/CalendarMode.vue @@ -2,8 +2,13 @@ import { useCalendarViewStoreOrThrow } from "#imports"; -const setActiveCalendarMode = (mode: 'day' | 'week' | 'month' | 'year') => { +const highlightStyle = ref({ left: '0px' }); + + +const setActiveCalendarMode = (mode: 'day' | 'week' | 'month' | 'year', event: MouseEvent) => { changeCalendarView(mode); + const tabElement = event.target as HTMLElement; + highlightStyle.value.left = `${tabElement.offsetLeft}px`; }; const { changeCalendarView, activeCalendarView } = useCalendarViewStoreOrThrow() @@ -11,47 +16,32 @@ const { changeCalendarView, activeCalendarView } = useCalendarViewStoreOrThrow() - - - {{ $t('objects.day') }} - - - {{ $t('objects.week') }} - - - {{ $t('objects.month') }} - - + + - {{ $t('objects.year') }} - + {{ $t(`objects.${mode}`) }} + \ No newline at end of file