Position elements in header bar

Question

Hi, I want to position my custom elements at the left of the header bar, but I can't move the default elements.

I want my custom element at left and the date selector at right, just before my buttons start.

Is it possible?

Right now this is how it looks

Captura de Pantalla 2021-10-18 a la(s) 18.10.31.png

Thanks,

Brandon

Vinitha Devi Murugan · Answer

Hi Brandon, 
 
Greetings from Syncfusion Support. 
 
We have achieved your requirement “want my custom element at left and the date selector at right, just before my buttons start.” by making use of actionBegin event of our scheduler with the below code. You can refer the sample from the following link. 
 
https://stackblitz.com/edit/react-header-bar-customization-yj5kw3?file=index.js  
 
onActionBegin(args) { 
    if (args.requestType === 'toolbarItemRendering') { 
      let userIconItem = { 
        align: 'Left', 
        template: document.querySelector('#viewDropDown'), 
      }; 
      args.items.push(userIconItem); 
      // Move date selector's at right 
      args.items[0].align = 'Right'; 
      args.items[1].align = 'Right'; 
      args.items[2].align = 'Right'; 
 
      // align custom element at left 
      args.items.unshift(args.items.pop()); 
    } 
  } 
 
Output: 
 
  
 
Kindly try with the above sample and get back to us if you need any further assistance. 
 
Regards, 
Vinitha

Brandon · Answer

Hi Vinitha! Thank you for the sample!!
Just one thing It doesn't work using function components instead of the class components.

Could you please help me generate a sample using function components?

The main problem that I have is that the "click" action doesn't work.

Vinitha Devi Murugan · Answer

Hi Brandon, 
 
Thanks for your update. 
 
Based on your request we have prepared sample for “want my custom element at left and the date selector at right, just before my buttons start.” with react functional component and same can be available in below link.  
 
Sample : https://stackblitz.com/edit/header-bar-customization-functional-component-bjjapg?file=components%2Fchild.js  
 
Output: 
 
  
 
Kindly try with the above sample and get back to us if you need any further assistance 
 
Regards, 
Vinitha