本教程將指導(dǎo)您在STM32F4平臺(tái)上實(shí)現(xiàn)一個(gè)功能完善的日歷應(yīng)用，通過(guò)ILI9486電阻觸摸屏提供直觀的日期查看和交互體驗(yàn)。該日歷應(yīng)用是智能設(shè)備UI系統(tǒng)中的核心組件，具有以下核心功能：月份視圖展示、流暢的交互體驗(yàn)、日期標(biāo)記系統(tǒng)

一、硬件連接（同電子書(shū)教程）

硬件連接方式與電子書(shū)閱讀器完全一致，請(qǐng)參考系列教程（一）的硬件連接部分。顯示屏直接插入零知增強(qiáng)板專(zhuān)用接口，無(wú)需額外連線。

直達(dá)鏈接：零知開(kāi)源——STM32F4實(shí)現(xiàn)ILI9486顯示屏UI界面系列教程（一）：電子書(shū)閱讀器功能

ILI9486擴(kuò)展板顯示屏及日歷UI頁(yè)面圖：

二、軟件UI組件實(shí)現(xiàn)

2.1 核心數(shù)據(jù)結(jié)構(gòu)

// 靜態(tài)變量用于存儲(chǔ)觸摸狀態(tài)
static lv_point_t calendar_touch_start;
static lv_calendar_ext_t * calendar_cal_ext;

2.2 觸摸事件處理

// 日歷事件處理函數(shù)
static void calendar_event_cb(lv_obj_t * obj, lv_event_t event)
{
    if (event == LV_EVENT_PRESSED) {
        lv_indev_t * indev = lv_indev_get_act();
        if (indev) {
            lv_indev_get_point(indev, &calendar_touch_start);
        }
    }
    else if (event == LV_EVENT_RELEASED) {
        lv_indev_t * indev = lv_indev_get_act();
        lv_point_t touch_end;
        if (indev) {
            lv_indev_get_point(indev, &touch_end);
            lv_coord_t dx = touch_end.x - calendar_touch_start.x;
            
            // 滑動(dòng)閾值判斷
            if (abs(dx) > 30) {
                if (dx > 0) {
                    // 向右滑動(dòng)：上個(gè)月
                    if (calendar_cal_ext->showed_date.month <= 1) {
                        calendar_cal_ext-?>showed_date.month = 12;
                        calendar_cal_ext->showed_date.year--;
                    } else {
                        calendar_cal_ext->showed_date.month--;
                    }
                } else {
                    // 向左滑動(dòng)：下個(gè)月
                    if (calendar_cal_ext->showed_date.month >= 12) {
                        calendar_cal_ext->showed_date.month = 1;
                        calendar_cal_ext->showed_date.year++;
                    } else {
                        calendar_cal_ext->showed_date.month++;
                    }
                }
                lv_obj_invalidate(obj);
            }
        }
    }
}

2.3 初始化界面

