Example for running the basic version using React Hooks

[jovana]

Checklist

• I've looked through the README
• I've verified that I'm running react-big-schedule version 4.2.0
• I've searched the existing issues and discussions for a similar question
• I've provided relevant code snippets or error messages
• I've included steps to reproduce the issue
• I've checked the browser console for any errors
• I've tested the issue with the latest version of react-big-schedule

Please make sure the question is worded well enough to be understood

Hi, Is it possible to have an example of how to use this in React Hooks?

thx!

[ansulagrawal]

@jovana thanks for using the library.

import React, { useEffect, useReducer } from 'react';
import { useDispatch } from 'react-redux';
import { Scheduler, SchedulerData, ViewType, wrapperFun } from 'react-big-schedule';
import config from './scheduler.config';
import behaviorConfig from './behavior.config';
import { errorModal } from '../../helpers/modal-helper';
import randomValueGenerator from '../../helpers/random-value-generator';
import useWindowSize from '../../hooks/use-window-size.jsx';
import './index.scss';

let schedulerData;

const initialState = {
  showScheduler: false,
  viewModel: {},
};

function reducer(state, action) {
  switch (action.type) {
    case 'INITIALIZE':
      return { showScheduler: true, viewModel: action.payload };
    case 'UPDATE_SCHEDULER':
      return { ...state, viewModel: action.payload };
    default:
      return state;
  }
}

function SchedulerComponent(props) {
  const [state, dispatch] = useReducer(reducer, initialState);
  const sDispatch = useDispatch();
  const screen = useWindowSize();

  useEffect(() => {
    schedulerData = new SchedulerData(props.date, ViewType.Day, false, false, config(), behaviorConfig, undefined);
    schedulerData.localeDayjs.locale('en');

    schedulerData.setMinuteStep(30);

    schedulerData.setResources(props.resourceList || []);

    schedulerData.setEvents(props.eventList ?? []);

    if (props?.slot) {
      schedulerData.addEvent(props?.slot);
    }

    dispatch({ type: 'INITIALIZE', payload: schedulerData });
  }, [screen.height, screen.width]);

  const newEvent = (sd, slotId, slotName, start, end) => {
    // if (props.disableSlotClick) return;
    const oldEvent = schedulerData?.events?.find(ele => ele.type === 'temp');
    if (oldEvent) {
      schedulerData.removeEvent(oldEvent);
    }
    const event = {
      id: Math.floor(randomValueGenerator()),
      title: '',
      start,
      end,
      resourceId: slotId,
      type: 'temp',
    };
    schedulerData.addEvent(event);
    sDispatch(props?.changePilot?.(slotId));
    dispatch({ type: 'UPDATE_SCHEDULER', payload: schedulerData });
    props?.form.setFieldsValue({ header: { ...props?.form.getFieldValue('header'), start, end } });
    props.onChange?.(event);
  };

  const conflictOccurred = () => {
    errorModal(sDispatch, 'Please select a valid slot!', 'Slot Error', 'Warning');
  };

  const updateEventStart = (sd, event, newStart) => {
    if (event.type === 'temp') {
      schedulerData.updateEventStart(event, newStart);
      props?.form.setFieldsValue({ header: { ...props?.form.getFieldValue('header'), start: newStart } });
      dispatch({ type: 'UPDATE_SCHEDULER', payload: schedulerData });
    }
  };

  const updateEventEnd = (sd, event, newEnd) => {
    if (event.type === 'temp') {
      schedulerData.updateEventEnd(event, newEnd);
      props?.form.setFieldsValue({ header: { ...props?.form.getFieldValue('header'), end: newEnd } });
      dispatch({ type: 'UPDATE_SCHEDULER', payload: schedulerData });
    }
  };

  const eventItemTemplateResolver = (schData, event, bgColor, isStart, isEnd, mustAddCssClass) => {
    let additionalClass = '';

    if (event?.type && event.type === 'temp') {
      additionalClass = 'highlight-slot';
    }

    return (
      <div key={event.id} className={`${mustAddCssClass} ${additionalClass}`} style={{ background: bgColor }}>
        {event.title}
      </div>
    );
  };

  return (
    <div className="scheduler-component-wrapper">
      {state.showScheduler && (
        <div id="scheduler">
          <Scheduler
            schedulerData={state.viewModel}
            updateEventStart={updateEventStart}
            updateEventEnd={updateEventEnd}
            conflictOccurred={conflictOccurred}
            newEvent={newEvent}
            eventItemTemplateResolver={eventItemTemplateResolver}
          />
        </div>
      )}
    </div>
  );
}

export default wrapperFun(SchedulerComponent);

use can refer this and you it. I will provide a proper example within next 2 day. Will it be fine if not just message me will provide you as soon as posibe.

@jovana thanks once again to use this repo

[ansulagrawal]

@jovana in hurry for you, I have added functional component for example Add More . you can check it on https://react-big-schedule.vercel.app/add-more for demo just click on functional based and check it.

for code you can reffer this file: https://github.com/ansulagrawal/react-big-schedule-example/blob/master/src/pages/Add-More/functional-based.jsx

if you need any other help please feel free to ask

[jovana]

@ansulagrawal Thanks for your support on this! I'm now up and running using real data from our project.
On thou, it gives me a bunch of errors loading files from the rrule module. It is this problem: jkbrzt/rrule#522

Do you have a workaround for this?

[ansulagrawal]

@jovana I have not work with rrule will check and provide you a solution

[jovana]

@jovana I have not work with rrule will check and provide you a solution

Neither do I but it seems to be a dependency: https://github.com/ansulagrawal/react-big-schedule/blob/12a16949dc44a34c7b1709fb2687af303a791fa4/package.json#L67

[ansulagrawal]

What error you are getting while building I didn't find any as I am not using rrule for passing in data