Customixing the buttons below event description (Quick Info)

niccokunzmann · February 17, 2025, 1:28pm

I would like to change the buttons that appear below the quick info event text.

Or

Specifically, I would like to do that:

A short search allows me to find these icons:

$ grep -oE 'icon_[a-z_]*[^}]+content:"."}' dhtmlxscheduler.css | sort | uniq
icon_alert:before{content:""}
icon_arrow_down:before{content:""}
icon_arrow_up:before{content:""}
icon_calendar:before{content:""}
icon_cancel:before{content:""}
icon_check:before{content:""}
icon_clock:before{content:""}
icon_close:before{content:""}
icon_details:before{content:""}
icon_dots_h:before{content:""}
icon_dots_v:before{content:""}
icon_drag:before{content:""}
icon_drag_horizontal:before{content:""}
icon_drag_vertical:before{content:""}
icon_edit:before{content:""}
icon_form:before{content:""}
icon_iclose:before{content:""}
icon_loading:before{content:""}
icon_menu:before{content:""}
icon_menu_down:before{content:""}
icon_menu_right:before{content:""}
icon_ok:before{content:""}
icon_plus:before{content:""}
icon_save:before{content:""}
icon_small:before{content:""}
icon_sort_asc:before{content:""}
icon_sort_desc:before{content:""}

I wonder: How can I change the items provided there? What is the customization function?

I found this:

github.com/DHTMLX/scheduler

codebase/sources/ext/dhtmlxscheduler_quick_info.js

bb15dd96c


      
          /*
          @license
          dhtmlxScheduler v.4.3.1 
          
          This software is covered by GPL license. You also can obtain Commercial or Enterprise license to use it in non-GPL project - please contact sales@dhtmlx.com. Usage without proper license is prohibited.
          
          (c) Dinamenta, UAB.
          */
          scheduler.config.icons_select = ["icon_details", "icon_delete"];
          scheduler.config.details_on_create = true;
          scheduler.config.show_quick_info = true;
          scheduler.xy.menu_width = 0;
          
          scheduler.attachEvent("onClick", function(id){
          	scheduler.showQuickInfo(id);
          	return true;
          });
          
          (function(){

I am not sure, yet, how I can attach a custom link/action to the links.

This seems to be described here:

So, I will try this out and see. This solves my use-case. Thank you for the documentation!

niccokunzmann · February 17, 2025, 2:39pm

I made it really nice with SVG icons, too!

.dhx_menu_icon.icon_subscribe {
mask: url('/img/icons/subscribe.svg');
mask-size: 100%;
}

Credits:
https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images