当前位置：首页 > news >正文

LVGL- Calendar 日历控件

news 来源：原创 2025/6/8 8:48:25

1 日历控件

1.1 日历背景

lv_calendar 是 LVGL（Light and Versatile Graphics Library）提供的标准 GUI 控件之一，用于显示日历视图。它支持用户查看某年某月的完整日历，还可以实现点击日期、标记日期、导航月份等操作。这个控件通常用于需要日期交互的场景，比如设置日期、查看计划、日程签到等。

1.2 主要功能特点

1.2.1 显示标准公历月份

支持自动计算每月天数（含闰年判断）
支持周起始日自定义（默认周一）

1.2.2 日期选择功能

支持用户点击单个日期进行选择
支持回调事件获取所选日期

1.2.3 高亮多个日期

可用于标记节假日、签到、提醒等
设置高亮颜色以区分普通日期

1.2.4 当前日期标识

提供 today_date 属性，用于高亮当天
可灵活设定实际系统日期

1.2.5 支持月份切换

可通过箭头或下拉方式更换月份
提供 calendar_header_arrow 和 calendar_header_dropdown 两种头部风格

1.2.6 样式高度可定制

通过 LV_PART_* 接口设置颜色、背景、字体
与 LVGL 样式系统无缝集成，适配不同 UI 风格

2 常见函数

2.1 创建一个新的日历控件

lv_calendar_create(lv_obj_t * parent)

作用：在指定父对象上创建一个新的日历控件对象。

参数：
parent：父对象（如 lv_scr_act() 表示当前屏幕）
返回值：返回日历对象 lv_obj_t *

lv_obj_t * calendar = lv_calendar_create(lv_scr_act());

在这里插入图片描述

2.2 设置“今天”的日期，用于高亮当前日期。

lv_calendar_set_today_date(lv_obj_t * calendar, uint16_t year, uint8_t month, uint8_t day)

作用：设置“今天”的日期，用于高亮当前日期。

使用场景：用于展示当前系统日期或突出显示今天。

示例：

lv_calendar_set_today_date(calendar, 2025, 5, 17);

2.2 设定月份和年份

 lv_calendar_set_showed_date(lv_obj_t * calendar, uint16_t year, uint8_t month)

作用：设置日历当前显示的月份和年份。

使用场景：初始化时显示特定月份，或切换月份。

示例：

lv_calendar_set_showed_date(calendar, 2025, 5);

在这里插入图片描述

2.3 “高亮日期”

lv_calendar_set_highlighted_dates(lv_obj_t * calendar, const lv_calendar_date_t * dates, uint16_t date_num)

作用：设置一组“高亮日期”，通常用于标记签到、提醒、节假日等。

参数：

dates：日期数组

date_num：日期数量

static lv_calendar_date_t marked_days[2] = {{2025, 5, 10},{2025, 5, 20}
};
lv_calendar_set_highlighted_dates(calendar, marked_days, 2);

在这里插入图片描述

2.4 获取当前选中的日期

lv_res_t lv_calendar_get_pressed_date(const lv_obj_t * obj, lv_calendar_date_t * date);typedef struct {uint16_t year;uint8_t month;uint8_t day;
} lv_calendar_date_t;

作用：当用户点击某个日期时，获取当前选中的日期。

返回值：返回一个指向 lv_calendar_date_t 的指针（包含年/月/日），如果没有选中则返回 NULL。

配合事件使用：

