Create appointment for all users

[Thomas Pentenrieder]

I'm showing the schedule in timeline view for multiple users / owners. Some customers have many people in this view with some appointments being shared by all of them (e.g. holidays). 

Is there a way to quickly select everyone as owner when creating a new assignment? Ideally by adding a checkbox or having a "add all" dropdown option in the owers input field.

[Vijay Ravi]

Hi Thomas,
 

We have thoroughly reviewed and validated your reported query. To achieve your requirement, you can customize the scheduler's editor template window using the editorTemplate property to render a checkbox component. By implementing functionality to select all resources when the checkbox is checked, you can achieve the desired outcome. Alternatively, you can utilize the schedule PopupOpen event in the default editor to render an additional checkbox field and implement the same functionality.
 

For your reference, we have provided a sample implementation and code snippet below, demonstrating the use of the editorTemplate property to achieve this customization.

[index.js]
 

import { createRoot } from 'react-dom/client';

import './index.css';

import * as React from 'react';

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

import { DateTimePickerComponent } from '@syncfusion/ej2-react-calendars';

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

import { eventData } from './datasource';

import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';

const App = () => {

  const eventSettings = { dataSource: eventData };

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

  const ownerData = [

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

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

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

  ];

  const fields = { text: 'OwnerText', value: 'Id' };

  

  const editorTemplate = (props) => {

    const [selectAll, setSelectAll] = React.useState(false);

    const [selectedOwners, setSelectedOwners] = React.useState(props.OwnerId || []);

    

    const handleSelectAllChange = (e) => {

      const checked = e.checked;

      setSelectAll(checked);

      

      if (checked) {

        // Select all owners

        const allOwnerIds = ownerData.map(owner => owner.Id);

        setSelectedOwners(allOwnerIds);

      } else {

        // Clear selection or revert to original

        setSelectedOwners(props.OwnerId || []);

      }

    };

    return (props !== undefined && Object.keys(props).length > 0 ? 

      <table className="custom-event-editor" style={{ width: '100%', padding: '5' }}>

        <tbody>

          <tr>

            <td className="e-textlabel">Summary</td>

            <td colSpan={4}>

              <input id="Summary" className="e-field e-input" type="text" name="Subject" style={{ width: '100%' }} />

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">Owner</td>

            <td colSpan={4}>

              <div style={{ display: 'flex', alignItems: 'center', marginBottom: '5px' }}>

                <CheckBoxComponent 

                  label="Select All Owners" 

                  checked={selectAll}

                  change={handleSelectAllChange}

                />

              </div>

              <MultiSelectComponent 

                className="e-field" 

                placeholder='Choose owner' 

                data-name="OwnerId" 

                dataSource={ownerData} 

                fields={fields} 

                value={selectedOwners} 

              />

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">From</td>

            <td colSpan={4}>

              <DateTimePickerComponent format='dd/MM/yy hh:mm a' id="StartTime" data-name="StartTime" value={new Date(props.startTime || props.StartTime)} className="e-field"></DateTimePickerComponent>

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">To</td>

            <td colSpan={4}>

              <DateTimePickerComponent format='dd/MM/yy hh:mm a' id="EndTime" data-name="EndTime" value={new Date(props.endTime || props.EndTime)} className="e-field"></DateTimePickerComponent>

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">Reason</td>

            <td colSpan={4}>

              <textarea id="Description" className="e-field e-input" name="Description" rows={3} cols={50} style={{ width: '100%', height: '60px !important', resize: 'vertical' }}></textarea>

            </td>

          </tr>

        </tbody>

      </table> 

      : <div></div>

    );

  }

  

  return (

    <ScheduleComponent 

      width='100%' 

      height='550px' 

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

      eventSettings={eventSettings} 

      editorTemplate={editorTemplate} 

      showQuickInfo={false} 

      group={group}

    >

      <ResourcesDirective>

        <ResourceDirective 

          field='OwnerId' 

          title='Owner' 

          name='Owners' 

          allowMultiple={true} 

          dataSource={ownerData} 

          textField='OwnerText' 

          idField='Id' 

          allowGroupEdit={false} 

          colorField='OwnerColor'

        ></ResourceDirective>

      </ResourcesDirective>

      <ViewsDirective>

        <ViewDirective option='TimelineDay' />

        <ViewDirective option='TimelineWeek' />

      </ViewsDirective>

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

    </ScheduleComponent>

  );

};

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

root.render(<App />);

