CalendarEmbedded

CalendarEmbedded는 사이드바나 필터 패널처럼 화면 안에 항상 노출되는 단일 날짜 선택 캘린더입니다. 팝업·모달 없이 고정된 위치에 렌더링되며, Calendar의 single 모드와 날짜 선택 동작을 공유합니다.

Basic

mode는 single만 지원하며 생략할 수 있습니다. 날짜를 선택하면 v-model:date가 millisecond timestamp로 갱신됩니다.

월화수목금토일

vue

<script setup lang="ts">
import { ref } from 'vue';
import { CalendarEmbedded } from '@jennifersoft/vue-components-v2';

const selectedDate = ref<number>();
</script>

<template>
    <calendar-embedded v-model:date="selectedDate" />
</template>

Slot — 조회 기간 선택

기본 슬롯은 캘린더 위에 부가 컨트롤을 배치할 때 사용합니다. 슬롯이 있으면 컴포넌트가 JENNIFER Design Kit의 필터 패널 형태로 확장되고, 슬롯과 캘린더 사이에는 8px 간격이 적용됩니다.

아래 예시는 Dropdown으로 조회 기간을 1일부터 7일까지 선택할 수 있도록 구성한 예시입니다. 선택한 값을 last-n-days에 전달하므로 조회 기간을 바꾸면 캘린더의 선택 범위도 즉시 갱신됩니다. 예를 들어 17일을 선택하고 조회 기간을 3일로 설정하면 15일부터 17일까지 표시됩니다.

조회 기간

월화수목금토일

vue

<script setup lang="ts">
import { ref } from 'vue';
import {
    CalendarEmbedded,
    Dropdown,
} from '@jennifersoft/vue-components-v2';

const selectedDate = ref<number>();
const selectedPeriod = ref(3);

const periodItems = Array.from({ length: 7 }, (_, index) => ({
    label: `${index + 1}일`,
    value: index + 1,
}));
</script>

<template>
    <calendar-embedded
        v-model:date="selectedDate"
        :last-n-days="selectedPeriod"
    >
        <div class="calendar-embedded-period">
            <span class="calendar-embedded-period-label">조회 기간</span>
            <dropdown
                v-model="selectedPeriod"
                class="calendar-embedded-period-dropdown"
                :items="periodItems"
                size="small"
            />
        </div>
    </calendar-embedded>
</template>

<style scoped>
.calendar-embedded-period {
    display: flex;
    width: 224px;
    height: 24px;
}

.calendar-embedded-period-label {
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 61px;
    min-width: 0;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 4px 8px;
    border: 1px solid var(--gray-300);
    border-radius: 4px 0 0 4px;
    color: var(--gray-900);
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap;
}

.calendar-embedded-period-dropdown {
    flex: 1;
    min-width: 0;
    margin-left: -1px;
    border-radius: 0 4px 4px 0;
}
</style>

Props

Prop	타입	기본값	설명
`mode`	`'single'`	`'single'`	단일 날짜 선택만 지원
`messages`	`CalendarMessages`	브라우저 locale 자동 (KO/JA/EN)	요일·월 및 캘린더 라벨
`date`	`number` (ms timestamp)	-	선택한 날짜의 `v-model` 값
`lastNDays`	`number`	`1`	선택한 날짜를 종료일로 표시할 최근 N일 범위
`timeZoneOffset`	`number` (ms)	`9 * 60 * 60 * 1000`	표시·계산 기준 타임존 offset

Slots

Slot	설명
`default`	캘린더 상단에 조회 기간 선택 등 부가 컨트롤을 배치

Emits

Event	Payload	발생 시점
`update:date`	`number`	날짜 선택 시 `v-model:date` 갱신
`apply`	`{ date: number }`	날짜 선택이 즉시 확정될 때 발생

키보드

Calendar와 동일한 키보드 조작을 지원합니다.

키	동작
`←` / `→` / `↑` / `↓`	날짜 focus cursor 이동 (±1일 / ±7일)
`Enter`	focus된 날짜 선택
`PageUp` / `PageDown`	이전/다음 달 이동

CalendarEmbedded ​

Basic ​

Slot — 조회 기간 선택 ​

Props ​

Slots ​

Emits ​