React Timeline Dynamic Resource Availability

The options of the timeline can be dynamically changed. That applies to both the color and invalid options which control the resource track background colors and their valid state.

Based on the type of event someone wants to add or create we can highlight resources that support that type of event and invalidate resources that don't.

In the following example we have two types of tasks/events: HW for Hardware and SW for Software tasks. We also have two teams or two groups of resources: HW Team and SW Team. What we want to do is enforce event creation for teams based on the type of event: HW for the hardware team and SW for the software team.

We'll use the onEventDragStart and onEventDragEnd lifecycle events to highlight & invalidate and then set everything back to the default state. We have access to the event.category through the lifecycle event's args.

Want to learn about lifecycle events?  Learn how you can levarage the various events that are triggered →
Get started with this example

Demo

Loading the live demo

Preview in full screen

Color-code resource rows and restrict drop zones by task type on a Timeline — compatible resources turn green, incompatible ones gray during drag.

Code

View code on GitHub 
import { Draggable, Eventcalendar, Page, setOptions, Toast  } from '@mobiscroll/react';
import PropTypes from 'prop-types';
import { useCallback, useState } from 'react';

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
});

const hwInvalids = [
  {
    recurring: {
      repeat: 'daily',
    },
    resource: ['res4', 'res5', 'res6'],
  },
];
const swInvalids = [
  {
    recurring: {
      repeat: 'daily',
    },
    resource: ['res1', 'res2', 'res3'],
  },
];
const hwColors = [
  {
    recurring: {
      repeat: 'daily',
    },
    resource: ['res1', 'res2', 'res3'],
    background: '#1ad4041a',
  },
];
const swColors = [
  {
    recurring: {
      repeat: 'daily',
    },
    resource: ['res4', 'res5', 'res6'],
    background: '#1ad4041a',
  },
];
const viewSettings = {
  timeline: { type: 'day' },
};
const myResources = [
  {
    id: 'hwt',
    name: 'HW Team',
    eventCreation: false,
    children: [
      {
        id: 'res1',
        name: 'Resource 1',
        color: '#0e9ea5',
      },
      {
        id: 'res2',
        name: 'Resource 2',
        color: '#0e9ea5',
      },
      {
        id: 'res3',
        name: 'Resource 3',
        color: '#0e9ea5',
      },
    ],
  },
  {
    id: 'swt',
    name: 'SW Team',
    eventCreation: false,
    children: [
      {
        id: 'res4',
        name: 'Resource 4',
        color: '#c3b726',
      },
      {
        id: 'res5',
        name: 'Resource 5',
        color: '#c3b726',
      },
      {
        id: 'res6',
        name: 'Resource 6',
        color: '#c3b726',
      },
    ],
  },
];
const myTasks = [
  {
    taskId: 1,
    title: 'Task 1',
    start: '08:00',
    end: '12:00',
    category: 'hw',
    color: '#0e9ea5',
  },
  {
    taskId: 2,
    title: 'Task 2',
    start: '08:00',
    end: '12:00',
    category: 'hw',
    color: '#0e9ea5',
  },
  {
    taskId: 3,
    title: 'Task 3',
    start: '08:00',
    end: '12:00',
    category: 'hw',
    color: '#0e9ea5',
  },
  {
    taskId: 4,
    title: 'Task 4',
    start: '08:00',
    end: '12:00',
    category: 'sw',
    color: '#c3b726',
  },
  {
    taskId: 5,
    title: 'Task 5',
    start: '08:00',
    end: '12:00',
    category: 'sw',
    color: '#c3b726',
  },
  {
    taskId: 6,
    title: 'Task 6',
    start: '08:00',
    end: '12:00',
    category: 'sw',
    color: '#c3b726',
  },
];

function Task(props) {
  const [draggable, setDraggable] = useState();

  const setDragElm = useCallback((elm) => {
    setDraggable(elm);
  }, []);

  return (
    <div ref={setDragElm} className="dynamically-color-and-invalidate-task">
      <div>
        {props.data.title}
        <span className="dynamically-color-and-invalidate-task-type">{props.data.category}</span>
      </div>
      <Draggable dragData={props.data} element={draggable} />
    </div>
  );
}

Task.propTypes = {
  data: PropTypes.object.isRequired,
};

function App() {
  const [myInvalids, setInvalids] = useState([]);
  const [myColors, setColors] = useState([]);
  const [toasterMessage, setToasterMessage] = useState('');
  const [isToastOpen, setToastOpen] = useState(false);

  const handleExtendDefaultEvent = useCallback((args) => {
    const res = args.resource;

    if (res) {
      if (res === 'res1' || res === 'res2' || res === 'res3') {
        return {
          category: 'hw',
        };
      } else {
        return {
          category: 'sw',
        };
      }
    }
  }, []);

  const handleEventDragStart = useCallback((args) => {
    let event = args.event;

    if (event) {
      event = event.original || event;

      if (event.category === 'hw') {
        setInvalids(hwInvalids);
        setColors(hwColors);
      } else {
        setInvalids(swInvalids);
        setColors(swColors);
      }
    }
  }, []);

  const handleEventDragEnd = useCallback(() => {
    setInvalids([]);
    setColors([]);
  }, []);

  const handleEventCreated = useCallback(() => {
    setToasterMessage('Event created');
    setToastOpen(true);
  }, []);

  const handleEventUpdated = useCallback(() => {
    setToasterMessage('Event moved');
    setToastOpen(true);
  }, []);

  const handleEventCreateFailed = useCallback(() => {
    setToasterMessage("Can't create event");
    setToastOpen(true);
  }, []);

  const handleEventUpdateFailed = useCallback(() => {
    setToasterMessage("Can't move event");
    setToastOpen(true);
  }, []);

  const handleCloseToast = useCallback(() => setToastOpen(false), []);

  return (
    <Page>
      <div className="mbsc-grid mbsc-no-padding">
        <div className="mbsc-row">
          <div className="mbsc-col-sm-3">
            <div className="mbsc-form-group-title">Available tasks</div>
            {myTasks.map((task) => (
              <Task key={task.taskId} data={task} />
            ))}
          </div>
          <div className="mbsc-col-sm-9 dynamically-color-and-invalidate-calendar">
            <Eventcalendar
              view={viewSettings}
              resources={myResources}
              invalid={myInvalids}
              colors={myColors}
              dragToMove={true}
              externalDrop={true}
              extendDefaultEvent={handleExtendDefaultEvent}
              onEventDragStart={handleEventDragStart}
              onEventDragEnd={handleEventDragEnd}
              onEventCreated={handleEventCreated}
              onEventUpdated={handleEventUpdated}
              onEventCreateFailed={handleEventCreateFailed}
              onEventUpdateFailed={handleEventUpdateFailed}
            />
          </div>
        </div>
      </div>
      <Toast message={toasterMessage} isOpen={isToastOpen} onClose={handleCloseToast} />
    </Page>
  );
}

export default App;

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.