1. Home
  2. Forum
  3. Vue
  4. Customize the header toolbar items

Customize the header toolbar items

Hi
I have Nuxt(Vue) application, and integrated there the ej2 scheduler
Now I want to  customize header toolbar items, and add icons additional, and also make a click functions for them

How I can do that?
https://prnt.sc/240hjt7

This is the screenshot
wanna add click function to calendar icon, which will open the calendar for choosing date


7 Replies
SK Satheesh Kumar Balasubramanian Syncfusion Team December 23, 2021 10:25 AM UTC

Hi Christoffer, 
  
Greetings from Syncfusion Support. 
  
We have checked your requirement at our end and prepared the below sample to render icons in toolbar using actionBegin event and also you can use actionBegin event for handling toolbar click actions. 
  
  
App.vue: 
            onActionBegin: function (args) { 
                //Event will be triggered for every toolbar click 
                if (args.requestType === 'toolbarItemRendering') { 
                    let userIconItem = { 
                        align: 'Right', prefixIcon: 'e-icons e-day', text: 'Nancy', cssClass: 'e-schedule-user-icon' 
                    }; 
                    args.items.push(userIconItem); 
                } 
            }, 
  
Kindly try to the above sample and let us know if this meets your requirement. 

Regards, 
Satheesh Kumar B 


CB Christoffer Branzell December 23, 2021 02:25 PM UTC

Thanks
And what ,,if I want to add click functions for that added icons? how i can use that?


SK Satheesh Kumar Balasubramanian Syncfusion Team December 27, 2021 11:59 AM UTC

Hi Christoffer, 
  
Thanks for your update. 
  
You can add click function for the added icon using actionComplete event. 
  
  
App.vue:  
            onActionComplete: function (args) { 
                let scheduleElement = document.getElementById('Schedule'); 
                if (args.requestType === 'toolBarItemRendered') { 
                    let userIconEle = scheduleElement.querySelector('.e-schedule-user-icon'); 
                    userIconEle.onclick = () => { 
                        this.profilePopup.relateTo = userIconEle; 
                        this.profilePopup.dataBind(); 
                        if (this.profilePopup.element.classList.contains('e-popup-close')) { 
                            this.profilePopup.show(); 
                        } else { 
                            this.profilePopup.hide(); 
                        } 
                    }; 
                } 
                let userContentEle = createElement('div', { 
                    className: 'e-profile-wrapper' 
                }); 
                scheduleElement.parentElement.appendChild(userContentEle); 
                let userIconEle = scheduleElement.querySelector('.e-schedule-user-icon'); 
                let template = 
                        '<div class="profile-container"><div class="profile-image"></div><div class="content-wrap">' + 
                        '<div class="name">Nancy</div><div class="destination">Product Manager</div><div class="status"> ' + 
                        '<div class="status-icon"></div>Online</div></div></div>'; 
                let getDOMString = compile(template); 
                let output = getDOMString({}); 
                this.profilePopup = new Popup(userContentEle, { 
                    content: output[0], 
                    relateTo: userIconEle, 
                    position: { X: 'left', Y: 'bottom' }, 
                    collision: { X: 'flip', Y: 'flip' }, 
                    targetType: 'relative', 
                    viewPortElement: scheduleElement, 
                    width: 210, 
                    height: 80 
                }); 
                this.profilePopup.hide(); 
            }, 
  
Kindly try to the above sample and let us know if this meets your requirement.  
  
Regards,  
Satheesh Kumar B 


CB Christoffer Branzell replied to Satheesh Kumar Balasubramanian December 27, 2021 01:30 PM UTC

Ok thank you for that.
And what is the calendar functions,  for example I want to click  the custom icon and opened a calendar where I can choose date and  the calendar rendered  like
https://prnt.sc/24stpqr
I want to click in the calendar and open tthe calendar next like  when click in the date range 


SK Satheesh Kumar Balasubramanian Syncfusion Team December 28, 2021 12:08 PM UTC

Hi Christoffer, 
  
We have modified the sample to open a calendar when we click custom icon using actionBegin and actionComplete event. 
  
  
App.vue:   
<template> 
    <div class="schedule-vue-sample"> 
        <div class="col-md-9 control-section"> 
            <div class="content-wrapper"> 
                <ejs-schedule id='Schedule' ref="ScheduleObj" height="650px" :selectedDate='selectedDate' :eventSettings='eventSettings' :eventRendered="oneventRendered" 
                    :currentView="currentView" :actionBegin="onActionBegin" :actionComplete="onActionComplete" :showHeaderBar="showHeaderBar"> 
                    <e-views> 
                        <e-view option="Month"></e-view> 
                    </e-views> 
                </ejs-schedule> 
                <ejs-calendar style="position: absolute;top: 42px;left: 215px" id="calendar" v-if="visible"></ejs-calendar> 
            </div> 
        </div> 
    </div> 
</template> 
  