Editor Template UG: https://ej2.syncfusion.com/react/documentation/schedule/editor-template#how-to-add-resource-options-within-editor-template
Additional field in default editor UG: https://ej2.syncfusion.com/react/documentation/schedule/editor-template#add-additional-fields-to-the-default-editor
Sample link: https://stackblitz.com/edit/react-hd6iyymd-c4h8eyrf?file=index.js

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[Thomas Pentenrieder]

Thanks, I will probably go the EditorTemplate route. Can I somehow copy the default Fluent UI 2 Editor layout as a starting point?

[Saritha Sankar]

Hi Thomas,

To achieve your requirement, you can customize the scheduler's default editor window using the popupOpen even.. By implementing functionality to select all resources when the checkbox is checked, you can achieve the desired outcome. Refer the below codes and sample for your reference:

  <ScheduleComponent

      ref={scheduleRef}

      width='100%'

      height='550px'

      currentView='Week'

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

      eventSettings={eventSettings}

      group={group}

      popupOpen={onPopupOpen} >

 

const onPopupOpen = (args) => {

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

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

    // Hide default Owner field

    const defaultOwnerRow = formElement.querySelector('.e-resources-row');

    if (defaultOwnerRow) {

      defaultOwnerRow.style.display = 'none';

    }

    if (!formElement.querySelector('#customOwnerContainer')) {

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

      formElement.firstChild.insertBefore(row, formElement.querySelector('.e-description-row'));

      const container = createElement('div', {

        className: 'custom-field-container',

        id: 'customOwnerContainer',

        styles: 'margin-bottom: 10px'

      });

      const checkbox = createElement('input', {

        attrs: { type: 'checkbox', id: 'selectAllOwners' }

      });

      const label = createElement('label', {

        innerHTML: 'Select All Owners',

        attrs: { for: 'selectAllOwners' },

        className: 'e-label',

        styles: 'margin-left: 5px;'

      });

      const inputEle = createElement('input', {

        className: 'e-field',

        attrs: { name: 'OwnerId', id: 'customOwnerSelect' }

      });

      const labelTitle = createElement('label', {

        innerHTML: 'Owners',

        className: 'e-textlabel',

        attrs: { for: 'customOwnerSelect' },

        styles: 'display: block; margin-bottom: 4px; font-weight: 500;'

      });

      

      container.appendChild(checkbox);

      container.appendChild(label);

      container.appendChild(labelTitle);

      container.appendChild(inputEle);

      row.appendChild(container);

      

     

      const multiSelect = new MultiSelect ({

        dataSource: ownerData,

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

        placeholder: 'Select Owners',

        mode: 'Box',

        showDropDownIcon: true,

        allowFiltering: true,

        value: args.data.OwnerId

      });

      

      console.log(multiSelect.value);

      multiSelect.appendTo(inputEle);

      multiSelect.dataBind();

      checkbox.addEventListener('change', (e) => {

        const allOwnerIds = ownerData.map(o => o.Id);

  

        if (e.target.checked) {

          multiSelect.value = allOwnerIds;

        } else {

          const originalOwnerId = args.data && args.data.OwnerId ? 

                                (Array.isArray(args.data.OwnerId) ? args.data.OwnerId : []) : 

                                [];

          multiSelect.value = originalOwnerId;

        }

        

        multiSelect.dataBind();

        

      });

    }

  }

};

Sample Link: https://stackblitz.com/edit/react-zdtg4tsd-dy2wcmvh?file=index.js

Please let us know if you need any further assistance.

Regards,

Saritha S.

[Thomas Pentenrieder]

sorry for the confusion, I'd like to use the approach suggested by Vijay Ravi replacing the Editor Template with my own and not extending it. 

The suggested code however looks completely different than the default Fluent UI v2 editor template. Can I somehow copy the HTML of the default editor as a starting point and then add my custom fields there?

[Vijay Ravi]

Hi Thomas Pentenrieder,
 

You can utilize the editorTemplate property of the scheduler to customize the editor template with only the fields you require. To achieve the desired functionality, you can add fields to the editor template, replicating the default editor template's structure, and customize it as needed. Refer the below shared sample for your reference.

Sample link: Rxhxqsxl (duplicated) - StackBlitz

 

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

[Ghulam Hyder Ghaloo]

Don't hesitate to get in touch if you require further help or more information.   Lock repairs Harrogate

The suggested code however looks completely different than the default Fluent UI v2 editor template. Can I somehow copy the HTML of the default editor as a starting point and then add my custom fields there?

[Swathi Ravi]

Hi Ghulam Hyder Ghaloo,

Yes, you can absolutely use the HTML of the default Fluent UI v2 editor as a starting point and then add your custom fields to it.

Let me know if you need further clarification or assistance!

Regards,

Swathi Ravi