void calendar_event_cb(lv_event_t* e) {lv_obj_t* calendar = lv_event_get_current_target(e);lv_calendar_date_t date;lv_res_t reult=lv_calendar_get_pressed_date(calendar,&date);if (reult ==LV_RES_OK) {lv_log("选择日期：%d-%d-%d\n", date.year, date.month, date.day);}
}lv_obj_add_event_cb(calendar, calendar_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

在这里插入图片描述

2.5 添加“左右箭头”头部

lv_calendar_header_arrow_create(lv_obj_t * calendar)
作用：为日历控件添加“左右箭头”头部，用于月份切换。

返回值：返回头部对象

示例：

lv_obj_t * header = lv_calendar_header_arrow_create(calendar);

在这里插入图片描述

2.7 下拉框样式”的年月选择头部

lv_calendar_header_dropdown_create(lv_obj_t * calendar)

作用：为日历添加“下拉框样式”的年月选择头部。

示例：

    lv_calendar_header_dropdown_create(calendar);lv_obj_set_size(calendar, 200, 300);lv_obj_center(calendar);

在这里插入图片描述

3 综合代码

lv_obj_set_style_…() 系列函数来为 lv_calendar 添加自定义颜色和风格（style）。以下是一个增强版的日历应用界面，它不仅有“日期确认”功能，还对日历控件进行了美化：背景色、边框、选中颜色、今日高亮等都可以设置。

// 保存选中的日期
static lv_calendar_date_t selected_date;
static bool has_selected_date = false;// 事件：点击日历某个日期
static void calendar_event_cb(lv_event_t* e)
{lv_obj_t* calendar = lv_event_get_current_target(e);// 获取点击的日期if (lv_calendar_get_pressed_date(calendar, &selected_date) == LV_RES_OK) {has_selected_date = true;printf("你点击了日期: %04d-%02d-%02d\n", selected_date.year, selected_date.month, selected_date.day);}
}// 事件：点击“确认按钮”
static void confirm_btn_event_cb(lv_event_t* e)
{if (has_selected_date) {printf("你设置的日期是: %04d-%02d-%02d\n",selected_date.year, selected_date.month, selected_date.day);// 这里可以调用你自己的保存函数// save_date_to_config(selected_date);// 也可以弹出提示框或跳转页面}else {printf("请先选择日期\n");}
}void create_calendar_setting_page(void)
{// 创建日历lv_obj_t* calendar = lv_calendar_create(lv_scr_act());// 设置大小和位置lv_obj_set_size(calendar, 230, 200);lv_obj_center(calendar);// 设置今天日期（用于高亮）lv_calendar_set_today_date(calendar, 2025, 5, 17);// 设置当前显示的日期lv_calendar_set_showed_date(calendar, 2025, 5);// 添加箭头头部切换月份lv_calendar_header_arrow_create(calendar);// 添加事件lv_obj_add_event_cb(calendar, calendar_event_cb, LV_EVENT_VALUE_CHANGED, NULL);// 🎨 设置风格：背景色、边框、圆角lv_obj_set_style_bg_color(calendar, lv_palette_lighten(LV_PALETTE_BLUE, 3), 0);lv_obj_set_style_border_color(calendar, lv_palette_darken(LV_PALETTE_BLUE, 2), 0);lv_obj_set_style_border_width(calendar, 2, 0);lv_obj_set_style_radius(calendar, 10, 0);// 设置今天的高亮颜色lv_obj_set_style_bg_color(calendar, lv_palette_main(LV_PALETTE_RED), LV_PART_ITEMS | LV_STATE_PRESSED);lv_obj_set_style_bg_color(calendar, lv_palette_main(LV_PALETTE_GREEN), LV_PART_ITEMS | LV_STATE_CHECKED);lv_obj_set_style_text_color(calendar, lv_color_white(), LV_PART_ITEMS | LV_STATE_CHECKED);// 创建确认按钮lv_obj_t* btn = lv_btn_create(lv_scr_act());lv_obj_set_size(btn, 100, 40);lv_obj_align(btn, LV_ALIGN_BOTTOM_MID, 0, -10);lv_obj_add_event_cb(btn, confirm_btn_event_cb, LV_EVENT_CLICKED, NULL);lv_obj_t* label = lv_label_create(btn);lv_label_set_text(label, "confirm");lv_obj_center(label);
}

在这里插入图片描述

1 日历控件

1.1 日历背景

1.2 主要功能特点

1.2.1 显示标准公历月份

1.2.2 日期选择功能

1.2.3 高亮多个日期

1.2.4 当前日期标识

1.2.5 支持月份切换

1.2.6 样式高度可定制

2 常见函数

2.1 创建一个新的日历控件

2.2 设置“今天”的日期，用于高亮当前日期。

2.2 设定月份和年份

2.3 “高亮日期”

2.4 获取当前选中的日期

2.5 添加“左右箭头”头部

2.7 下拉框样式”的年月选择头部

3 综合代码

相关文章：