void show_app_calendar()
{
    lv_obj_t *win = create_app_win("Calendar");
    lv_coord_t hres = lv_disp_get_hor_res(NULL);
    lv_coord_t vres = lv_disp_get_ver_res(NULL);
    
    // 創(chuàng)建日歷對(duì)象
    lv_obj_t * calendar = lv_calendar_create(win, NULL);
    lv_obj_set_size(calendar, hres - 40, vres - 100);
    lv_obj_align(calendar, NULL, LV_ALIGN_CENTER, 0, 10);
    
    // 設(shè)置當(dāng)前日期
    lv_calendar_date_t today;
    today.year = 2025;
    today.month = 6;
    today.day = 18;
    lv_calendar_set_today_date(calendar, &today);
    lv_calendar_set_showed_date(calendar, &today);
    
    // 設(shè)置高亮日期（示例）
    static lv_calendar_date_t highlighted_dates[2];
    highlighted_dates[0].year = 2025;
    highlighted_dates[0].month = 6;
    highlighted_dates[0].day = 20;
    
    highlighted_dates[1].year = 2025;
    highlighted_dates[1].month = 6;
    highlighted_dates[1].day = 25;
    
    lv_calendar_set_highlighted_dates(calendar, highlighted_dates, 2);
    
    // 設(shè)置樣式（可選）
    static lv_style_t style_today_box;
    lv_style_copy(&style_today_box, lv_calendar_get_style(calendar, LV_CALENDAR_STYLE_TODAY_BOX));
    style_today_box.body.border.color = LV_COLOR_RED;
    style_today_box.body.border.width = 2;
    lv_calendar_set_style(calendar, LV_CALENDAR_STYLE_TODAY_BOX, &style_today_box);
    
    static lv_style_t style_highlighted_days;
    lv_style_copy(&style_highlighted_days, lv_calendar_get_style(calendar, LV_CALENDAR_STYLE_HIGHLIGHTED_DAYS));
    style_highlighted_days.text.color = LV_COLOR_BLUE;
    lv_calendar_set_style(calendar, LV_CALENDAR_STYLE_HIGHLIGHTED_DAYS, &style_highlighted_days);
    
    // 保存日歷擴(kuò)展數(shù)據(jù)用于事件處理
    calendar_cal_ext = lv_obj_get_ext_attr(calendar);
    
    // 設(shè)置事件回調(diào)
    lv_obj_set_event_cb(calendar, calendar_event_cb);
    
    // 添加滑動(dòng)提示文本
    lv_obj_t * hint_label = lv_label_create(win, NULL);
    lv_label_set_text(hint_label, "Swipe left/right to change month");
    lv_obj_align(hint_label, calendar, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
    lv_obj_set_style(hint_label, &lv_style_plain_color);
}

2.4 功能說(shuō)明

通過(guò)左右滑動(dòng)實(shí)現(xiàn)自然流暢的月份切換

可標(biāo)記重要日期（如會(huì)議、生日）

當(dāng)前日期有特殊紅色邊框標(biāo)識(shí)

觸摸日期時(shí)有視覺(jué)反饋效果

三、零知IDE配置（同電子書(shū)教程）

請(qǐng)參考系列教程（一）的零知IDE配置部分，確保：

正確配置LCD屏幕驅(qū)動(dòng)

啟用觸摸屏支持

添加LVGL庫(kù)依賴(lài)

四、演示效果

4.1 功能演示

主界面點(diǎn)擊日歷圖標(biāo)進(jìn)入應(yīng)用

查看當(dāng)前月份日期布局

左右滑動(dòng)切換不同月份

點(diǎn)擊查看高亮日期的詳細(xì)信息

4.2 視頻效果

https://www.bilibili.com/video/BV1J9KEzDELn/?spm_id_from=333.1387.homepage.video_card.click&vd_source=a31e3d8d8ce008260eee442534c2f63d

日歷界面顯示當(dāng)前月份，高亮日期為藍(lán)色，今日有紅色邊框

4.3 性能指標(biāo)

五、常見(jiàn)問(wèn)題解決

5.1 日期顯示錯(cuò)位

解決方案：

// 在日歷創(chuàng)建后添加布局刷新
lv_obj_refresh_ext_draw_pad(calendar);

5.2 滑動(dòng)不靈敏

優(yōu)化方案：

// 降低滑動(dòng)檢測(cè)閾值（原30像素改為20像素）
if (abs(dx) > 20) { 
    // 月份切換邏輯
}

5.3 高亮日期不顯示

檢查步驟：

確認(rèn)日期格式正確：{年, 月, 日}

檢查高亮日期數(shù)組大小匹配

驗(yàn)證樣式是否正確應(yīng)用：

// 調(diào)試打印當(dāng)前樣式
lv_style_t *style = lv_calendar_get_style(calendar, LV_CALENDAR_STYLE_HIGHLIGHTED_DAYS);
Serial.printf("Text color: %dn", style->text.color.full);

六、總結(jié)與擴(kuò)展

6.1 實(shí)現(xiàn)總結(jié)

本教程實(shí)現(xiàn)了日歷的核心功能：

直觀的月份/日期展示

流暢的滑動(dòng)切換體驗(yàn)

重要日期標(biāo)記功能

實(shí)時(shí)日期顯示集成

6.2 擴(kuò)展建議

//1.添加事件提醒
typedef struct {
    lv_calendar_date_t date;
    char event[32]; // 事件描述
} CalendarEvent;

//2.周視圖切換
lv_obj_t *btn_switch = lv_btn_create(win, NULL);
lv_obj_set_event_cb(btn_switch, switch_view_cb);

//農(nóng)歷支持
const char* get_lunar_date(uint8_t month, uint8_t day);

6.3 下一步

在下一個(gè)系列教程中，我們將實(shí)現(xiàn)記事本鍵盤(pán)和顯示功能。

?零知實(shí)驗(yàn)室 - 讓嵌入式開(kāi)發(fā)更簡(jiǎn)單：
www.lingzhilab.comhttp://www.lingzhilab.com/

?零知開(kāi)源是一個(gè)真正屬于國(guó)人自己的開(kāi)源軟硬件平臺(tái)，在開(kāi)發(fā)效率上超越了Arduino平臺(tái)并且更加容易上手，大大降低了開(kāi)發(fā)難度。
?零知開(kāi)源在軟件方面提供了完整的學(xué)習(xí)教程和豐富示例代碼，讓不懂程序的工程師也能非常輕而易舉的搭建電路來(lái)創(chuàng)作產(chǎn)品，測(cè)試產(chǎn)品。快來(lái)動(dòng)手試試吧！

?訪問(wèn)零知開(kāi)源平臺(tái)，獲取更多實(shí)戰(zhàn)項(xiàng)目和教程資源吧！

審核編輯 黃宇