filter

[?????? ???????]

Hello, I'm doing a project, I need to implement filtering by resource. I have a list of people and a list of their professions that I enter into resources, I need to filter so that I can select certain doctors and only they are displayed in my calendar, I saw you have something similar in the mobile version. Please tell me how to implement this, since I have not seen this in the documentation. I am attaching a code with a resource from your documentation, how to do filtering for it and also a photo of the application for the telephone version as I would like it to look on a PC

import * as React from 'react';

import * as ReactDOM from "react-dom";

import { Week, Month, TimelineViews, TimelineMonth, Agenda, ScheduleComponent, ViewsDirective, ViewDirective, ResourcesDirective, ResourceDirective, Inject } from '@syncfusion/ej2-react-schedule';

import { doctorData } from './datasource';

const App = () => {

  const getDoctorName = (value) => {

    return ((value.resourceData) ?

      value.resourceData[value.resource.textField] :

      value.resourceName);

  }

  const getDoctorLevel = (value) => {

    let resourceName = getDoctorName(value);

    return (resourceName === 'Will Smith') ? 'Cardiologist' : (resourceName === 'Alice') ? 'Neurologist' : 'Orthopedic Surgeon';

  }

  const eventSettings = { dataSource: doctorData };

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

  const resourceData = [

    { text: 'Will Smith', id: 1, color: '#ea7a57', designation: 'Cardioligst' },

    { text: 'Alice', id: 2, color: '#7fa900', designation: 'Neurologist' },

    { text: 'Robson', id: 3, color: '#7fa900', designation: 'Orthopedic Surgeon' }

  ];

  const resourceHeaderTemplate = (props) => {

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

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

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

  }

  return (<ScheduleComponent width='100%' height='550px' selectedDate={new Date(2018, 3, 1)} currentView='WorkWeek' resourceHeaderTemplate={resourceHeaderTemplate} eventSettings={eventSettings} group={group}>

    <ResourcesDirective>

      <ResourceDirective field='DoctorId' title='Doctor' name='Doctors' dataSource={resourceData} textField='text' idField='id' DesignationField='designation' colorField='color'>

      </ResourceDirective>

    </ResourcesDirective>

    <ViewsDirective>

      <ViewDirective option='Week' />

      <ViewDirective option='Month' />

      <ViewDirective option='TimelineWeek' />

      <ViewDirective option='TimelineMonth' />

      <ViewDirective option='Agenda' />

    </ViewsDirective>

    <Inject services={[Week, Month, TimelineViews, TimelineMonth, Agenda]} />

  </ScheduleComponent>);

}

;

const root = ReactDOM.createRoot(document.getElementById('schedule'));

root.render(<App />);

So that on this panel I could select a doctor and only the selected doctor would be displayed in the calendar. Or is it possible to implement this in another way?

Regards,

Mykola

[?????? ???????]

The main question is, can I insert this sliding panel like in the mobile version?

[Ram Raju Elaiyaperumal]

Dear Customer,

Absolutely, your requirement can be achieved. We have a property called enableAdaptiveUI that allows you to display the schedule with resources in a mobile view style in desktop.

To assist you further, we've prepared a sample that you can refer to. Please check out the following StackBlitz sample: adaptive-ui - StackBlitz

This should guide you on how to implement the desired filtering functionality.

Regards,

Ram

[?????? ???????]

Thank you very much, it helped me

[Ram Raju Elaiyaperumal]

Dear Customer,

We're glad to hear that the solution worked for you! If you have any more questions in the future, don't hesitate to ask.

Best regards,

Ram