Change calendar's items colors

[Alberto_Pesce]

Description

Hi all, i would like to know how to change calendar’s object items colors, because changing it with squareline studio does not work, i can change only background properties, so the one under “LV_PART_MAIN”

What LVGL version are you using?

lvlg 8.2.0, squareline 1.3.0

What do you want to achieve?

change color of items

What have you tried so far?

I tries with squareline but it does not seem to work, i also tried some separate code, i think it has to do with the project theme

Code generated by squareline

ui_SettingsCalendar = lv_calendar_create(ui_SettingsDateAndTimeScreen);
    lv_obj_t * ui_SettingsCalendar_header = lv_calendar_header_arrow_create(ui_SettingsCalendar);
    lv_obj_set_width(ui_SettingsCalendar, lv_pct(40));
    lv_obj_set_height(ui_SettingsCalendar, lv_pct(65));
    lv_obj_set_x(ui_SettingsCalendar, lv_pct(-25));
    lv_obj_set_y(ui_SettingsCalendar, lv_pct(6));
    lv_obj_set_align(ui_SettingsCalendar, LV_ALIGN_CENTER);
    lv_obj_clear_flag(ui_SettingsCalendar,
                      LV_OBJ_FLAG_PRESS_LOCK | LV_OBJ_FLAG_CLICK_FOCUSABLE | LV_OBJ_FLAG_GESTURE_BUBBLE | LV_OBJ_FLAG_SNAPPABLE |
                      LV_OBJ_FLAG_SCROLLABLE | LV_OBJ_FLAG_SCROLL_ELASTIC | LV_OBJ_FLAG_SCROLL_MOMENTUM |
                      LV_OBJ_FLAG_SCROLL_CHAIN);     /// Flags
    lv_obj_set_style_radius(ui_SettingsCalendar, 5, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(ui_SettingsCalendar, lv_color_hex(0x0F0F0F), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_SettingsCalendar, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(ui_SettingsCalendar, lv_color_hex(0x272727), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_opa(ui_SettingsCalendar, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(ui_SettingsCalendar, 1, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_side(ui_SettingsCalendar, LV_BORDER_SIDE_FULL, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_set_style_bg_color(ui_SettingsCalendar, lv_color_hex(0xFC0000), LV_PART_ITEMS | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_SettingsCalendar, 255, LV_PART_ITEMS | LV_STATE_DEFAULT);

Screenshot and/or video

In yellow the parts i would like to change, but i don’t know how to do it and no solution seems to work

[pete-pjb]

Hi @Alberto_Pesce ,

The arrows and year/month display at the top are part of the calendars header so you can change them as follows:

	    // Set Header parts
	    lv_obj_t * ui_SettingsCalendar_header = lv_calendar_header_arrow_create(ui_SettingsCalendar);
	    // The Left Arrow
	    lv_obj_t* h0 = lv_obj_get_child(ui_SettingsCalendar_header, 0);
	    lv_obj_set_style_bg_color(h0, lv_palette_main(LV_PALETTE_RED), 0);
	    lv_obj_set_style_border_color(h0, lv_color_hex(0x01a2b1), 0);
	    lv_obj_set_style_border_width(h0, 1, 0);

	    // Header Text
	    lv_obj_t* h1 = lv_obj_get_child(ui_SettingsCalendar_header, 1);
	    lv_obj_set_style_text_color(h1, lv_palette_main(LV_PALETTE_RED), 0);

	    // The Right Arrow
	    lv_obj_t* h2 = lv_obj_get_child(ui_SettingsCalendar_header, 2);
	    lv_obj_set_style_bg_color(h2, lv_palette_main(LV_PALETTE_RED), 0);
	    lv_obj_set_style_border_color(h2, lv_color_hex(0x01a2b1), 0);
	    lv_obj_set_style_border_width(h2, 1, 0);

The calender dates and boxes are made of a button matrix so you need to get a pointer to the button matrix object to change its style and properties like this:

	    // Get pointer to internal button matrix of calender
	    lv_obj_t * btnMatrix= lv_calendar_get_btnmatrix(ui_SettingsCalendar);
	    lv_obj_set_style_border_color( btnMatrix, lv_palette_main(LV_PALETTE_ORANGE), LV_PART_ITEMS);

You can also take a look at this post which shows how to attach an event handler to the LV_EVENT_DRAW_PART_BEGIN event for the calendar allowing more elaborate changes to it’s styling.

I hope that helps.

Kind Regards,

Pete

[Alberto_Pesce]

@pete-pjb thank you!!

[Alberto_Pesce]

the effects of change does not take change, here is the code.

static void cb_calendar_event_draw_begin(lv_event_t* e)
{
	lv_obj_t* obj = lv_event_get_target(e);
	lv_obj_draw_part_dsc_t* dsc = lv_event_get_param(e);
	/*Change the draw descriptor*/
	if (dsc->part == LV_PART_ITEMS) {
		
		if (lv_btnmatrix_has_btn_ctrl(obj, dsc->id, LV_BTNMATRIX_CTRL_CLICK_TRIG)) {
			dsc->rect_dsc->radius = 5;
			dsc->rect_dsc->bg_color = lv_palette_main(LV_PALETTE_RED);
			dsc->rect_dsc->border_width = 3;
			dsc->rect_dsc->border_color = lv_palette_main(LV_PALETTE_RED);
			dsc->rect_dsc->border_side = LV_BORDER_SIDE_LEFT;

			dsc->rect_dsc->shadow_color = lv_palette_main(LV_PALETTE_RED);
			dsc->rect_dsc->shadow_ofs_x = 2;
			dsc->rect_dsc->shadow_ofs_y = 2;
			dsc->rect_dsc->shadow_opa = 20;
			dsc->rect_dsc->shadow_width = 1;
		}

		if (lv_btnmatrix_has_btn_ctrl(obj, dsc->id, LV_BTNMATRIX_CTRL_CUSTOM_1)) {
			dsc->rect_dsc->bg_opa = 255;
			dsc->rect_dsc->radius = 5;
			dsc->rect_dsc->bg_color = lv_palette_main(LV_PALETTE_RED);
			dsc->rect_dsc->border_width = 3;
			dsc->rect_dsc->border_color = lv_palette_main(LV_PALETTE_RED);
			dsc->rect_dsc->border_side = LV_BORDER_SIDE_LEFT;

			dsc->rect_dsc->shadow_color = lv_palette_main(LV_PALETTE_RED);
			dsc->rect_dsc->shadow_ofs_x = 2;
			dsc->rect_dsc->shadow_ofs_y = 2;
			dsc->rect_dsc->shadow_opa = 40;
			dsc->rect_dsc->shadow_width = 1;
		}

		if (lv_btnmatrix_has_btn_ctrl(obj, dsc->id, LV_BTNMATRIX_CTRL_DISABLED)) {
			dsc->rect_dsc->radius = 0;
			dsc->rect_dsc->bg_color = lv_palette_main(LV_PALETTE_RED);
			dsc->rect_dsc->border_width = 0;
			dsc->rect_dsc->border_color = lv_palette_main(LV_PALETTE_RED);
			dsc->rect_dsc->border_side = LV_BORDER_SIDE_FULL;

			dsc->rect_dsc->shadow_color = lv_palette_main(LV_PALETTE_RED);
			dsc->rect_dsc->shadow_ofs_x = 0;
			dsc->rect_dsc->shadow_ofs_y = 0;
			dsc->rect_dsc->shadow_opa = 0;
			dsc->rect_dsc->shadow_width = 0;
		}

		if (dsc->id < 7) {
			dsc->rect_dsc->bg_opa = 150;
			dsc->rect_dsc->radius = 5;
			dsc->rect_dsc->bg_color = lv_palette_main(LV_PALETTE_RED);
			dsc->rect_dsc->border_width = 3;
			dsc->rect_dsc->border_color = lv_palette_main(LV_PALETTE_RED);
			dsc->rect_dsc->border_side = LV_BORDER_SIDE_BOTTOM;

			dsc->rect_dsc->shadow_color = lv_palette_main(LV_PALETTE_RED);
			dsc->rect_dsc->shadow_ofs_x = 0;
			dsc->rect_dsc->shadow_ofs_y = 0;
			dsc->rect_dsc->shadow_opa = 0;
			dsc->rect_dsc->shadow_width = 0;

			dsc->label_dsc->color = lv_palette_main(LV_PALETTE_RED);
		}
	}
}




lv_obj_add_event_cb(ui_SettingsCalendar, cb_calendar_event_draw_begin, LV_EVENT_DRAW_PART_BEGIN, NULL);

i also use other callbacks like this for other objects and they work

[pete-pjb]

Hi @Alberto_Pesce ,

You need to attach the call-back to the button matrix in the calendar like this:

lv_obj_t * btnMatrix= lv_calendar_get_btnmatrix(ui_SettingsCalendar);
lv_obj_add_event_cb(btnMatrix, cb_calendar_event_draw_begin, LV_EVENT_DRAW_PART_BEGIN, NULL);

Kind Regards,

Pete