We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Custom search by date range

Hi, 


I am trying to create a custom search by date and I want to show that interval. For example, if the user wants to search from 15th Feb to 15th Mar I want to show that interval in the Timelinemonth view.



3 Replies

SR Swathi Ravi Syncfusion Team March 13, 2023 05:30 PM UTC

Hi Nikola,


You can perform the search on the selected date range in the Schedule like on the TimelineMonth view by TimelineDay view with interval property and disabling its timScale property, as shown in the below shared snippet.


Sample: https://stackblitz.com/edit/angular-dbngev-opmcry?file=src%2Fapp.component.ts


Api: https://ej2.syncfusion.com/angular/documentation/api/schedule/views/#timescale

https://ej2.syncfusion.com/angular/documentation/api/schedule/views/#interval


[app.component.html]

<div class="date-container">

  <tr>

    <td class="e-textlabel"> Select date range : </td>

    <td colspan="4">

      <ejs-daterangepicker #startTime (change)="onChange($event)"></ejs-daterangepicker>

    </td>

  </tr>

</div>

 

<div class="property-panel-content">

  <input type="text" class="e-input" id="events-search" placeholder="Enter the Search text"

    (keyup)="globalSearch($event)" />

</div>

 

<div class="control-section">

  <ejs-schedule #scheduleObj width='100%' height='650px' [eventSettings]="eventSettings">

    <ng-template #dateHeaderTemplate let-data>

      <div class="date-text">{{getDateHeaderText(data.date)}}</div>

    </ng-template>

    <e-header-rows>

      <e-header-row option="Month"></e-header-row>

      <e-header-row option="Date"></e-header-row>

  </e-header-rows>

    <e-views>

      <e-view option='TimelineDay' [timeScale]="timeScale" [interval]='interval'></e-view>

    </e-views>

  </ejs-schedule>

</div>


 [app.component.ts]

public getDateHeaderText(valueDate): string {

    return this.instance.formatDate(value, { skeleton: 'Ed' });

  }

  public intervalnumber = 15;

  public timeScale = {enable: false}

 

  onChange(args) {

    this.scheduleObj.selectedDate = args.startDate;

    this.interval = args.daySpan;

    this.scheduleObj.views = [{ option: 'TimelineDay'interval: this.interval }];

    this.scheduleObj.dataBind();

  }

 

  public globalSearch(argsKeyboardEvent): void {

    const searchStringstring = (args.target as HTMLInputElement).value;

    if (searchString !== '') {

      new DataManager(this.data).executeQuery(new Query().

        search(searchString, ['Subject''Location''Description'], nulltruetrue)).then((eReturnOption=> {

          if ((e.result as any).length > 0) {

            this.showSearchEvents('show'e.result);

          } else {

            this.showSearchEvents('hide');

          }

        });

    } else {

      this.showSearchEvents('hide');

    }

  }

 

  private showSearchEvents(typestringdata?: Record<stringany>): void {

    if (type === 'show') {

      (this.scheduleObj as any).eventSettings.dataSource = data;

    } else {

      (this.scheduleObj as any).eventSettings.dataSource = this.data;

    }

  }


Regards,

Swathi Ravi



Nikola Škeva replied to Swathi Ravi March 14, 2023 05:27 PM UTC

Could you please provide a .jsx sample.



SR Swathi Ravi Syncfusion Team March 15, 2023 01:32 PM UTC

Nikola,


Sorry for providing the incorrect platform solution.


You can perform the search on the selected date range in the Schedule like on the TimelineMonth view by TimelineDay view with interval property and disabling its timeScale property, as shown in the below-shared snippet.


Sample: https://stackblitz.com/edit/react-6tninn-tkaqn1?file=index.js


API:

https://ej2.syncfusion.com/react/documentation/api/schedule/views/#timescale

https://ej2.syncfusion.com/react/documentation/api/schedule/views/#interval


[index.js]

function TimelineView() {

    let scheduleObj;

    let instance = new Internationalization();

    const eventdata = extend([], dataSource.scheduleDatanulltrue);

    function dateHeaderTemplate(props) {

        return (<div><div>{getDateHeaderText(props.date)}</div></div>);

    }

    function getDateHeaderText(value) {

        return instance.formatDate(value, { skeleton: 'Ed' });

    }

    function onDateChange(args) {

        scheduleObj.selectedDate = args.startDate;

        scheduleObj.views[0].interval = args.daySpan;

        scheduleObj.dataBind();

    }

    function globalSearch(args) {

        let searchString = args.target.value;

        if (searchString !== '') {

            new DataManager(scheduleObj.getEvents(nullnulltrue)).executeQuery(new Query().

                search(searchString, ['Subject''Location''Description'], nulltruetrue)).then((e=> {

                    if (e.result.length > 0) {

                        showSearchEvents('show'e.result);

                    }

                    else {

                        showSearchEvents('hide');

                    }

                });

        }

        else {

            showSearchEvents('hide');

        }

    }

 

    function showSearchEvents(typedata) {

        if (type === 'show') {

            scheduleObj.eventSettings.dataSource = data;

        }

        else {

            scheduleObj.eventSettings.dataSource = eventdata;

        }

    }

    return (<div className='schedule-control-section'>

        <div className='col-lg-9 control-section'>

            <div className='control-wrapper'>

                <tr>

                    <td>Date Range :</td>

                    <DateRangePickerComponent id="daterangepicker" placeholder="Select date range" change={onDateChange.bind(this)} />

                </tr>

                <tr>

                    <td>Search :</td>

                    <input className="e-input" type="text" placeholder="Enter the Search text" onKeyUp={globalSearch.bind(this)} />

                </tr>

 

                <ScheduleComponent height='650px' ref={schedule => scheduleObj = schedule} selectedDate={new Date(2023010)} eventSettings={dataSource: eventdata }} dateHeaderTemplate={dateHeaderTemplate.bind(this)}>

                    <HeaderRowsDirective>

                        <HeaderRowDirective option='Month' />

                        <HeaderRowDirective option='Date' />

                    </HeaderRowsDirective>

                    <ViewsDirective>

                        <ViewDirective option='TimelineDay' timeScale={false} interval={15} />

                    </ViewsDirective>

                    <Inject services={[TimelineViewsTimelineMonthAgendaResizeDragAndDrop]} />

                </ScheduleComponent>

            </div>

        </div>

    </div>);

}

export default TimelineView;


Loader.
Live Chat Icon For mobile
Up arrow icon