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

cjcalendar

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

简介

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

下载安装

ohpm install cjcalendar

使用方式

import { CJCalendar } from 'cjcalendar'
1

CJCalendar()
1

一、各项属性

二、常用方法

三、CJDateItem通用属性

四、OptMode 操作模式

五、SelectedStyle 选中样式风格

五、使用案例

1、直接使用

import { CJCalendar } from 'cjcalendar'
1

CJCalendar()
1

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))
  },
})
1
2
3
4
5
6
7
8
9
10

3、多选

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

4、修改主题色

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

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))
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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))
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@Builder cellLayout(item: CJDateItem) {
    Column() {
      Text(item.date + "")
        .fontSize(18)
        .fontColor(item.isPre || item.isNext ? "#CCCCCC" : "#323232")
      Text("你好")
        .fontSize(12)
    }
}
1
2
3
4
5
6
7
8
9

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
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

@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%")
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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))
},
})
1
2
3
4
5
6
7
8
9
10
11
12

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))
},
})
1
2
3
4
5
6
7
8
9
10
11

c、单选择默认项

CJCalendar({
selectedDates: [
  "2024-03-11",
],
optMode: OptMode.SINGLE,
onDateChange: (date1: CJDateItem) => {
  console.log(TAG, "date1：", JSON.stringify(date1))
},
})
1
2
3
4
5
6
7
8
9

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))
    },
})
1
2
3
4
5
6
7
8
9
10
11

@Builder
SelectedBackgroundLayout(item: CJDateItem, isStart?: boolean, isEnd?: boolean){
    Column()
      .width("100%")
      .height("100%")
      .backgroundColor(Color.Brown)
}
1
2
3
4
5
6
7

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))
    },
})
1
2
3
4
5
6
7
8
9
10
11
12

@Builder
SelectedBackgroundLayout(item: CJDateItem, isStart?: boolean, isEnd?: boolean){
    Column()
      .width("100%")
      .height("100%")
      .backgroundColor(Color.Brown)
}
1
2
3
4
5
6
7

移驾学习交流群

这只是冰山一脚，

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