icons

sets an array of icons in the calendar or hides them

boolean|array icons;

Example

webix.ui({
    view:"calendar",
    icons: [
        //default "today" icon
        {
            template: function(){
                return "<span class='webix_cal_icon_today webix_cal_icon'>"
                    +webix.i18n.calendar.today
                    +"</span>";
            },
            on_click:{
                "webix_cal_icon_today": function(){
                    this.setValue(new Date());
                    this.callEvent("onTodaySet",[this.getSelectedDate()]);
                }
            }
        },
        //default "clear" icon
        {
            template: function(){
                return "<span class='webix_cal_icon_clear webix_cal_icon'>"
                    +webix.i18n.calendar.clear
                        +"</span>";
            },
            on_click:{
                "webix_cal_icon_clear": function(){
                    this.setValue("");
                    this.callEvent("onDateClear",[this.getSelectedDate()]);
                }       
            }
        }
    ]
});

Related samples

Details

Disabling icons

To hide "Today" and "Clear" icons in the calendar, set the parameter to false:

webix.ui({
    view:"calendar",
    icon:false,
    ...
});

Object properties

As an object the parameter redefines buttons:

webix.ui({
    view: "calendar",
    icons: [
        template: function(){
            return "<span class='my_button'>My Button</span>";
        },
        on_click:{
            "my_button": function(){
                alert("Button is clicked")
            }
        }
    ]
});

Changing text of icons

Text of the icons may be altered within the current locale as:

webix.i18n.calendar.clear = "Clear New";
webix.i18n.calendar.today = "Today New";
webix.i18n.setLocale();
Back to top