Resource columns width and header empty cell customization

[Florin Toader]

Hello,

Is it possible to set the width of the resource column? I need to set the first column to 380px and have the last one take up the remaining available space. For example, if there are two columns (resources), the first should be 380px wide, and the second should fill the rest of the width. If there are multiple columns and not all are visible on the screen, each should have a width of 380px.

<div className='schedule-control-section'>
  <div className='col-lg-12 control-section'>
    <div className='control-wrapper'>
      <ScheduleComponent
        cssClass='room-schedule'
        width='100%'
        height='calc(100vh - 300px)'
        timeScale={{ interval: 15 }}
        selectedDate={new Date()}
        currentView='Day'
        resourceHeaderTemplate={resourceHeaderTemplate}
        eventSettings={{
          dataSource: data,
          fields: {
            subject: { title: 'Conference Name', name: 'Subject' },
            description: { title: 'Summary', name: 'Description' },
            startTime: { title: 'From', name: 'start_time' },
            endTime: { title: 'To', name: 'end_time' },
          },
        }}
        group={{ resources: ['Rooms'] }}>
        <ResourcesDirective>
          <ResourceDirective
            field='room_id'
            title='Rooms'
            name='Rooms'
            allowMultiple={true}
            dataSource={resources}
            idField='resourceId'
          />
        </ResourcesDirective>
        <ViewsDirective>
          <ViewDirective option='Day' />
        </ViewsDirective>
        <Inject services={[Day, Resize, DragAndDrop]} />
        <ToolbarItemsDirective>
          <ToolbarItemDirective name='DateRangeText' align='Left' />
        </ToolbarItemsDirective>
      </ScheduleComponent>
    </div>
  </div>
</div>
 Copy

Another question is related to the top left empty cell. Can I add any button there?

[Swathi Ravi]

Hi Florin,

 

Thank you for contacting us!

 

Q1: Is it possible to set the width of the resource column? I need to set the first column to 380px and have the last one take up the remaining available space. 

The resource cells' width will be distributed equally across the available space. It is not possible to change the width of the resource cells differently.

 

Q2: Another question is related to the top left empty cell. Can I add any button there?

You can use the headerIndentTemplate to add the button as requested. Refer to the documentation below:

 

UG: https://ej2.syncfusion.com/react/documentation/schedule/header-bar#customizing-header-indent-cells

 

 

Regards,

Swathi

[Florin Toader]

Hey Swathi,
Thanks a lot for clarifications.

[Swathi Ravi]

Florin, 

You are most welcome. Get back to us if you need any further assistance.