Calendar - Change arrow background

How-to
#1

Description

How do you change the blue colour of the back and forth arrows?

What MCU/Processor/Board and compiler are you using?

Simulator/framebuffer

What LVGL version are you using?

8.1

What do you want to achieve?

As described

What have you tried so far?

Reviewed Calendar (lv_calendar) — LVGL documentation

Code to reproduce

void cb_setLeavingDate(lv_event_t * event)
{
    lv_obj_t * cont = lv_win_get_content(holidy_mode_window);  /*Content can be added here*/
    lv_obj_t  * calendar = lv_calendar_create(cont);
    lv_obj_set_size(calendar, 385, 385);
    lv_obj_align(calendar, LV_ALIGN_CENTER, 0, 0);
    lv_obj_add_event_cb(calendar, cb_calendar_leavingDate, LV_EVENT_ALL, NULL);

    lv_calendar_set_today_date(calendar, 2022, 03, 8);
    lv_calendar_set_showed_date(calendar, 2022, 03);

    /*Highlight a few days*/
    static lv_calendar_date_t highlighted_days[1];       /*Only its pointer will be saved so should be static*/
    highlighted_days[0].year = 2021;
    highlighted_days[0].month = 03;
    highlighted_days[0].day = 8;

    lv_calendar_set_highlighted_dates(calendar, highlighted_days, 3);

    lv_calendar_header_arrow_create(calendar);

    lv_calendar_set_showed_date(calendar, 2022, 3);
}

Screenshot and/or video

image
image738×407 25.2 KB

#2

you can set background color for the children of this object lv_calendar_header_arrow_create(calendar). Something like this.

lv_obj_t* a = lv_calendar_header_arrow_create(calendar);

// The Left Arrow
lv_obj_t* a1 = lv_obj_get_child(a, 0);
lv_obj_set_style_bg_color(a1, lv_palette_main(LV_PALETTE_RED), 0);
lv_obj_set_style_bg_opa(a1, LV_OPA_100, 0);


// The Right Arrow
lv_obj_t* a2 = lv_obj_get_child(a, 0);
lv_obj_set_style_bg_color(a2, lv_palette_main(LV_PALETTE_RED), 0);
lv_obj_set_style_bg_opa(a2, LV_OPA_100, 0);
#3

@bader You are on a roll today!!

Nice!

Some slight tweaking (second arrow is 2 not 0 or 1. I wonder what 1 is…):
image

  lv_obj_t* calendar_arrows = lv_calendar_header_arrow_create(calendar);

  // The Left Arrow
  lv_obj_t* a1 = lv_obj_get_child(calendar_arrows, 0);
  lv_obj_set_style_bg_color(a1, lv_color_hex(MAIN_BG_COLOUR), 0);
  lv_obj_set_style_border_color(a1, lv_color_hex(0x01a2b1), 0);
  lv_obj_set_style_border_width(a1, 1, 0);

  // The Right Arrow
  lv_obj_t* a2 = lv_obj_get_child(calendar_arrows, 2);
  lv_obj_set_style_bg_color(a2, lv_color_hex(MAIN_BG_COLOUR), 0);
  lv_obj_set_style_border_color(a2, lv_color_hex(0x01a2b1), 0);
  lv_obj_set_style_border_width(a2, 1, 0);

Thanks!

#4

Oh, I missed it :sweat_smile:
The second children or the children number 1 is the label in the middle between the two arrows.

#5

Ah, of course :wink:

#6

@bader any idea how to change the blue surrounding the 12 above? I’d like to use the same colour I have elsewhere…

Thanks!

#7

Your style is different than mine, so I don’t know what is the “12” button represents. Is it when the user clicked on one of the squares? or it is the today square?

if it is the first situation, you can change it by changing the outline color of the lv_btnmatrix inside the calendar widget.

lv_obj_t * btnMatrix= lv_calendar_get_btnmatrix(calendar);
lv_obj_set_style_outline_color(btnMatrix, lv_palette_main(LV_PALETTE_GREEN), LV_PART_ITEMS | LV_STATE_FOCUS_KEY);
#8

Hi @bader , its the today square…

Thanks!

#9

Mmmm, I found a way, but I don’t know if it’s the right way or not. I don’t understand it fully but it works. :grinning_face_with_smiling_eyes:


static void event_cb(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t* obj = lv_event_get_target(e);
    if (code == LV_EVENT_DRAW_PART_BEGIN) {
        lv_obj_draw_part_dsc_t* dsc = lv_event_get_param(e);
        /*Change the draw descriptor*/
        if (dsc->id != 0) {
            dsc->rect_dsc->radius = 0;
            if (lv_btnmatrix_has_btn_ctrl(obj, dsc->id, LV_BTNMATRIX_CTRL_CUSTOM_1)) {
                dsc->rect_dsc->border_color = lv_palette_main(LV_PALETTE_RED);
            }
        }
    }
}

void cb_setLeavingDate(lv_event_t * event)
{
    ...
    ...
    lv_obj_t * btnMatrix= lv_calendar_get_btnmatrix(calendar);
    lv_obj_add_event_cb(btnMatrix, event_cb, LV_EVENT_ALL, NULL);
}
1 Like
#10

How on earth did you find that out!?!

Absolutely amazing!!

Thank you :smiley:

FYI, I slightly simplified the code to:

  lv_obj_t  * calendar = lv_calendar_create(cont);

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

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->id != 0) {
      dsc->rect_dsc->radius = 0;
      if (lv_btnmatrix_has_btn_ctrl(obj, dsc->id, LV_BTNMATRIX_CTRL_CUSTOM_1)) {
          dsc->rect_dsc->border_color = lv_color_hex(0x01a2b1);
      }
  }
}
#11

You are so welcome. It is just a workaround, it might cause bad performance I haven’t tried it in actual device other than the simulator.

By the way, you can just modify the lv_calendar.c file in this function static void draw_part_begin_event_cb(lv_event_t * e). It does the same thing.

#12

Thanks Bader;
I cusomize my calendar. :pray:

1
11160×653 100 KB 

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_color_hex(0x999999);
          dsc->rect_dsc->border_width=3;
          dsc->rect_dsc->border_color=lv_color_hex(0x444444);
          dsc->rect_dsc->border_side=LV_BORDER_SIDE_LEFT;

          dsc->rect_dsc->shadow_color=lv_color_hex(0x000000);
          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_color_hex(0xb5d9ff);
          dsc->rect_dsc->border_width=3;
          dsc->rect_dsc->border_color=lv_color_hex(0x006f94);
          dsc->rect_dsc->border_side=LV_BORDER_SIDE_LEFT;

          dsc->rect_dsc->shadow_color=lv_color_hex(0x000000);
          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_color_hex(0xFFFFFF);
          dsc->rect_dsc->border_width=0;
          dsc->rect_dsc->border_color=lv_color_hex(0x000000);
          dsc->rect_dsc->border_side=LV_BORDER_SIDE_FULL;

          dsc->rect_dsc->shadow_color=lv_color_hex(0x000000);
          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_color_hex(0x666666);
          dsc->rect_dsc->border_width=3;
          dsc->rect_dsc->border_color=lv_color_hex(0x000000);
          dsc->rect_dsc->border_side=LV_BORDER_SIDE_BOTTOM;

          dsc->rect_dsc->shadow_color=lv_color_hex(0x000000);
          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_color_hex(0xffffff);
     }
  }
}