Package Exports

v-calendar-oxr
v-calendar-oxr/lib/v-calendar-oxr.umd.min.js

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)

Attibutes

isSelector enable selector

ctrl & shift hold on support

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

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'
    }

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) {
        // { selectedDays } todo
    }
}

init-days-method

Perform additional logic processing before returning the generated "days" of the month.

    <v-calendar
        :attributes="attributes"
        @init-days-method="dayInit && initDaysMethod"
    />

methods: {
    initDaysMethod(days, cb) {
        const last7d = days[days.length - 1 - 6]
        const doms = Array.from(document.getElementsByClassName('custom-calendar'))
        if (last7d && !last7d.inMonth) {
            cb(dropRight(days, 7))
            doms.forEach(dom => dom.style.setProperty('--day-height', 90 + 90 / 5 + 'px'))
        } else {
            doms.forEach(dom => dom.style.setProperty('--day-height', 90 + 'px'))
        }
    }
}

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 class="day-attrs">
                    <template v-for="attr in attrs">
                        <span v-if="attr.customData" :key="attr.customData.name" :class="attr.customData.class" :style="attr.customData.style">{{
                            attr.customData.name
                        }}</span>
                    </template>
                </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>

选区与显示器缩放像素换算 Ratio

当显示器缩放时，鼠标的坐标与实际坐标会有所偏差，需要结合window.devicePixelRatio进行换算，这里提供一个ratio的prop，默认为1

props: {
    ratio: {
        type: Number,
        default: 1
    }
}

v-calendar-oxr