search

Hzy0913 / mpvue-calendar

📅 A calendar component for vue3.0. Support gesture sliding, range selection, according to the week switch...
http://preview.binlive.cn/mpvue-calendar#/
MIT License
514 stars 105 forks source link

老铁 能搞个普通js版本吗 #82

Open yuxuechao opened 4 years ago

yuxuechao commented 4 years ago

npm 太高级了，有些项目还是vue.min.js,想用你的控件，能否支持下。

LSL1618 commented 3 years ago

@yuxuechao 其实能用的，整了几天被我找出了普通模式的使用方式，参考一下吧：

<!-- dayjs -->
<script type="text/javascript" src="../../plugin/dayjs/dayjs.min.js"></script>
<script type="text/javascript" src="../../plugin/dayjs/locale/zh-cn.js"></script>
<script type="text/javascript" src="../../plugin/dayjs/plugin/utc.js"></script>
<script type="text/javascript" src="../../plugin/dayjs/plugin/timezone.js"></script>
<script type="text/javascript" src="../../plugin/dayjs/plugin/customParseFormat.js"></script>
<!-- vuejs -->
<script type="text/javascript" src="../../plugin/vue/vue-3.0.11.global.js"></script>
<!-- vuejs插件mpvue-calendar -->
<script type="text/javascript" src="../../plugin/vue/plugin/mpvue-calendar-3.0.0/mpvue-calendar.umd.min.js"></script>
<script type="text/javascript" src="../../plugin/vue/plugin/mpvue-calendar-3.0.0/lunar.js"></script>

<div id="app" style="text-align: center;">
    <mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[0]" :month-range="yearMonths.January.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onJanuaryDayClick" class="calendar_piece"></mpvue-calendar>
    <mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[1]" :month-range="yearMonths.February.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onFebruaryDayClick" class="calendar_piece"></mpvue-calendar>
    <mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[2]" :month-range="yearMonths.March.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onMarchDayClick" class="calendar_piece"></mpvue-calendar>
    <mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[3]" :month-range="yearMonths.April.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onAprilDayClick" class="calendar_piece"></mpvue-calendar>
    <mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[4]" :month-range="yearMonths.May.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onMayDayClick" class="calendar_piece"></mpvue-calendar>
    <mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[5]" :month-range="yearMonths.June.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onJuneDayClick" class="calendar_piece"></mpvue-calendar>
    <mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[6]" :month-range="yearMonths.July.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onJulyDayClick" class="calendar_piece"></mpvue-calendar>
    <mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[7]" :month-range="yearMonths.August.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onAugustDayClick" class="calendar_piece"></mpvue-calendar>
    <mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[8]" :month-range="yearMonths.September.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onSeptemberDayClick" class="calendar_piece"></mpvue-calendar>
    <mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[9]" :month-range="yearMonths.October.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onOctoberDayClick" class="calendar_piece"></mpvue-calendar>
    <mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[10]" :month-range="yearMonths.November.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onNovemberDayClick" class="calendar_piece"></mpvue-calendar>
    <mpvue-calendar :select-mode="selectMode" :mode="mode" :select-date="selectedDays[11]" :month-range="yearMonths.December.monthRange" :completion="completion" :mon-first="monFirst" :background-text="backgroundText" :language="language" :format="format" :lunar="lunar" @on-select="onDecemberDayClick" class="calendar_piece"></mpvue-calendar>
