Multiple Resources without Grouping

[Thomas Pentenrieder]

I would like to have a second resource like "Rooms" in addition to the Owner resrouce, but only group by owner and have the room selector show up in the editor dialog. 

Removing Rooms from the group also removes it from the editor unforunately. Is this a scenario that is supported without building a custom editor dialog form?

https://react-jnsxot.stackblitz.io

[Subalakshmi Ramachandran]

Hi Thomas Pentenrieder,

Based on the information you have provided; we understand that you require one more resource which group all other resources and you want that in editor window of Schedule Component. We have prepared a sample that includes the one resource which group all resources and shown up in editor window.

 [index.ts]

 const group = { resources: ['Halls', 'Rooms', 'Owners'] };
  const hallData = [{ HallText: 'Hall', Id: 1, HallColor: '#cb6bb2' }];

<ScheduleComponent
    group={group}
    >
 <ResourceDirective
          field="HallId"
          title="Hall"
          name="Halls"
          allowMultiple={true}
          dataSource={hallData}
          textField="HallText"
          idField="Id"
          colorField="HallColor"
        ></ResourceDirective>
</ScheduleComponent>

For your reference, we've created a sample that demonstrates this approach:
Sample: schedule-3-resource - StackBlitz



Regards,
Suba R

[Thomas Pentenrieder]

I'm sorry but you misunderstood.

I want 2 resources but only by group 1. so for your sample:

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

I still want Hall, Room and Owner to be editable in the 

[Swathi Ravi]

Hi Thomas,

Thank you for clearly outlining your requirements.

Based on your query, if the Scheduler is not grouped by any specific resource, the default editor window will display all three resources (Hall, Room, and Owner). However, when you group the Scheduler by a single resource (e.g., Owners), the editor window will only show the grouped resource by default. To display all three resources (Hall, Room, and Owner) in the editor window while grouping by a specific resource, you can utilize additional fields or the Editor Template feature.

Below is a sample code snippet that demonstrates how to achieve this using additional fields:

import { DropDownList } from '@syncfusion/ej2-dropdowns';

import { createElement } from '@syncfusion/ej2-base';

