TnWeekCalendar-周日历

此组件用于选择一个星期日期，一般用于标识该用户当天是否已经签到。

组件位置

nodeuni_modules

typescript

import TnWeekCalendar from '@tuniao/tnui-vue3-uniapp/components/week-calendar/src/week-calendar.vue'

import TnWeekCalendar from '@tuniao/tnui-vue3-uniapp/components/week-calendar/src/week-calendar.vue'

typescript

import TnWeekCalendar from '@/uni_modules/tuniaoui-vue3/components/week-calendar/src/week-calendar.vue'

import TnWeekCalendar from '@/uni_modules/tuniaoui-vue3/components/week-calendar/src/week-calendar.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

通过v-model绑定当前选中的日期，如果不传递任何值则默认选中

vue

<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref<number>(12)
</script>

<template>
  <TnWeekCalendar v-model="selectDate" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref<number>(12)
</script>

<template>
  <TnWeekCalendar v-model="selectDate" />
</template>

自定义日历样式

通过active-bg-color设置激活日期的背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba
通过active-text-color设置激活日期的文字颜色，支持图鸟内置的颜色值、hex、rgb、rgba

vue

<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref<number>(12)
</script>

<template>
  <TnWeekCalendar
    v-model="selectDate"
    active-bg-color="tn-grey"
    active-text-color="#01beff"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref<number>(12)
</script>

<template>
  <TnWeekCalendar
    v-model="selectDate"
    active-bg-color="tn-grey"
    active-text-color="#01beff"
  />
</template>

设置最小日期和最大日期

通过min-date和max-date设置最小日期和最大日期，如果不设置则默认以当前月的今天和当前月的最后一天为最小日期和最大日期

vue

<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref<number>(12)
</script>

<template>
  <TnWeekCalendar v-model="selectDate" :min-date="10" :max-date="21" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref<number>(12)
</script>

<template>
  <TnWeekCalendar v-model="selectDate" :min-date="10" :max-date="21" />
</template>

设置是哪年哪月的周日历

通过year和month设置是哪年哪月的周日历，如果不设置则默认以当前年月为周日历

vue

<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref<number>(12)
</script>

<template>
  <TnWeekCalendar v-model="selectDate" :year="2023" :month="1" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref<number>(12)
</script>

<template>
  <TnWeekCalendar v-model="selectDate" :year="2023" :month="1" />
</template>

自定义日期下显示的数据

通过给custom-data传递一个数组，数组的每一项都是一个对象，对象的date属性填写需要显示自定义内容的日期，desc属性填写自定义显示的内容，内容会显示在日期下方

vue

<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref<number>(12)
const customData = [
  { date: 11, desc: '漏签' },
  { date: 12, desc: '已签到' },
]
</script>

<template>
  <TnWeekCalendar v-model="selectDate" :custom-data="customData" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const selectDate = ref<number>(12)
const customData = [
  { date: 11, desc: '漏签' },
  { date: 12, desc: '已签到' },
]
</script>

<template>
  <TnWeekCalendar v-model="selectDate" :custom-data="customData" />
</template>

API

Props

属性名	说明	类型	默认值	可选值
model-value/v-model	绑定日期的值，如果不设置则以当前日期作为值	Number	-	-
min-date	最小允许选择月份的日期，如果为空则以当前日期作为最小值	String ｜ Number	-	-
max-date	最大允许选择月份的日期，如果为空则以当前月的最后一天作为最大值	String ｜ Number	-	-
active-bg-color	被选中日期的背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba	String	-	-
actice-text-color	被选中日期的文字颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
year	绑定的年份，如果为空则使用当前年份	String \| Number	-	-
month	绑定的月份，如果为空则使用当前月份	String \| Number	-	-
custom-data	自定义日期的描述数据	`Array<WeekCalendarCustomData>`	-	-

Emits

事件名	说明	类型
change	所选日期发生修改事件	`(value: number) => void`
week-year	切换周触发事件	`(value: number) => void`

WeekCalendarCustomData

参数	说明	必填
date	需要设置的日期	是
desc	需要设置的日期描述	是

TnWeekCalendar-周日历 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

自定义日历样式 ​

设置最小日期和最大日期 ​

设置是哪年哪月的周日历 ​

自定义日期下显示的数据 ​

API ​

Props ​

Emits ​

WeekCalendarCustomData ​