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

一、硬件連接（同電子書教程）

硬件連接方式與電子書閱讀器完全一致，請參考系列教程（一）的硬件連接部分。顯示屏直接插入零知增強板專用接口，無需額外連線。

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

ILI9486擴展板顯示屏及日歷UI頁面圖：

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

2.1 核心數(shù)據(jù)結構

// 靜態(tài)變量用于存儲觸摸狀態(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;
            
            // 滑動閾值判斷
            if (abs(dx) > 30) {
                if (dx > 0) {
                    // 向右滑動：上個月
                    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 {
                    // 向左滑動：下個月
                    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)建日歷對象
    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);
    
    // 設置當前日期
    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);
    
    // 設置高亮日期（示例）
    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);
    
    // 設置樣式（可選）
    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);
    
    // 保存日歷擴展數(shù)據(jù)用于事件處理
    calendar_cal_ext = lv_obj_get_ext_attr(calendar);
    
    // 設置事件回調
    lv_obj_set_event_cb(calendar, calendar_event_cb);
    
    // 添加滑動提示文本
    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 功能說明

通過左右滑動實現(xiàn)自然流暢的月份切換

可標記重要日期（如會議、生日）

當前日期有特殊紅色邊框標識

觸摸日期時有視覺反饋效果

三、零知IDE配置（同電子書教程）

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

正確配置LCD屏幕驅動

啟用觸摸屏支持

添加LVGL庫依賴

四、演示效果

4.1 功能演示

主界面點擊日歷圖標進入應用

查看當前月份日期布局

左右滑動切換不同月份

點擊查看高亮日期的詳細信息

4.2 視頻效果

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

日歷界面顯示當前月份，高亮日期為藍色，今日有紅色邊框

4.3 性能指標

五、常見問題解決

5.1 日期顯示錯位

解決方案：

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

5.2 滑動不靈敏

優(yōu)化方案：

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

5.3 高亮日期不顯示

檢查步驟：

確認日期格式正確：{年, 月, 日}

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

驗證樣式是否正確應用：

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

六、總結與擴展

6.1 實現(xiàn)總結

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

直觀的月份/日期展示

流暢的滑動切換體驗

重要日期標記功能

實時日期顯示集成

6.2 擴展建議

//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 下一步

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

?零知實驗室 - 讓嵌入式開發(fā)更簡單：
www.lingzhilab.comhttp://www.lingzhilab.com/

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

?訪問零知開源平臺，獲取更多實戰(zhàn)項目和教程資源吧！

審核編輯 黃宇