Custom Scheduler popup is getting cut by browser window.

[Sudhanshu Jain]

Hi , we have customize the scheduler tooltip.by below method.

quickInfoTemplates = {{
  header:
      (taskData) => quickInfoTemplatesHeader(taskData, this.props),
  content:
      (taskData) => quickInfoTemplatesContent(taskData, this.props),
  footer:
      (taskData) => quickInfoTemplatesFooter(taskData, this.props)
}}

When popup is too big, it is getting cut by browser window. I have tried out side of my application , with your provide code for custom tooltip. Both place issue is there.

Instead of going top and getting cut by browser, it can go below. Please provide solution.

Please find attached screen shot.

Attachment: Big_tooltip_is_getting_cut_by_browser_b0f58ede.zip

[Ravikumar Venkatesan]

Hi Sudhanshu, 

Greetings from Syncfusion support. 

We have validated your reported query “Custom Scheduler popup is getting cut by browser window.” at our end. We have resolved your problem with the quickInfoTemplate with the below code. 

function App() { 

 

  const onPopupOpen = (args: any) => { 

    if(args.type === 'QuickInfo') { 

      args.element.style.maxHeight = '360px'; 

      args.element.style.overflow = 'scroll'; 

    } 

  } 

 

  const onPopupClose = (args: any) => { 

    if(args.type === 'QuickInfo') { 

      let isCloseButton = args.element.querySelector('.e-close:hover'); 

      let isAddButton = args.element.querySelector('.e-event-create:hover'); 

      let isMoreDetailsButton = args.element.querySelector('.e-event-details.e-flat:hover'); 

      args.cancel = (isCloseButton || isAddButton || isMoreDetailsButton) ? false : true; 

    } 

  } 

 

  return ( 

    <ScheduleComponent id="schedule"  popupOpen={onPopupOpen} popupClose={onPopupClose} > 

      <ViewsDirective> 

        <ViewDirective option='Day' /> 

        <ViewDirective option='Week' /> 

        <ViewDirective option='WorkWeek' /> 

        <ViewDirective option='Month' /> 

      </ViewsDirective> 

      <Inject services={[Day, Week, WorkWeek, Month, DragAndDrop, Resize]} /> 

    </ScheduleComponent> 

  ); 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/154919/ze/EJ2-React-Schedule-quickInfoTemplate-1685320590 

Kindly try the above sample and get back to us if you would require further assistance. 

Regards, 

Ravikumar Venkatesan