Our powerful JS Calendar component


Post by jeff.wang »

Hi,

I want to add plus icon in DayCellRenderer when the mouse hover it like below image, how to add listener of the hover event in DayCellRenderer.

Image

the example code like below:

  
dayCellRenderer = (cellData: any, headerDomConfig: any) => { const dayHeader = headerDomConfig?.children?.[0]; if (dayHeader) { const ePlus = DomHelper.createElement({ tag: 'button', style: 'margin-left: auto; padding: 5px;', text: '+', }); // @ts-ignore ePlus.addEventListener('click', (e: any) => { e.stopPropagation(); //do something }); dayHeader.children.push(ePlus); } };

Post by alex.l »

All the best,
Alex


Post by jeff.wang »

Yes, it is ok for adding event to HTMLElement, The dayCellRenderer have three Parameters(cellData, headerDomConfig, children), where can i get the root dayCell HTMLElement Parameter.


Post by tasnim »

Please check docs here : https://bryntum.com/docs/calendar/api/Calendar/widget/MonthView#function-getDayElement

Here is an example of how you can use it:

dayCellRenderer({ date }) {
	// get the root day cell
	this.getDayElement(date, true)
}

Post by jeff.wang »

Hi

it is effect, this.getDayElement(date, true) is available in CalendarConfig, how to import the outside parameters in Bryntum CalendarConfig like below, in other words, how to set parameters into bryntum environments that can available in Config, similar to context.

Image

In addition, if i set the dayCellRenderer by calendarConfig.modes.month parameter, this.getDayElement is not available

 
 const calendarConfig = { ...baseCalendarConfig };
 Reflect.set(calendarConfig.modes.month, 'dayCellRenderer', this.dayCellRenderer);
 
  dayCellRenderer = (cellData: any, headerDomConfig: any) => {
      // @ts-ignore
      const rootElement = this.getDayElement(cellData?.date, true);//error
    }
  };

thank you!


Post by marcio »

Hey Jeff,

You should output your icon in the day cell renderer, and then simply have it shown on cell:hover

See here https://bryntum.com/docs/calendar/api/Calendar/widget/mixin/DayCellRenderer

Also, regarding the error on dayCellRenderer, you should not use an arrow function if you want to use the this.getDayElement method. So you should use like this

dayCellRenderer = function(cellData: any, headerDomConfig: any) {
     // You won't have the error here
     const rootElement = this.getDayElement(cellData?.date, true); 
};

Best regards,
Márcio


Post by jeff.wang »

Hi,

yes, function is ok.

thank you!


Post Reply