Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (v-calendar-oxr) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

title: 'Selector' sidebarDepth: 2

Selector (new)

1. Attibutes

1.1 enable selector

ctrl & shift hold on support

    <v-calendar
        :attributes="attributes"
        is-selector
    />

1.2 containerId

当存在一个以上的多个v-calendar标签时，需通过自定义containerId区分各自的唯一索引，确保命中目标标签
When there are multiple v-calendar tags, it is necessary to differentiate their unique indexes by customizing the containerId, in order to ensure that the target tag is correctly identified.

    <v-calendar
        :attributes="attributes"
        is-selector
        :container-id="containerId"
    />

    containerId: {
        type: String,
        default: 'month'
    }

1.3 check selection covered

    <v-calendar
        :attributes="attributes"
        is-selector
        :check-selection-covered="checkSelectionCovered"
    />

methods: {
    checkSelectionCovered(day) {
        return day.date.getTime() >= day.todayTime
    }
}

example: use vue-contextmenujs module

    <v-calendar
        :attributes="attributes"
        is-selector
        :check-selection-covered="checkSelectionCovered"
        @month-context-menu="contextMenu"
    />

methods: {
    contextMenu(selector, e) {
        // { selectDays } todo
    }
}

2. Scoped Slot

day-content (dayClass (new) export default day-content)

    <v-calendar
        :attributes="attributes"
        is-selector
    >
        <template #day-content="{ day, attributes: attrs, dayProps, dayEvents, dayClass }">
            <div :class="dayClass" v-bind="dayProps" v-on="dayEvents">
                <div class="day-label">{{ day.day }}</div>
            </div>
        </template>
    </v-calendar>

selection-content (new)

    <v-calendar
        :attributes="attributes"
        is-selector
    >
        <template #selection-content="{ selector }">
            <div style="width: inherit; height: inherit; background: #0003">SHOW</div>
        </template>
    </v-calendar>

v-calendar-oxr