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">
			<view
			  class="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'