一. LVGL GUI日歷控制元件的概念

LVGL做的日歷空間還是比較好看的，而且需要我們做的事情很少，LVGL的日歷控制元件有以下功能

• 突出顯示當天
• 突出顯示任何用戶定義的日期
• 顯示日期名稱
• 單擊按鈕進入下一個/上一個月
• 突出顯示點擊的日子

二. LVGL GUI日歷小部件和樣式

日歷的主要部分稱為 LV_CALENDAR_PART_BG ，它使用典型的背景樣式屬性繪制背景，
還有以下虛擬部分外：
LV_CALENDAR_PART_HEADER 顯示當前年和月名稱的上部區域，它還具有用于移動下一個/上個月的按鈕，它使用典型的背景屬性和填充來與背景（頂部，左側，右側）和日期名稱（底部）保持一定距離，
LV_CALENDAR_PART_DAY_NAMES 在標題下方顯示日期名稱，它使用文本樣式屬性填充來與背景（左，右），標題（上）和日期（下）保持一定距離，
LV_CALENDAR_PART_DATES 顯示從 1..28 / 29/30/31 開始的日期數字（取決于當前月份），根據本部分中定義的狀態來繪制狀態的不同“狀態”：
o 正常日期：以 LV_STATE_DEFAULT 樣式繪制
o 印刷日期： LV_STATE_PRESSED 風格鮮明
o 今天：以 LV_STATE_FOCUSED 風格繪制
o 突出顯示的日期：以 LV_STATE_CHECKED 樣式繪制

三. LVGL GUI日歷控制元件的使用

1. 概述(Overview)

設定和獲取的日歷日期，該 lv_calendar_date_t 型別用于這是一個 struct，有以下結構體成員year/month/day

2. 當前日期(Current date)

設定當前日期，用這個函式lv_calendar_set_today_date(calendar, &today_date)

獲取當前日期，用這個函式lv_calendar_get_today_date

我們來寫個代碼看看效果：

void lvgl_calendar_current_data_test(void)
{
    lv_calendar_date_t today;
    lv_calendar_date_t *today_get;
    today.year = 2021;
    today.month = 2;
    today.day = 20;

    lv_obj_t* calendar = lv_calendar_create(lv_scr_act(), NULL);
    lv_obj_set_size(calendar, 300, 300);
    lv_obj_align(calendar, NULL, LV_ALIGN_CENTER, 0, 0);

    lv_calendar_set_today_date(calendar, &today);
    today_get = lv_calendar_get_today_date(calendar);
    printf("Y/M/D:%04d/%02d/%02d\n", today_get->year, today_get->month, today_get->day);
}

整個代碼就是創建一個日歷控制元件，然后設定當前日期為2021年2月20，然后呼叫獲取當前日期，列印出來，看看是否跟我們設定的一致，看下效果

可以看到獲取的是對的，設定也是對的，但是（并不是默認顯示在當前日期界面，所以看顯示日期函式，我們來優化下）

3. 顯示日期(Shown date)

設定顯示日期，用這個函式lv_calendar_set_showed_date(calendar, &shown_date)

嘿嘿，LVGL的官網注釋的函式是lv_calendar_set_shown_date，但是這個函式卻找不到，是這個lv_calendar_set_showed_date

我們在上個小節的基礎上修正下程式，如下：

void lvgl_calendar_show_data_test(void)
{
    lv_calendar_date_t today;
    lv_calendar_date_t* today_get;
    today.year = 2021;
    today.month = 2;
    today.day = 20;

    lv_obj_t* calendar = lv_calendar_create(lv_scr_act(), NULL);
    lv_obj_set_size(calendar, 300, 300);
    lv_obj_align(calendar, NULL, LV_ALIGN_CENTER, 0, 0);

    lv_calendar_set_today_date(calendar, &today);
    lv_calendar_set_showed_date(calendar, &today);
    today_get = lv_calendar_get_today_date(calendar);
    printf("Y/M/D:%04d/%02d/%02d\n", today_get->year, today_get->month, today_get->day);
}

4. 重點標注日期(Highlighted days)

高亮顯示的日期串列應存盤在由 lv_calendar_date_t 加載的陣列中，僅保存陣列指標，因此陣列應為靜態或全
局變數，用這個函式設定lv_calendar_set_highlighted_dates(calendar, &highlighted_dates)

