【鸿蒙开发】常用ArkUI日历组件

已于 2024-04-07 11:35:03 修改
阅读量1.3k 收藏 13
点赞数 9
分类专栏： 鸿蒙开发 文章标签： 鸿蒙 harmonyos
于 2024-02-27 11:59:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenjiang2936/article/details/136317051
版权
本文详细介绍了cjcalendar日历组件的安装、各种属性配置、方法使用以及多种操作模式和选中样式的示例。包括直接使用、范围选择、多选、定制主题色和日期限制等功能。
摘要由CSDN通过智能技术生成

cjcalendar

若文档加载不出来 请点这里查看

简介

cjcalendar 是一款日常开发常用的日历组件，内部集成常规、单选、时间范围选择、多选、自定义日期每项显示等.

下载安装

ohpm install cjcalendar

使用方式

import { CJCalendar } from 'cjcalendar'

CJCalendar()

一、各项属性

参数名类型必填说明
optModeOptMode否操作模式,常规、单选、一段时间、多选：默认：OptMode.NORMAL
startDateDate否开始日期：默认：new Date(1970, 0, 1)
endDateDate否截止日期：默认：当前时间+10年
titleHeightLength否标题栏高度：默认：50vp
weeksstring[]否星期标题，默认：[“日”,“一”,“二”,“三”,“四”,“五”,“六”,]
weekTitleFontSizenumber | string | Resource否星期标题字体大小，默认：12
weekTitleFontColorResourceColor否星期标题字体颜色，默认：“#9E9E9E”
weekTitleBackgroundColorResourceColor否星期标题背景色颜色，默认未设置
weekTitleHeightLength否星期标栏高度，默认：40
titleFontSizenumber | string | Resource否标题字体大小，默认：18
titleFontColorResourceColor否标题字体颜色，默认：“#252a34”
showFastTodayboolean否是否显示快捷 今，默认：true
fastTodayFontSizenumber | string | Resource否快捷返回今天，字体大小，默认：12
fastTodayFontColorResource否快捷返回今天，字体颜色，默认：“#FFFFFF”
fastTodayBgResource否快捷返回今天，背景颜色，默认与todayFontColor一致
itemFontSizenumber | string | Resource否日期每一项字体大小，默认：18
itemFontColorResource否日期每一项字体颜色，默认：“#252a34”
itemFontWeightResource否日期每一项字体，默认：FontWeight.Normal
todayFontColorResourceColor否“今”日字体颜色，默认：“#03A9F4”
disabledFontColorResourceColor否不能使用的日期字体颜色，默认：“#9E9E9E”
selectFontColorResourceColor否选中日期字体颜色，默认：“#FFFFFF”
selectItemBgColorResourceColor否选中日期背景颜色, 默认与todayFontColor一致
optModeOptMode否操作类型，默认：NORMAL
rangeStyleSelectedStyle否SelectedStyle.ALONE 独立风格，SelectedStyle.CLOSE 封闭风格，默认：SelectedStyle.ALONE 独立圆形选中风格
extremityRadiusnumber否optMode == OptMode。RANGE且rangeStyle==SelectedStyle.CLOSE 时生效，两头选项的圆角
showTimeboolean否是否显示时间选择，默认：false
timeFontSizenumber | string | Resource否时间选择器字体大小，默认：18
timeFontColorResourceColor否时间选择器字体颜色，默认：item 字体颜色

二、常用方法