<script> 
        data: function () { 
            return { 
                currentView: 'Month', 
                showHeaderBar: true, 
                visible: false, 
                selectedDate: new Date(2021, 11, 15), 
            } 
        }, 
            onActionBegin: function (args) { 
                if (args.requestType === 'toolbarItemRendering') { 
                    let userIconItem = { 
                        align: 'Right', prefixIcon: 'e-icons e-week', text: 'Nancy', cssClass: 'e-schedule-user-icon' 
                    }; 
                    args.items.push(userIconItem); 
                    let calendarIconItem = { 
                        align: 'Left', prefixIcon: 'e-icons e-day', cssClass: 'e-schedule-calendar-icon' 
                    }; 
                    args.items.push(calendarIconItem); 
                } 
            }, 
            onActionComplete: function (args) { 
                let scheduleElement = document.getElementById('Schedule'); 
                if (args.requestType === 'toolBarItemRendered') { 
                    let userIconEle = scheduleElement.querySelector('.e-schedule-user-icon'); 
                    userIconEle.onclick = () => { 
                        this.profilePopup.relateTo = userIconEle; 
                        this.profilePopup.dataBind(); 
                        if (this.profilePopup.element.classList.contains('e-popup-close')) { 
                            this.profilePopup.show(); 
                        } else { 
                            this.profilePopup.hide(); 
                        } 
                    }; 
                    let calendarIconEle = scheduleElement.querySelector('.e-schedule-calendar-icon'); 
                    calendarIconEle.onclick = () => { 
                        this.visible = !this.visible; 
                    }; 
                } 
            }, 
</script> 
  
Kindly try the above sample and let us know if this meets your requirement. 
  
Regards, 
Satheesh Kumar B 


CB Christoffer Branzell January 5, 2022 09:14 AM UTC

Thanks  :)
I got it
And how I can set the same functionality with the calendar with custom Icon like the default
For example, when I click the calendar icon and opened a calendar, and I select the date, the scheduler  changes for that selected date.?
https://prnt.sc/263r8j0
When I select 4th January the scheduler must show Events from 4th January and also the date range must display the week with 4th january


SK Satheesh Kumar Balasubramanian Syncfusion Team January 6, 2022 03:08 PM UTC

Hi Christoffer, 
  
We have modified the sample to set the same functionality with the calendar custom icon. 
App.vue:    
<template>  
    <div class="schedule-vue-sample">  
        <div class="col-md-9 control-section">  
            <div class="content-wrapper">  
                <ejs-schedule id='Schedule' ref="ScheduleObj" height="650px" :selectedDate='selectedDate' :eventSettings='eventSettings' :eventRendered="oneventRendered"  
                    :currentView="currentView" :actionBegin="onActionBegin" :actionComplete="onActionComplete" :showHeaderBar="showHeaderBar">  
                    <e-views>  
                        <e-view option="Month"></e-view>  
                    </e-views>  
                </ejs-schedule>  
                <ejs-calendar :change="onChange" style="position: absolute;top: 42px;left: 215px" id="calendar" v-if="visible"></ejs-calendar>  
            </div>  
        </div>  
    </div>  
</template>  
  
<style> 
    #calendar.show { 
        display: block; 
    } 
    #calendar { 
        display: none; 
    } 
</style> 
   
<script>  
        data: function () {  
            return {  
                currentView: 'Month',  
                showHeaderBar: true,  
                visible: true,  
                selectedDate: new Date(2021, 11, 15),  
            }  
        },  
            onChange: function(args) { 
                this.$refs.ScheduleObj.selectedDate = args.value; 
            }, 
            onActionBegin: function (args) {  
                if (args.requestType === 'toolbarItemRendering') {  
                    let userIconItem = {  
                        align: 'Right', prefixIcon: 'e-icons e-week', text: 'Nancy', cssClass: 'e-schedule-user-icon'  
                    };  
                    args.items.push(userIconItem);  
                    let calendarIconItem = {  
                        align: 'Left', prefixIcon: 'e-icons e-day', cssClass: 'e-schedule-calendar-icon'  
                    };  
                    args.items.push(calendarIconItem);  
                }  
            },  
            onActionComplete: function (args) {  
                let scheduleElement = document.getElementById('Schedule');  
                if (args.requestType === 'toolBarItemRendered') {  
                    let userIconEle = scheduleElement.querySelector('.e-schedule-user-icon');  
                    userIconEle.onclick = () => {  
                        this.profilePopup.relateTo = userIconEle;  
                        this.profilePopup.dataBind();  
                        if (this.profilePopup.element.classList.contains('e-popup-close')) {  
                            this.profilePopup.show();  
                        } else {  
                            this.profilePopup.hide();  
                        }  
                    };  
                 let calendarIconEle = scheduleElement.querySelector('.e-schedule-calendar-icon'); 
                    calendarIconEle.onclick = () => { 
                        let calendarEle = document.querySelector('#calendar'); 
                        if (calendarEle.classList.contains('show')) { 
                            calendarEle.classList.remove('show'); 
                        } else { 
                            calendarEle.classList.add('show'); 
                        } 
                    }; 
                }  
            },  
</script>  
  
Kindly try the above sample and let us know if this meets your requirement. 
  
Regards, 
Satheesh Kumar B 


Loader.
Up arrow icon