</div>
<script type="text/javascript">
dayjs.locale('zh-cn');// 国际化插件
dayjs.extend(window.dayjs_plugin_utc);// 时区插件
dayjs.extend(window.dayjs_plugin_timezone);// 时区插件
dayjs.extend(window.dayjs_plugin_customParseFormat);// 格式化插件
let now = dayjs();
function extractWeekend() {
    let weekend = [[], [], [], [], [], [], [], [], [], [], [], []];
    let i = 0, monthOfYear = {}, left = 0, right = 0, dateOfMonth;
    while (i < 12) {
        monthOfYear = i == 0 ? now.startOf('year') : now.startOf('year').add(i, 'month');
        left = monthOfYear.startOf('month').date();
        right = monthOfYear.endOf('month').date();
        while (left <= right) {
            dateOfMonth = left == 1 ? monthOfYear.startOf('month') : monthOfYear.startOf('month').add(left - 1, 'day');
            if ([6, 0].includes(dateOfMonth.day())) {
                weekend[monthOfYear.month()].push(dateOfMonth.format('YYYY-M-D'));
            }
            left++;
        }
        i++;
    }
    return weekend;
}
function getYearMonths() {
    let firstMonthOfYear = now.startOf('year');
    return {
        January: {
            dayjs: firstMonthOfYear,
            monthRange: [firstMonthOfYear.format('YYYY-M')],
            begin: firstMonthOfYear.format('YYYY-M-D'),
            end: firstMonthOfYear.endOf('month').format('YYYY-M-D')
        },
        February: {
            dayjs: firstMonthOfYear.add(1, 'month'),
            monthRange: [firstMonthOfYear.add(1, 'month').format('YYYY-M')],
            begin: firstMonthOfYear.add(1, 'month').format('YYYY-M-D'),
            end: firstMonthOfYear.add(1, 'month').endOf('month').format('YYYY-M-D')
        },
        March: {
            dayjs: firstMonthOfYear.add(2, 'month'),
            monthRange: [firstMonthOfYear.add(2, 'month').format('YYYY-M')],
            begin: firstMonthOfYear.add(2, 'month').format('YYYY-M-D'),
            end: firstMonthOfYear.add(2, 'month').endOf('month').format('YYYY-M-D')
        },
        April: {
            dayjs: firstMonthOfYear.add(3, 'month'),
            monthRange: [firstMonthOfYear.add(3, 'month').format('YYYY-M')],
            begin: firstMonthOfYear.add(3, 'month').format('YYYY-M-D'),
            end: firstMonthOfYear.add(3, 'month').endOf('month').format('YYYY-M-D')
        },
        May: {
            dayjs: firstMonthOfYear.add(4, 'month'),
            monthRange: [firstMonthOfYear.add(4, 'month').format('YYYY-M')],
            begin: firstMonthOfYear.add(4, 'month').format('YYYY-M-D'),
            end: firstMonthOfYear.add(4, 'month').endOf('month').format('YYYY-M-D')
        },
        June: {
            dayjs: firstMonthOfYear.add(5, 'month'),
            monthRange: [firstMonthOfYear.add(5, 'month').format('YYYY-M')],
            begin: firstMonthOfYear.add(5, 'month').format('YYYY-M-D'),
            end: firstMonthOfYear.add(5, 'month').endOf('month').format('YYYY-M-D')
        },
        July: {
            dayjs: firstMonthOfYear.add(6, 'month'),
            monthRange: [firstMonthOfYear.add(6, 'month').format('YYYY-M')],
            begin: firstMonthOfYear.add(6, 'month').format('YYYY-M-D'),
            end: firstMonthOfYear.add(6, 'month').endOf('month').format('YYYY-M-D')
        },
        August: {
            dayjs: firstMonthOfYear.add(7, 'month'),
            monthRange: [firstMonthOfYear.add(7, 'month').format('YYYY-M')],
            begin: firstMonthOfYear.add(7, 'month').format('YYYY-M-D'),
            end: firstMonthOfYear.add(7, 'month').endOf('month').format('YYYY-M-D')
        },
        September: {
            dayjs: firstMonthOfYear.add(8, 'month'),
            monthRange: [firstMonthOfYear.add(8, 'month').format('YYYY-M')],
            begin: firstMonthOfYear.add(8, 'month').format('YYYY-M-D'),
            end: firstMonthOfYear.add(8, 'month').endOf('month').format('YYYY-M-D')
        },
        October: {
            dayjs: firstMonthOfYear.add(9, 'month'),
            monthRange: [firstMonthOfYear.add(9, 'month').format('YYYY-M')],
            begin: firstMonthOfYear.add(9, 'month').format('YYYY-M-D'),
            end: firstMonthOfYear.add(9, 'month').endOf('month').format('YYYY-M-D')
        },
        November: {
            dayjs: firstMonthOfYear.add(10, 'month'),
            monthRange: [firstMonthOfYear.add(10, 'month').format('YYYY-M')],
            begin: firstMonthOfYear.add(10, 'month').format('YYYY-M-D'),
            end: firstMonthOfYear.add(10, 'month').endOf('month').format('YYYY-M-D')
        },
        December: {
            dayjs: firstMonthOfYear.add(11, 'month'),
            monthRange: [firstMonthOfYear.add(11, 'month').format('YYYY-M')],
            begin: firstMonthOfYear.add(11, 'month').format('YYYY-M-D'),
            end: firstMonthOfYear.add(11, 'month').endOf('month').format('YYYY-M-D')
        }
    };
}
let RootComponent = {
    data() {
        return {
            selectedDays: extractWeekend(),
            yearMonths: getYearMonths()
        };
    },
    setup() {
        return {
            selectMode: "multi",
            mode: "monthRange",
            completion: true,
            monFirst: true,
            backgroundText: true,
            language: "cn",
            format: (year, month) => {
                return [year + "年", (month < 10 ? ("0" + month) : month) + "月"];
            },
            lunar: window.lunar.default,
        };
    },
    created() {
        console.info('vm----->', Object.keys(this));
    },
    mounted() {
        this.$nextTick(function () {
        });
    },
    watch: {},
    components: {
        "mpvue-calendar": window["mpvue-calendar"]
    },
    computed: {
    },
    methods: {
        onJanuaryDayClick(selectDate) {
            this.selectedDays[0] = selectDate;
            console.info('selectedDays----->', JSON.stringify(this.selectedDays));
        },
        onFebruaryDayClick(selectDate) {
            this.selectedDays[1] = selectDate;
            console.info('selectedDays----->', JSON.stringify(this.selectedDays));
        },
        onMarchDayClick(selectDate) {
            this.selectedDays[2] = selectDate;
            console.info('selectedDays----->', JSON.stringify(this.selectedDays));
        },
        onAprilDayClick(selectDate) {
            this.selectedDays[3] = selectDate;
            console.info('selectedDays----->', JSON.stringify(this.selectedDays));
        },
        onMayDayClick(selectDate) {
            this.selectedDays[4] = selectDate;
            console.info('selectedDays----->', JSON.stringify(this.selectedDays));
        },
        onJuneDayClick(selectDate) {
            this.selectedDays[5] = selectDate;
            console.info('selectedDays----->', JSON.stringify(this.selectedDays));
        },
        onJulyDayClick(selectDate) {
            this.selectedDays[6] = selectDate;
            console.info('selectedDays----->', JSON.stringify(this.selectedDays));
        },
        onAugustDayClick(selectDate) {
            this.selectedDays[7] = selectDate;
            console.info('selectedDays----->', JSON.stringify(this.selectedDays));
        },
        onSeptemberDayClick(selectDate) {
            this.selectedDays[8] = selectDate;
            console.info('selectedDays----->', JSON.stringify(this.selectedDays));
        },
        onOctoberDayClick(selectDate) {
            this.selectedDays[9] = selectDate;
            console.info('selectedDays----->', JSON.stringify(this.selectedDays));
        },
        onNovemberDayClick(selectDate) {
            this.selectedDays[10] = selectDate;
            console.info('selectedDays----->', JSON.stringify(this.selectedDays));
        },
        onDecemberDayClick(selectDate) {
            this.selectedDays[11] = selectDate;
            console.info('selectedDays----->', JSON.stringify(this.selectedDays));
        }
    }
};
let app = Vue.createApp(RootComponent);
let vm = app.mount('#app');
</script>

重点在于此：

setup() {
    return {
        lunar: window.lunar.default,
    };
},
components: {
    "mpvue-calendar": window["mpvue-calendar"]
},