react-scheduler/react-big-schedule

import React, { Component } from 'react';
import dayjs from 'dayjs';
import { SchedulerData, ViewType, DATE_FORMAT, DemoData, Scheduler, wrapperFun } from '../components/index';
import AddResourceForm from './AddResourceForm';

class AddResource extends Component {
  constructor(props) {
    super(props);
    const today = dayjs().format(DATE_FORMAT);
    const schedulerData = new SchedulerData(today, ViewType.Week);
    schedulerData.localeDayjs.locale('en');
    schedulerData.setResources(DemoData.resources);
    schedulerData.setEvents(DemoData.events);
    this.state = {
      viewModel: schedulerData,
      visible: false,
    };
  }

  showModal = () => this.setState({ visible: true });

  handleCancel = () => this.setState({ visible: false });

  saveFormRef = form => (this.form = form);

  handleCreate = () => {
    const { form } = this;
    form.validateFields().then(values => {
      this.addResource(values.name);
      form.resetFields();
      this.setState({ visible: false });
    });
  };

  render() {
    const { viewModel } = this.state;

    const leftCustomHeader = (
      <div>
        <span style={{ fontWeight: 'bold' }}>
          <a onClick={this.showModal}>Add a resource</a>
        </span>
        <AddResourceForm ref={this.saveFormRef} visible={this.state.visible} onCancel={this.handleCancel} onCreate={this.handleCreate} addResource={this.addResource} />
      </div>
    );

    return (
      <div>
        <div>
          <h3 style={{ textAlign: 'center' }}>Add resource</h3>
          <Scheduler
            schedulerData={viewModel}
            prevClick={this.prevClick}
            nextClick={this.nextClick}
            onSelectDate={this.onSelectDate}
            onViewChange={this.onViewChange}
            eventItemClick={this.eventClicked}
            viewEventClick={this.ops1}
            viewEventText="Ops 1"
            viewEvent2Text="Ops 2"
            viewEvent2Click={this.ops2}
            updateEventStart={this.updateEventStart}
            updateEventEnd={this.updateEventEnd}
            moveEvent={this.moveEvent}
            newEvent={this.newEvent}
            leftCustomHeader={leftCustomHeader}
            toggleExpandFunc={this.toggleExpandFunc}
          />
        </div>
      </div>
    );
  }

  prevClick = schedulerData => {
    schedulerData.prev();
    schedulerData.setEvents(DemoData.events);
    this.setState({ viewModel: schedulerData });
  };

  nextClick = schedulerData => {
    schedulerData.next();
    schedulerData.setEvents(DemoData.events);
    this.setState({ viewModel: schedulerData });
  };

  onViewChange = (schedulerData, view) => {
    schedulerData.setViewType(view.viewType, view.showAgenda, view.isEventPerspective);
    schedulerData.setEvents(DemoData.events);
    this.setState({ viewModel: schedulerData });
  };

  onSelectDate = (schedulerData, date) => {
    schedulerData.setDate(date);
    schedulerData.setEvents(DemoData.events);
    this.setState({ viewModel: schedulerData });
  };

  eventClicked = (schedulerData, event) => {
    alert(`You just clicked an event: {id: ${event.id}, title: ${event.title}}`);
  };

  ops1 = (schedulerData, event) => {
    alert(`You just executed ops1 to event: {id: ${event.id}, title: ${event.title}}`);
  };

  ops2 = (schedulerData, event) => {
    alert(`You just executed ops2 to event: {id: ${event.id}, title: ${event.title}}`);
  };

  newEvent = (schedulerData, slotId, slotName, start, end, type, item) => {
    if (confirm(`Do you want to create a new event? {slotId: ${slotId}, slotName: ${slotName}, start: ${start}, end: ${end}, type: ${type}, item: ${item}}`)) {
      let newFreshId = 0;
      schedulerData.events.forEach(item => {
        if (item.id >= newFreshId) newFreshId = item.id + 1;
      });

      const newEvent = { id: newFreshId, title: 'New event you just created', start, end, resourceId: slotId, bgColor: 'purple' };
      schedulerData.addEvent(newEvent);
      this.setState({ viewModel: schedulerData });
    }
  };

  updateEventStart = (schedulerData, event, newStart) => {
    if (confirm(`Do you want to adjust the start of the event? {eventId: ${event.id}, eventTitle: ${event.title}, newStart: ${newStart}}`)) {
      schedulerData.updateEventStart(event, newStart);
    }
    this.setState({ viewModel: schedulerData });
  };

  updateEventEnd = (schedulerData, event, newEnd) => {
    if (confirm(`Do you want to adjust the end of the event? {eventId: ${event.id}, eventTitle: ${event.title}, newEnd: ${newEnd}}`)) {
      schedulerData.updateEventEnd(event, newEnd);
    }
    this.setState({ viewModel: schedulerData });
  };

  moveEvent = (schedulerData, event, slotId, slotName, start, end) => {
    if (
      confirm(
        `Do you want to move the event? {eventId: ${event.id}, eventTitle: ${event.title}, newSlotId: ${slotId}, newSlotName: ${slotName}, newStart: ${start}, newEnd: ${end}`
      )
    ) {
      schedulerData.moveEvent(event, slotId, slotName, start, end);
      this.setState({ viewModel: schedulerData });
    }
  };

  addResource = resourceName => {
    const schedulerData = this.state.viewModel;
    const newFreshId = schedulerData.resources.length + 1;
    const newFreshName = resourceName;
    schedulerData.addResource({ id: newFreshId, name: newFreshName });
    this.setState({ viewModel: schedulerData });
  };

  toggleExpandFunc = (schedulerData, slotId) => {
    schedulerData.toggleExpandStatus(slotId);
    this.setState({ viewModel: schedulerData });
  };
}

export default wrapperFun(AddResource);