uniapp自定义日历计划写法（vue2）

• 前言：我们有时候需要实现的日历找不到相应的插件的时候，往往需要手动去写一个日历，以下就是我遇到这样的问题时，手搓出来的一个解决方案，希望可以帮助到更多的人。创作不易，请多多支持

uniapp自定义日历计划写法（vue2）

1、效果

2、实现源码

• 创建calendar组件

<template><!-- 左右滑动切换月份 --><view @touchstart="handleTouchStart" @touchend="handleTouchEnd"><!--  <view class="titleBox"><view class="title">{{ currentYear }}.{{ currentMonth }}</view></view> --><view class="calendarDiv"><view class="cpc_week"><view class="week_day" v-for="(item,index) in week" :key="index">{{ item }}</view></view><view class="calendar_box"><viewclass="calendar_day" v-for="(item, index) in currentMonthAllDate" :key="index" @tap="selectedDate(item.date)"><view :class="[item.month == 'current' ? 'current_day':'']" class="calendar_day_number_div"><view class="day_number" :class="[(item.month == 'current' && currentToday == item.date) ? 'currentToday':'']">{{item.number}}</view></view><view class="date_plan" v-if="item.isPlan != null && item.isPlan"><view class="cpc_point" v-for="(item_plan,plan_index) in item.planTypes" :index="plan_index" :class="[(item_plan === 1 ? 'plan1':''),(item_plan === 2 ?'plan2':''),(item_plan === 3 ?'plan3':''),(item_plan === 4 ?'plan4':'')]"></view></view></view><view class="showBorderParent"><view class="showBorder" @tap="changeShowWeekOrMonth"></view></view></view></view></view></template><script>
export default {name: 'Calendar'