方法参数返回必填说明
cellLayoutitem: CJDateItem-否自定义每一项布局
cusCellMainLayoutitem: CJDateItem,params: CellFontStyle-否仅自定义日期文字区
selectedBackgroundLayoutitem: CJDateItem-否仅自定义选中背景样式区
titleCenterLayout--否自定义日期标题中心内容
titleLeftLayout--否自定义日期标题左边内容
titleRightLayout--否自定义日期标题右边内容
todayLayoutitem: CJDateItem-否仅自定义 今日 样式，当使用cellLayout时，tadayLayout无效
fastTodayLayout--否快捷回到今天自定义布局
disableCellClickitem: CJDateItem-否点击不可用item时的事件响应
reBuildDateItemitem: CJDateItemCJDateItem否计算item时，如需添加更多自定义属性时使用
onDateChangedate1: CJDateItem | Array, date2?: CJDateItem-否选择变化监听，OptMode.NORMAL/OptMode.SINGLE,只返：date1；OptMode.RANGE：两个都返,date1为开始时间，date2为结束时间；MULTIPLE：返回Array，已选中的日期
onTimeChangetime1: CJTimeItem, time2?: CJTimeItem-否时间选择改变监听
onMonthChangeafter: Date, befor: Date-否月份改变回调：after 改变后，befor：改变前
cusTopLayoutpreMonth?: () => void, nextMonth?: () => void, backToday?: () => void-否自定义顶部布局，可结合cusTopStateListener使用
cusTopStateListenertitle?: string, hasPre?: boolean, hasNext?: boolean, showFastToday?: boolean-否自定义顶部布局时，可直接使用该状态回调用于控制顶部状态

三、CJDateItem通用属性

属性类型描述
fullYearnumber年
monthnumber月
datenumber日期
weeknumber星期
timenumber时间戳

四、OptMode 操作模式

属性描述
NORMAL常规
SINGLE单选
RANGE一段时间
MULTIPLE多选

五、SelectedStyle 选中样式风格

属性描述
ALONE独立选中风格：默认圆形独立
CLOSE封闭选中风格：默认举行封闭

五、使用案例

1、直接使用

import { CJCalendar } from 'cjcalendar'

CJCalendar()

在这里插入图片描述

在这里插入图片描述

2、范围选择

CJCalendar({
  // 范围选择
  optMode: OptMode.RANGE,
  rangeStyle: SelectedStyle.CLOSE,// 默认 SelectedStyle.ALONE
  // 日期选择变化监听
  onDateChange: (start: CJDateItem, end: CJDateItem) => {
    console.log(TAG, "start：", JSON.stringify(start))
    console.log(TAG, "end：", JSON.stringify(end))
  },
})

在这里插入图片描述

在这里插入图片描述

3、多选

CJCalendar({
  // 范围选择
  optMode: OptMode.MULTIPLE,
  // 日期选择变化监听
  onDateChange: (dates: CJDateItem[]) => {
    console.log(TAG, "dates：", JSON.stringify(dates))
  },
})

在这里插入图片描述

4、修改主题色

CJCalendar({
  // 范围选择
  optMode: OptMode.MULTIPLE,
  // 修改主题色
  todayFontColor: "#00897B",
  // 日期选择变化监听
  onDateChange: (dates: CJDateItem[]) => {
    console.log(TAG, "dates：", JSON.stringify(dates))
  },
})

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

5、限制开始日期、截止日期

CJCalendar({
  // 范围选择
  optMode: OptMode.RANGE,
  // 修改主题色
  todayFontColor: "#E64A19",
  // 开始日期
  startDate: new Date(2024, 2, 3),
  // 截止日期
  endDate: new Date(2024, 2, 20),
  // 日期选择变化监听
  onDateChange: (date1: CJDateItem, date2: CJDateItem) => {
    console.log(TAG, "date1：", JSON.stringify(date1))
    console.log(TAG, "date2：", JSON.stringify(date2))
  },
})

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6、自定义排版布局

CJCalendar({
  // 范围选择
  optMode: OptMode.RANGE,
  // 修改主题色
  todayFontColor: "#E64A19",
  // 开始日期
  startDate: new Date(2024, 2, 3),
  endDate: new Date(2024, 2, 20),
  // 自定义每项排版布局
  cellLayout: (date: CJDateItem) => {
    this.cellLayout(date)
  },
  // 日期选择变化监听
  onDateChange: (date1: CJDateItem, date2: CJDateItem) => {
    console.log(TAG, "date1：", JSON.stringify(date1))
    console.log(TAG, "date2：", JSON.stringify(date2))
  },
})

@Builder cellLayout(item: CJDateItem) {
    Column() {
      Text(item.date + "")
        .fontSize(18)
        .fontColor(item.isPre || item.isNext ? "#CCCCCC" : "#323232")
      Text("你好")
        .fontSize(12)
    }
}

在这里插入图片描述

7、自定义顶部布局