來個程式看下

void lvgl_calendar_highlight_data_test(void)
{
    lv_calendar_date_t today;
    static lv_calendar_date_t highlighted_days[3];       /*Only its pointer will be saved so should be static*/
    today.year = 2021;
    today.month = 2;
    today.day = 20;

    lv_obj_t* calendar = lv_calendar_create(lv_scr_act(), NULL);
    lv_obj_set_size(calendar, 300, 300);
    lv_obj_align(calendar, NULL, LV_ALIGN_CENTER, 0, 0);

    lv_calendar_set_today_date(calendar, &today);
    lv_calendar_set_showed_date(calendar, &today);

    /*Highlight a few days*/
    
    highlighted_days[0].year = 2021;
    highlighted_days[0].month = 2;
    highlighted_days[0].day = 14;

    highlighted_days[1].year = 2021;
    highlighted_days[1].month = 2;
    highlighted_days[1].day = 15;

    highlighted_days[2].year = 2021;
    highlighted_days[2].month = 2;
    highlighted_days[2].day = 16;

    lv_calendar_set_highlighted_dates(calendar, highlighted_days, 3);
}

可以看到當前日期跟重點標準日期的差別

5. 日的名稱(Name of the days)

日的名稱用以下函式設定lv_calendar_set_day_names(calendar, day_names)，其中第二個引數是一個字串陣列，比如這樣：const char * day_names[7] = {"Su", "Mo", ...};

代碼如下：

static const char* days_name[7] = { "1", "2", "3", "4", "5", "6", "7" };
void lvgl_calendar_name_day_test(void)
{
    lv_obj_t* calendar1 = lv_calendar_create(lv_scr_act(), NULL);
    lv_obj_set_size(calendar1, 300, 300);
    lv_obj_align(calendar1, NULL, LV_ALIGN_CENTER, -160, 0);

  
    lv_obj_t* calendar2 = lv_calendar_create(lv_scr_act(), NULL);
    lv_obj_set_size(calendar2, 300, 300);
    lv_obj_align(calendar2, NULL, LV_ALIGN_CENTER, 160, 0);
    lv_calendar_set_day_names(calendar2, days_name);
}

這個功能主要是設定我圈的紅框位置，我創建了兩個日歷，左邊是默認的，右邊是我修改過的

6. 月的名稱(Name of the months)

類似日的設定，月設定用如下函式lv_calendar_set_month_names(calendar, month_names_array)

我們直接寫下代碼

static const char* months_name[12] = { "1", "2", "3", "4", "5", "6", "7" , "8" , "9" , "10" , "11" , "12" };
void lvgl_calendar_name_month_test(void)
{
    lv_obj_t* calendar1 = lv_calendar_create(lv_scr_act(), NULL);
    lv_obj_set_size(calendar1, 300, 300);
    lv_obj_align(calendar1, NULL, LV_ALIGN_CENTER, -160, 0);


    lv_obj_t* calendar2 = lv_calendar_create(lv_scr_act(), NULL);
    lv_obj_set_size(calendar2, 300, 300);
    lv_obj_align(calendar2, NULL, LV_ALIGN_CENTER, 160, 0);
    lv_calendar_set_month_names(calendar2, months_name);
}

主要是修改紅框位置

7. 事件

除了基本的事件外，還有一個特殊的時間

LV_EVENT_VALUE_CHANGED is sent when the current month has changed.

開程式搞

static void calendar_event_test_handler(lv_obj_t* obj, lv_event_t event)
{
    if (event == LV_EVENT_VALUE_CHANGED) {
        lv_calendar_date_t* date = lv_calendar_get_pressed_date(obj);
        if (date) {
            printf("Clicked date: %02d.%02d.%d\n",date->year,date->month, date->day);
        }
    }
}

void lvgl_calendar_event_test(void)
{
    lv_obj_t* calendar1 = lv_calendar_create(lv_scr_act(), NULL);
    lv_obj_set_size(calendar1, 300, 300);
    lv_obj_align(calendar1, NULL, LV_ALIGN_CENTER, -160, 0);
    lv_obj_set_event_cb(calendar1, calendar_event_test_handler);
}

效果圖：

好了，完結了，更多精彩繼續戳↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