Fix Height of left indent & Select toolbar view from filters

[Jessica Newman]

Hi there. 

I have two questions: 

1. I have a custom resource header that is causing the left indent border to be off kilter. How do I correct this? I would like to avoid changing CSS classes and instead make the fix dynamically within the ScheduleComponent. 
2. 
3. I have a filter that determines the data range to pull data for the scheduler from. Upon adjusting the date range, I would like to automatically select the correct View, which I will set via state. How do I accomplish this? Code below.

<ScheduleComponent

id="schedule"

ref={scheduleObjRef}

eventSettings={{ dataSource: appointments, template: renderEventTemplate }}

timeScale={{ enable: true, interval: 30, slotCount: 2 }}

group={{ resources: ['Doctors'] }}

resourceHeaderTemplate={data => <ResourceHeaderTemplate data={data} />}

cellClick={isReadOnly}

eventClick={isReadOnly}

popupOpen={isReadOnly}

navigating={handlePeriodChange}

actionComplete={handleViewNavigation}

>

<ResourcesDirective>

<ResourceDirective field="DoctorId" idField="id" name="Doctors" dataSource={doctors} />

</ResourcesDirective>

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

<ViewsDirective>

<ViewDirective option="Day" />

<ViewDirective option="Week" />

<ViewDirective option="Month" />

</ViewsDirective>

</ScheduleComponent>

[Ashokkumar Karuppasamy]

Hi Jessica,

Q1: I have a custom resource header that is causing the left indent border to be off kilter. How do I correct this? I would like to avoid changing CSS classes and instead make the fix dynamically within the ScheduleComponent?

You can achieve your requirement only with CSS styles. The default settings cannot adjust the left indent border. The attached sample below demonstrates the solution. Please give it a try and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/schedule-resource-headertemplate-sample-sumcku?file=index.css

[index.js]

    const resourceHeaderTemplate = (props) => {

        return (<div className="template-wrap">

        <div className={"resource-image " + getEmployeeImage(props)}></div>

        <div className="resource-details">

          <div className="resource-name">{getEmployeeName(props)}</div>

          <div className="resource-designation">{getEmployeeDesignation(props)}</div>

        </div>

      </div>);

    };

 

[index.css]

.group-editing.e-schedule .e-vertical-view .e-resource-cells {

    height: 62px;

}

Q2: I have a filter that determines the data range to pull data for the scheduler from. Upon adjusting the date range, I would like to automatically select the correct View, which I will set via state. How do I accomplish this?

Based on the shared details, we have created a sample using the date range. The attached sample below demonstrates the solution. Please give it a try and let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/schedule-daterangechange-sample-x1fwjj?file=index.js

[index.js]

    const startValue = new Date(2021, 1, 15);

    const endValue =  startValue;

    const dateRangeObj = useRef(null);

    let selectStartDate;

    let selectEndDate;

    const [currentView, setCurrentView] = useState("Day");

    const [format, setFormat] = useState('dd/MMM/yy');

    const [separator, setSeparator] = useState('-');

    const onclose = (args) => {

     if(args.event && args.event.target.classList.contains('e-apply')) {

      const timeDifference = selectEndDate - selectStartDate;

      const daysDifference = timeDifference / (1000 * 3600 * 24);

      if(daysDifference === 0) {

        setCurrentView("Day");

      } else if (daysDifference > 0 && 7 >= daysDifference) {

        setCurrentView("Week");

      } else {

        setCurrentView("Month");

      }

      scheduleObj.current.selectedDate = selectStartDate;

     }

    };

    

    const onselect = (args) => {

      debugger;

      if (args.startDate) {

        selectStartDate = new Date(args.startDate);

      }

      if (args.endDate) {

        selectEndDate = new Date(args.endDate);

      }

    };

<DateRangePickerComponent close={onclose} ref={dateRangeObj} format={format} separator={separator}

 startDate={startValue} select = {onselect} endDate={endValue}></DateRangePickerComponent>

 

Regards,
Ashok