CJCalendar({
  // 范围选择
  optMode: OptMode.RANGE,
  // 修改主题色
  todayFontColor: "#E64A19",
  // 开始日期
  startDate: new Date(2024, 2, 3),
  endDate: new Date(2024, 2, 20),
  cusTopLayout: (
    preMonth: () => void,
    nextMonth: () => void,
    backToday: () => void,
  ) => {
    this.cusTopLayout(preMonth, nextMonth, backToday)
  },
  cusTopStateListener: (title?: string,
                        hasPre?: boolean,
                        hasNext?: boolean,
                        showFastToday?: boolean) => {
    this.title = title
  }
})

@Builder cusTopLayout(preMonth: () => void,
    nextMonth: () => void,
    backToday: () => void) {
        Column() {
          Row() {
            Button("上一月")
              .onClick(() => {
                preMonth()
              })
            Text(this.title)
            Button("下一月")
              .onClick(() => {
                nextMonth()
              })
            Button("今天")
              .onClick(() => {
                backToday()
              })
          }
    .justifyContent(FlexAlign.Center)
      .width("100%")
    
    Text("广告位啥的你来加")
      .width("100%")
      .height(100)
      .fontSize(20)
      .backgroundColor("#ffcfdf")
      .fontColor("#112d4e")
      .textAlign(TextAlign.Center)
    }
    .width("100%")
}

在这里插入图片描述

8、初始化选中项

a、多选默认项
CJCalendar({
selectedDates: [
  "2024-03-12",
  "2024-03-15",
  "2024-03-18",
  "2024-03-28"
],
optMode: OptMode.MULTIPLE,
onDateChange: (dates: CJDateItem[]) => {
  console.log(TAG, "date1：", JSON.stringify(dates))
},
})

在这里插入图片描述

b、范围选择默认项
CJCalendar({
selectedDates: [
  "2024-03-05",
  "2024-03-13",
],
optMode: OptMode.RANGE,
onDateChange: (date1: CJDateItem, date2: CJDateItem) => {
  console.log(TAG, "date1：", JSON.stringify(date1))
  console.log(TAG, "date2：", JSON.stringify(date2))
},
})

在这里插入图片描述

c、单选择默认项
CJCalendar({
selectedDates: [
  "2024-03-11",
],
optMode: OptMode.SINGLE,
onDateChange: (date1: CJDateItem) => {
  console.log(TAG, "date1：", JSON.stringify(date1))
},
})

在这里插入图片描述

9、自定义选中样式

a、自定义独立选中风格样式
CJCalendar({
    optMode: OptMode.RANGE,
    rangeStyle: SelectedStyle.CLOSE,// ALONE：独立风格， CLOSE：封闭风格
    selectedBackgroundLayout: (item: CJDateItem, isStart?: boolean, isEnd?: boolean) => {
      this.AloneSelectedLayout(item, isStart, isEnd)
    },
    onDateChange: (date1: CJDateItem, date2: CJDateItem) => {
      console.log(TAG, "date1：", JSON.stringify(date1))
      console.log(TAG, "date2：", JSON.stringify(date2))
    },
})

@Builder
SelectedBackgroundLayout(item: CJDateItem, isStart?: boolean, isEnd?: boolean){
    Column()
      .width("100%")
      .height("100%")
      .backgroundColor(Color.Brown)
}

在这里插入图片描述

在这里插入图片描述

b、自定义封闭式范围选择两端圆角
CJCalendar({
    optMode: OptMode.RANGE,
    rangeStyle: SelectedStyle.CLOSE,// ALONE：独立风格， CLOSE：封闭风格
    extremityRadius: 999,  
    selectedBackgroundLayout: (item: CJDateItem, isStart?: boolean, isEnd?: boolean) => {
      this.AloneSelectedLayout(item, isStart, isEnd)
    },
    onDateChange: (date1: CJDateItem, date2: CJDateItem) => {
      console.log(TAG, "date1：", JSON.stringify(date1))
      console.log(TAG, "date2：", JSON.stringify(date2))
    },
})

@Builder
SelectedBackgroundLayout(item: CJDateItem, isStart?: boolean, isEnd?: boolean){
    Column()
      .width("100%")
      .height("100%")
      .backgroundColor(Color.Brown)
}

在这里插入图片描述

