日历部件

• 日历部件可以展现当前的日期，并帮助用户快速浏览每月的日程安排。

日历部件的组成

• 日历部件由两个部分组成：
  • 主体背景 LV_PART_MAIN；
  • 各个按钮 LV_PART_ITEMS（指向日期和名称）。

创建日历部件

• 在 LVGL 中，用户需要创建日历部件，可调用以下函数：

  lv_obj_t *lv_calendar_create(lv_obj_t *parent);
• 上述函数只有一个形参，该形参指向该部件的父类。

设置当前日期

• 在默认的情况下，当用户创建出一个日历部件，该部件的当前日期为 2020 年 1 月 1 号，如果用户需要设置日期，则可以调用 lv_calendar_set_today_date 函数。注意：当前日期并不等同于实时显示的日期！

显示日期

• 如果我们仅仅是设置了当前日期，日期部件并不会自动显示该日期，所以我们必须手动跳转当前日期对应的月份，相关的函数为 lv_calendar_set_shown_date。

• 接下来，我们以简单示例来理解日期显示的设置，示例代码如下所示：

  lv_obj_t* calendar = lv_calendar_create(lv_scr_act());          /* 定义并初始化日历 */
  lv_obj_set_size(calendar, 400, 400);                            /* 设置日历的大小 */
  lv_obj_center(calendar);       
  lv_calendar_set_today_date(calendar, 2022, 4, 7);               /* 设置当前日期 */
  lv_calendar_set_showed_date(calendar, 2022, 4);                 /* 设置显示的月份 */
  lv_calendar_header_dropdown_create(calendar);                   /* 设置日历头 */
  lv_obj_update_layout(calendar);                                 /* 更新日历参数 */   

• 在上述源码中，我们先创建一个日历部件，然后设置当前日期和显示的月份，最后显示日历头和更新日历参数。值得注意的是，日历部件设置日历头的方式有两个，如下所示：

  • 调用 lv_calendar_header_dropdown_create 函数设置；
  • 调用 lv_calendar_header_arrow_create 函数设置。

• 上述方法中，①是由下拉列表的形式来选择年月份；②是由按键选择月份，值得注意的是，方法②不能调整年份，它的年份需要根据月份来跳转。示例代码运行效果图如下所示：

  

设置日期高亮

• 如果用户需要某个日期高亮显示，可调用 lv_calendar_set_highlighted_dates 函数来进行设置。

• 接下来，我们以简单示例来理解日期高亮的设置，示例代码如下所示：

  static lv_calendar_date_t highlight_days[2]; /* 定义的日期,必须用全局或静态定义 */
  /* 设置第一个日期 */
  highlight_days[0].year = 2022;
  highlight_days[0].month = 4;
  highlight_days[0].day = 5;
  /* 设置第二个日期 */
  highlight_days[1].year = 2022;
  highlight_days[1].month = 4;
  highlight_days[1].day = 6;
  lv_calendar_set_highlighted_dates(calendar, highlight_days, 2);

• 在上述源码中，我们首先定义了一个静态变量 highlight_days，然后设置该结构体的成员变量分别为“2022、4、5”和“2022、4、6”，最后调用 lv_calendar_set_highlighted_dates 函数，设置这两个日期为高亮状态。示例代码运行效果图如下所示：

  

• 在默认的情况下，日历都是以英文的形式展示(Su、Mo、Tu、We、Th、Fr 和 Sa)，如果用户想设置成中文的日名，可调用 lv_calendar_set_day_names 函数。

  /* 设置字体 */
  lv_obj_set_style_text_font(calendar, &myFont14, LV_STATE_DEFAULT);  /* 设置字体 */
  const char* day_names[7] = { "一", "二","三","四","五","六","日", };
  lv_calendar_set_day_names(calendar, day_names);                     /* 设置日名 */
  lv_obj_update_layout(calendar);                                     /* 更新日历参数 */

• 在上述源码中，我们为日历部件设置了字体：myFont14（该字体必须包含中文），然后设置 day_names 数组的内容，调用 lv_calendar_set_day_names 函数，设置日历的日名，最后更新日历参数。示例代码运行效果图如下所示：

  

日历部件的 API 函数

• LVGL 官方提供了一些与日历部件相关 API，如下表所示：

  函数	描述
  lv_calendar_create()	创建日历部件
  lv_calendar_set_today_date()	设置当前的日期
  lv_calendar_set_showed_date()	设置显示的日期
  lv_calendar_set_highlighted_dates()	设置高亮显示的日期
  lv_calendar_set_day_names()	置日历（星期）的名称
  lv_calendar_get_btnmatrix()	获取日历的按钮矩阵对象
  lv_calendar_get_today_date()	获取当前的日期
  lv_calendar_get_showed_date()	获取当前显示的日期
  lv_calendar_get_highlighted_dates()	获取高亮显示的日期
  lv_calendar_get_highlighted_dates_num()	获取高亮显示的日期数量
  lv_calendar_get_pressed_date()	获取当前按下的日期