const App = () => {

  let resData = [

    {

      Id: 1,

      Subject: 'Conference',

      StartTime: new Date(2018, 3, 7, 10, 0),

      EndTime: new Date(2018, 3, 7, 11, 0),

      IsAllDay: false,

      HallId: 1,

      RoomId: 1,

      OwnerId: 1

    }, {

      Id: 2,

      Subject: 'Meeting - 1',

      StartTime: new Date(2018, 3, 1, 10, 0),

      EndTime: new Date(2018, 3, 1, 12, 30),

      IsAllDay: false,

      HallId: 1,

      RoomId: 2,

      OwnerId: 1

    }, {

      Id: 3,

      Subject: 'Paris',

      StartTime: new Date(2018, 3, 3, 12, 0),

      EndTime: new Date(2018, 3, 3, 12, 30),

      IsAllDay: false,

      HallId: 1,

      RoomId: 2,

      OwnerId: 2

    }

  ];

  const eventSettings = { dataSource: resData };

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

  const hallData = [{ HallText: 'Hall', Id: 1, HallColor: '#cb6bb2' }];

  const roomData = [

    { RoomText: 'ROOM 1', Id: 1, GroupId: 1, RoomColor: '#cb6bb2' },

    { RoomText: 'ROOM 2', Id: 2, GroupId: 1, RoomColor: '#56ca85' },

  ];

  const ownerData = [

    { OwnerText: 'Nancy', Id: 1, GroupId: 1, OwnerColor: '#ffaa00' },

    { OwnerText: 'Steven', Id: 2, GroupId: 2, OwnerColor: '#f8a398' },

    { OwnerText: 'Michael', Id: 3, GroupId: 1, OwnerColor: '#7499e1' },

  ];

  const onPopupOpen = (args) => {

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

      if (!args.element.querySelector('.custom-field-row')) {

        let row = createElement('div', { className: 'custom-field-row' });

        let formElement = args.element.querySelector('.e-schedule-form');

        let res = formElement.querySelector('.e-resources-row');

        res.parentNode.insertBefore(row, res.nextSibling);

        //Room resource dropdown

        let container = createElement('div', { className: 'custom-field-container' });

        let inputEle = createElement('input', {

          className: 'e-field', attrs: { name: 'RoomId' }

        });

        container.appendChild(inputEle);

        row.appendChild(container);

        let drowDownList = new DropDownList({

          dataSource: roomData,

          fields: { text: 'RoomText', value: 'Id' },

          value: args.data.RoomId,

          floatLabelType: 'Always', placeholder: 'Select Room'

        });

        drowDownList.appendTo(inputEle);

        inputEle.setAttribute('name', 'RoomId');

        //Hall resource dropdown

        let hallcontainer = createElement('div', { className: 'custom-field-hallcontainer' });

        let hallInputEle = createElement('input', {

          className: 'e-field', attrs: { name: 'HallId' }

        });

        hallcontainer.appendChild(hallInputEle);

        row.appendChild(hallcontainer);

        let hallDrowDownList = new DropDownList({

          dataSource: hallData,

          fields: { text: 'HallText', value: 'Id' },

          value: args.data.HallId,

          floatLabelType: 'Always', placeholder: 'Select Hall'

        });

        hallDrowDownList.appendTo(hallInputEle);

        hallInputEle.setAttribute('name', 'HallId');

      }

    }

  }

  return (

    <ScheduleComponent

      width="100%"

      height="550px"

      selectedDate={new Date(2018, 3, 1)}

      eventSettings={eventSettings}

      group={group}

      popupOpen={onPopupOpen}

    >

    </ScheduleComponent>

  );

};

Sample: https://stackblitz.com/edit/schedule-3-resource-ftgie2?file=index.js

Refer to the below shared ug documentation and demo to know more about the how to add additional fields in the default editor window.

https://ej2.syncfusion.com/react/documentation/schedule/editor-template#add-additional-fields-to-the-default-editor

https://ej2.syncfusion.com/react/demos/#/fluent2/schedule/editor-custom-field

And also refer to our editor template documentation and demo.

https://ej2.syncfusion.com/react/documentation/schedule/editor-template#how-to-add-resource-options-within-editor-template

https://ej2.syncfusion.com/react/demos/#/fluent2/schedule/editor-template

Please feel free to reach out if you have any further questions.

Regards,

Swathi

[Thomas Pentenrieder]

Thanks, this was helpful.

How do I use the Room color in this scenario for the appointments?

[Swathi Ravi]

Thomas,

Thank you for your positive feedback! We’re delighted to hear that our previous solution was helpful to you.

To apply room colors to appointments in the Scheduler, you can utilize the eventRendered event, which allows you to customize the appearance of appointments based on the room assigned. Below is a code snippet that demonstrates how to set the background color of an appointment according to its assigned room:

  const onEventRendered = (args) => {

    let roomId = args.data.RoomId;

    let Data = roomData.find((data) => data.Id == roomId)

    if (!args.element || !Data.RoomColor) {

        return;

    }

    args.element.style.backgroundColor = Data.RoomColor;

};

  return (

    <ScheduleComponent

      width="100%"

      height="550px"

      selectedDate={new Date(2018, 3, 1)}

      eventSettings={eventSettings}

      group={group}

      popupOpen={onPopupOpen}

      eventRendered={onEventRendered}

    >

)

Sample: schedule-3-resource (forked) - StackBlitz

UG: https://ej2.syncfusion.com/react/documentation/schedule/appointments#using-eventrendered-event

This approach ensures that each appointment reflects the color of the assigned room, enhancing the visual organization of your Scheduler.

Please feel free to reach out if you need any further assistance. We're here to help!