移驾学习交流群

在这里插入图片描述

这只是冰山一脚，

还有很多功能可自行探索
。。。。。。

戏耍明天
关注
  • 9
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
Vue3+Typescript日历组件
07-29
首先，我们从标题"Vue3+Typescript日历组件"出发，理解其核心是创建一个基于Vue3的组件，且使用了TypeScript作为编程语言。TypeScript是JavaScript的超集，它提供了静态类型系统，有助于在编码阶段发现潜在的错误，...
基于vue20开发的轻量高性能日历组件
08-10
本主题聚焦于“基于vue20开发的轻量高性能日历组件”，这涉及到JavaScript开发中的一个常见控件——日历，尤其适用于表单输入日期时的交互设计。 首先，我们要理解“vue20”实际上指的是Vue.js 2.0版本。Vue.js 2.0...
HarmonyOS NEXT自定义日历选择器_harmonyos 日历组件(3)
2301_78146994的博客
04-09 1009
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
HarmonyOS NEXT应用开发—自定义日历选择器
1
03-15 767
本示例介绍通过CustomDialogController类显示自定义日历选择器。
鸿蒙ArkTS声明式组件：【CalendarPicker】
最新发布
2401_82772199的博客
06-19 532
日历选择器组件,提供下拉日历弹窗，可以让用户选择日期。该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
鸿蒙开发：基于ArkUI框架实现日历应用
qq_51696509的博客
01-03 1828
一.自定义组件生命周期函数：在组件的build函数之前执行，可以做数据的初始化操作。：在组件销毁之前执行，不允许改变状态变量，会导致应用程序行为不稳定，可以做资源的释放操作。onPageShow：仅@Entry修饰的自定义组件生效，应用进入前台台，页面显示时触发。onPageHide：仅@Entry修饰的自定义组件生效，应用进入后台，页面消失时触发。二.自定义组件常用属性@State：变量需要本地初始化，初始化的值可以被构造参数覆盖；@Prop。
扩展鸿蒙ArkUI日期组件
luck332的专栏
02-05 353
鸿蒙ArkUI日期组件使用的是DatePickerDialog.show基础上扩展的表单式输入组件，方便在输入日期方式快速使用及复用。使用也是非常的简单，只需要引入组件然后调用组件，值实现了双向绑定。
Calendar（日历类）
cj_0513的博客
04-24 707
包含功能: 1.获取当前月的上一个月 2.得到当前月的第一天，返回2016-06-01这样的字符串 3.获取当前年的第一个月，返回2016-01这样的数据 4.获取当前年已过的所有季度的集合(季度包含的月份未完则也算入) 5.获取昨天 6.获取指定时间范围内的所有日期 7.获取指定时间范围内的所有月份 8.获取指定日期范围的所有周的周一到周日，格式为周一~周日，如2016-...
鸿蒙开发-ArkUI框架实战【日历应用 】
m0_70748845的博客
01-17 1270
一. 自定义组件生命周期函数aboutToAppear：在组件的 build 函数之前执行，可以做数据的初始化操作。aboutToDisappear：在组件销毁之前执行，不允许改变状态变量，会导致应用程序行为不稳定，可以做资源的释放操作。onPageShow：仅@Entry修饰的自定义组件生效，应用进入前台台，页面显示时触发。onPageHide：仅@Entry修饰的自定义组件生效，应用进入后台，页面消失时触发。二. 自定义组件常用属性。
HarmonyOS(鸿蒙)开发之ArtTs自定义日历组件一
aTim博客
11-24 1186
然后用ForEach循环生一周的数据，一周是从周日还是周一开始，这个可以设置成配置项，这个value值可以为@State value: string[] = ['一', '二', '三', '四', '五', '六', '日']下面具体的日期数据，我的思路是首先获取当月第一天是星期几，然后直接用上个月的天数填满当前行，同理结尾也是这个方式。一个基本样式的日历就渲染出来，下篇文章我会带来左右分页点击上个月下个月的功能，还有点击当前日期可以切换年份和月份。首先是一个头部当天日期，和左右的翻页样式。
分布式数据实现跨设备数据同步的N个秘密 | 分布式数据管理解析（二）
2401_83047642的博客
03-06 1095
由于数据是以记录按时间由旧到新依次同步的，保证旧记录的同步完成在新纪录同步之前，因此同步进度其实是一个单调递增的时刻值，类似水位线，水位线之下的记录就是已经完成同步的数据。水位同步用于协商确认同步双方的同步进度。当同步一方还原过数据库时，双方记录的同步进度就会存在差异，需要协商以便确认数据同步时记录的起始时刻。
OpenHarmony实战开发-如何实现国际化日历展示应用。
2401_82546228的博客
04-08 815
本示例主要展示了国际化模块的相关功能，使用@ohos.i18n 接口，实现简单日历展示、字符类型判断、文本断点处理功能;
HarmonyOS NEXT自定义日历选择器_harmonyos 日历组件(2)
pasehelpme的博客
04-15 597
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
华为鸿蒙HarmonyOS开发整理资料汇总.zip
11-25
华为鸿蒙HarmonyOS开发整理资料汇总，共38份。 1学前必读：HarmonyOS学习资源主题分享 2学前必读：OpenHarmony-联盟生态资料合集 3-1.HarmonyOS概述：技术特性 3-2.HarmonyOS概述：开发工具与平台 3-3.HarmonyOS...
微信小程序日历组件（可多选单选）
01-13
微信小程序日历组件是开发微信小程序时常用的一种交互元素，它允许用户在日历视图中选择特定日期或时间段，通常用于预约、日程管理、时间选择等场景。本组件的特点在于其支持单选和多选模式，可以方便地进行日期操作...
微信小程序uniapp日历组件，可以自定义文案，可以上下滑动选择日期
03-01
综上所述，开发一个uni-app微信小程序的日历组件涉及到前端开发、组件化编程、事件处理、样式定制、性能优化等多个方面的知识。通过这个组件，开发者可以提供一个直观、易用的日期选择界面，提升用户在使用微信小...
鸿蒙应用开发 | 日期选择器(DatePicker)的功能和用法
07-08 2243
导语：大家好，我是你们的朋友 朋哥，鸿蒙开发已经半年了，了解到了鸿蒙的强大，也遇到了一些鸿蒙的缺陷，但是一个新的系统开发真的是很爽，后续说说感受。 学弟：鸿蒙有没有好的时间选择器呢？ 码工：当然有啊，Android有的鸿蒙肯定有。 学弟：开发复杂吗，作为开发者 最好是系统支持的！ 码工：鸿蒙在开发日期选择器的时候 只需要一个组件就搞定了。适用场景：开发一个信息提交界面，页面中有信息采集，需要选择日期提交。 好了，下面开始 我们今天的内容DatePicker...... 下面我们开始...
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之DatePicker组件
zy0412326的专栏
01-31 520
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之DatePicker组件。
3.11【HarmonyOS鸿蒙开发】组件TimePicker
hanru723的博客
07-13 313
3.11【HarmonyOS鸿蒙开发】组件TimePicker 作者：韩茹 公司：程序咖（北京）科技有限公司 鸿蒙巴士专栏作家 TimePicker主要供用户选择时间。 一、支持的XML属性 TimePicker的共有XML属性继承自：StackLayout TimePicker的自有XML属性见下表： 属性名称 中文描述 取值 取值说明 使用案例 am_pm_order 上午下午排列顺序 0 表示am/pm列靠时间选择器起始端显示。 ohos:am_pm_order=“0” 1
iOS 开发自定义日历组件
11-08
iOS开发自定义日历组件可以使用UIKit库中的HorizonCalendar组件。它是一个高性能的iOS日历UI组件，用于在垂直滚动或水平滚动日历组件中显示日期范围。它的声明性API使更新日历变得简单明了，同时还提供了许多自定义点来支持各种设计和用例。实际上，HorizonCalendar就是一个collectionview，第一天在星期几为了前面空多少个，有多少天就是确定collectionview的item有多少个（第一天的index + 天数）。collectionviewDataSource负责处理返回的数据，这就要把返回的数据的时间转换成day，然后判断day是否等于显示的天相等。再把数据放入。collectionviewdelegate负责点击事件判断，已点、未点、不能点。如果需要自定义日历组件，可以参考HorizonCalendar的实现方式进行开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值