uniapp : 仿釘釘考勤統計頁面的日歷組件，通過日歷展示每日考勤打卡情況，支持在日歷上打兩種不同類型的點，大致適配各種分辨率

效果圖

1. 不帶月份變化事件
   

2. 帶月份變化事件
   

demo的github地址

介紹

1. 使用的組件基於uni-calendar,插件市場地址,組件示例

2. 本文使用的組件在上面的組件基礎上做了一些個性化適配，增加了如下內容：

   • 系統當前日期樣式由[白底藍字]調整為[淡藍色圓形背景白字]
   • 選中日期樣式由[藍色矩形背景白字]調整為[藍色圓形背景白字]
   • 在日期上打點的樣式由[日期右上角]調整為[日期底部正中間]
   • 提供兩種不同的打點樣式
   • 增加月份變化事件的外部調用接口
   • 怎么添加多種不同的打點樣式
   • 去掉了[今日]快捷按鈕

3. 本文中的組件樣式能適配不同的分辨率，但打點樣式可能在細微之處有所不同（不是那么居中）

4.重點：適配ipad大屏請進行如下配置！！！適配ipad大屏請進行如下配置！！！適配ipad大屏請進行如下配置！！！

在pages.json 的 globalStyle 中添加如下三行配置內容：

	"globalStyle": {
		"rpxCalcMaxDeviceWidth": 1024,
		"rpxCalcBaseDeviceWidth": 375,
		"rpxCalcIncludeWidth": 750
	}

使用方法（一）：不帶月份選擇

1. 點擊此處下載github上的demo

2. 在項目中新建pages的同級目錄components,將uni-calendar文件放在里面
   

3.在main.js中添加如下代碼引入組件

import myCalender from "./components/uni-calendar/components/uni-calendar/uni-calendar.vue";
Vue.component('my-calender',myCalender);

4. 在頁面中加載組件

<template>
	<view>
		<my-calender :clearDate="true" :showMonth="false" :insert="true" :selected="selected" :lunar="false"
			:start-date="'1990-01-01'" :end-date="'2099-01-01'" @change="dateChange">
		</my-calender>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selected: [{
					date: '2022-03-18', // date為所需要打點的日期
					type: "abnormal" // abnormal顯示為橙色點
				}, {
					date: '2022-03-19',
					type: "normal" // normal顯示為藍色點
				}],
			}
		},
		methods: {
			/**
			 * 選中日期的觸發事件
			 */
			dateChange: function(e) {
				console.log(e);
			},
		},
	}
</script>

• 需要打點，請配置selected參數
• 需要顯示農歷，請配置lunar參數為true
• 需要月份水印，請配置showMonth參數為true
• 這里的月份是寫死的，固定為：系統當前日期的月份

效果圖：

使用方法（二）：帶月份選擇

1. 打開uni-calendar.vue
   

2. 修改代碼：
   

3. 在引用組件的頁面添加monthSwitch事件

	<view>
		<my-calender :clearDate="true" :showMonth="false" :insert="true" :selected="selected" :lunar="false"
			:start-date="'1990-01-01'" :end-date="'2099-01-01'" @monthSwitch="monthSwitch" @change="dateChange">
		</my-calender>
	</view>

		methods: {
			/**
			 * 選中日期的觸發事件
			 */
			dateChange: function(e) {
				console.log(e);
			},
			/**
			 *  選中月份的觸發事件
			 */
			monthSwitch:function(e){
				console.log(e);
			}
		},

效果圖：

使用方法（三）：如何自定義樣式的數量和類型

1. 打開uni-calendar-item.vue
   

2. 看到這個地方：
   

一些小小的缺憾

• 打點的位置，在某些分辨率上，並沒有特別居中
• 圓形背景，在某些分辨率上，並沒有特別圓，可能有個平頭