Step by step guide to build a calendar component with React

Business Background

Let me first briefly describe the business scenario. It will call the user's schedule information in office software such as WeChat for Enterprise or DingTalk, and display the schedule on the web. If there is a schedule conflict, the schedule of the conflicting day will be displayed, so that the scheduler can arrange the time schedule reasonably to avoid conflicts, as shown in the figure;

Using Technology

1. UI framework: React (Hook);
2. Plugin: moment (a must-have plugin for a lazy programmer who ranks 18th, otherwise it would be too troublesome to turn it around by yourself);

Technical Difficulties

1. API design;
2. Component splitting;
3. Decoupling of UI and business;
4. Works right out of the box;

Design ideas

😱 A face full of confusion and pain

When developing the project, I used the same component library as antd. After reviewing it, I subconsciously went to antd to see if there were any components that could be used out of the box.

Unfortunately!!! There is no such weekly or daily filtering component. I am so annoyed. Alibaba has written so many components, why did they miss this one?

So I turned to Baidu, the almighty one, to check if there were any related components. Later, I found the fullcalendar component, but I didn’t even read its documentation or demo. I resolutely decided to write one myself!

There are several reasons in summary:

1. Although their components are well written, many businesses are ever-changing and may not meet all business needs;
2. Secondly, when new developers are not familiar with this component, they need to read the documentation, which increases the maintenance cost;
3. The third point is to challenge yourself within a limited time;

🙄Start thinking

Actually, when I started to conceive, I also wanted to refer to the API design of excellent components. However, some components are really hard to use, and I don't understand why they are written in this way. So I thought about it from the perspective of a user, and I still think that I should design it according to my own calling method as an 18th-rate, low-level, and laziest programmer - it can be used out of the box.

Another important point is to decouple it from the business, so that other projects can use it directly. Why not?

So I spent the whole morning drawing a design based on my own ideas:

This is drawn using ProcessOn. I don't use it much, so the drawing is not very good. Please forgive me!

🌲Directory Structure

└─Calendar
│ data.d.ts type definition file
│ index.tsx entry file
│
├─components
│ ├─CalendatrHeader Header container component
│ │ │ index.less
│ │ │ index.tsx
│ │ │
│ │ └─components
│ │ ├─DailyOptions Top switch date and switch mode status component
│ │ │ index.less
│ │ │ index.tsx
│ │ │
│ │ └─WeeklyOptions Weekly mode date and day components
│ │ index.less
│ │ index.tsx
│ │
│ ├─Container Container component
│ │ Container.tsx
│ │ index.less
│ │
│ ├─ScheduleCantainer Lower schedule container
│ │ index.less
│ │ index.tsx
│ │
│ └─ScheduleItem The gray part of each schedule component
│ index.less
│ index.tsx
│
└─utils
index.ts tool file

🛠 Split components

Looking at the picture carefully, it is not difficult to see that I have split the component into three parts:
Container: This component is the container of the entire component, responsible for the UI core state data, and maintains two states:

1. targetDay: currently selected date timestamp (why the timestamp is used will be explained later);
2. switchWeekAndDay: saves the state of day and week;

CalendatrHeader header container component: a subcomponent of the Container container, this component is responsible for switching dates and changing the state of the component week and day; this component contains the calendar component, the week component, the date filter component, the day and week switch component, the today button component, and finally a business component container (businessRender);

ScheduleCantainer schedule container component: This component is supported by 25 scheduleRender components (because it is from 0:00 today to 0:00 next morning), and its subcomponents also include time scale components;

scheduleRender: This component accepts a callback, which returns a JSX. This JSX is the custom-styled schedule component passed in by the caller (the details will be discussed later);

This is the rough breakdown of the components. The text is not good enough, but you can combine it with pictures.

Next let’s get started!!!

Code Implementation

First, let's look at the definition of the accepted parameter types:

type dataType = {
  startTime: DOMTimeStamp; // start timestamp endTime: DOMTimeStamp; // end timestamp [propsName: string]: any; // business data };

type ContainerType = {
  data: dataType[]; // Business data initDay?: DOMTimeStamp; // Initialization timestamp onChange?: (params: DOMTimeStamp) => void; // onChange method when changing date height?: number; // The height of the ScheduleCantainer container scheduleRender?: ({
    data: dataType,
    timestampRange: [DOMTimeStamp, DOMTimeStamp],
  }) => JSX.Element; // The callback passed in will receive the business data of the current data and the timestamp range of the current business data;
  businessRender?: ({ timestamp: DOMTimeStamp }) => React.ReactNode; // The business component passed in, query the front-end Cai Xukun, look at the picture, do you remember it?
  mode?: 'day' | 'week'; // Initialize the display mode of day and week};

Container

Code:

const Container: React.FC<ContainerType> = ({
  initDay,
  onChange,
  scheduleRender,
  businessRender,
  data,
  height = 560,
  mode = 'day',
}) => {
  //Currently selected date timestamp const [targetDay, setTargetDay] = useState<DOMTimeStamp>(initDay);
  // Switch day and week const [switchWeekandDay, setSwitchWeekandDay] = useState<'day' | 'week'>(mode);

  return (
    <div className={style.Calendar_Container}>
      <CalendatrHeader
        targetDay={targetDay}
        setTargetDay={(timestamp) => {
          onChange(timestamp);
          setTargetDay(timestamp);
        }}
        businessRender={businessRender}
        switchWeekandDay={switchWeekandDay}
        setSwitchWeekandDay={setSwitchWeekandDay}
      />
      <ScheduleCantainer
        height={height}
        data={data}
        targetDay={targetDay}
        scheduleRender={scheduleRender}
      />
    </div>
  );
};

Looking at the code, you can think about it. It is definitely necessary to elevate the global state data to the highest level for control, which is also in line with React's component design philosophy;

Maintains the current timestamp and day/week status, and the status of all subcomponents is displayed based on targetDay;

CalendatrHeader header container component

I think the rest of the header container is fine. Since the day of the week is fixed (mainly referring to Apple's calendar component, Apple's day of the week has not changed, so I refer to the excellent design of big manufacturers), the most difficult part is how to accurately display the day of the week;

In fact, I wrote two ways to display the date of the week:

The first method is to use the current day of the week as the basis, calculate forward and backward respectively, and finally output a list like [29, 30, 31, 1, 2, 3, 4]. If today happens to be the 1st or 2nd, then pull the date of the last day of the previous month and count forward;

The second method is the following code method, which also locates the day of the week of the current date and dynamically calculates it through the timestamp. As long as you know how many days to subtract from the previous day and how many days to add to the next day, it will be fine.

Actually, both methods are OK. I ended up using the second one, which is obviously more concise.

As shown below:

The current week will output [12, 13, 14, 15, 16, 17, 18]

The following is the code for the specific implementation of the above difficulties:

const calcWeekDayList: (params: number) => WeekType = (params) => {
    const result = [];
    for (let i = 1; i < weekDay(params); i++) {
      result.unshift(params - 3600 * 1000 * 24 * i);
    }
    for (let i = 0; i < 7 - weekDay(params) + 1; i++) {
      result.push(params + 3600 * 1000 * 24 * i);
    }
    return [...result] as WeekType;
  };

Code:

const CalendatrHeader: React.FC<CalendatrHeaderType> = ({
  targetDay,
  setTargetDay,
  switchWeekandDay,
  businessRender,
  setSwitchWeekandDay,
}) => {
  // Date of the current week const [dateTextList, setDateTextList] = useState<WeekType | []>([]);
  // This state is when switching weeks, directly increase or decrease the timestamp of one week, and the date of the next week or the previous week will be automatically calculated;
  const [currTime, setCurrTime] = useState<number>(targetDay); 

  useEffect(() => {
    setDateTextList(calcWeekDayList(targetDay));
  }, [targetDay]);

  // Calculate the dates of the days before and after the current timestamp. Since the week is fixed, just calculate the date of the current week. const calcWeekDayList: (params: number) => WeekType = (params) => {
    const result = [];
    for (let i = 1; i < weekDay(params); i++) {
      result.unshift(params - 3600 * 1000 * 24 * i);
    }
    for (let i = 0; i < 7 - weekDay(params) + 1; i++) {
      result.push(params + 3600 * 1000 * 24 * i);
    }
    return [...result] as WeekType;
  };

  const onChangeWeek: (type: 'prevWeek' | 'nextWeek', switchWay: 'week' | 'day') => void = (
    type,
    switchWay,
  ) => {
    if (switchWay === 'week') {
      const calcWeekTime =
        type === 'prevWeek' ? currTime - 3600 * 1000 * 24 * 7 : currTime + 3600 * 1000 * 24 * 7;
      setCurrTime(calcWeekTime);
      setDateTextList([...calcWeekDayList(calcWeekTime)]);
    }

    if (switchWay === 'day') {
      const calcWeekTime =
        type === 'prevWeek' ? targetDay - 3600 * 1000 * 24 : targetDay + 3600 * 1000 * 24;
      setCurrTime(calcWeekTime);
      setTargetDay(calcWeekTime);
    }
  };

  return (
    <div className={style.Calendar_Header}>
      <DailyOptions
        targetDay={targetDay}
        setCurrTime={setCurrTime}
        setTargetDay={setTargetDay}
        dateTextList={dateTextList}
        switchWeekandDay={switchWeekandDay}
        setSwitchWeekandDay={(value) => {
          setSwitchWeekandDay(value);
          if (value === 'week') {
            setDateTextList(calcWeekDayList(targetDay));
          }
        }}
        onChangeWeek={(type) => onChangeWeek(type, switchWeekandDay)}
      />
      {switchWeekandDay === 'week' && (
        <WeeklyOptions
          targetDay={targetDay}
          setTargetDay={setTargetDay}
          dateTextList={dateTextList}
        />
      )}
      <div className={style.Calendar_Header_businessRender}>
        <div className={style.Calendar_Header_Zone}>GMT+8</div>
        {businessRender({ timestamp: targetDay })}
      </div>
    </div>
  );
};

DailyOptions: It is actually a container for components that switch "Day of the Week" & "Day and Week Mode" & "Today" in the header;

WeeklyOptions: This is the component that displays the day of the week and date. If it is switched to day, it will not be displayed: as shown in the figure:

businessRender: This is the business component passed in by the user in Xiao Zhan's column;

ScheduleCantainer detailed schedule container

This is the part of the picture:

Actually, this part of the code is quite long, so it is not convenient to post all of it; I will post some snippets according to the functional points;

Left scale

The left scale is actually hardcoded from 00:00 - 01:00 ---> 23:00 - 00:00, but there is a small problem when writing it, that is, this component is floated to the left, and it needs to scroll with the scrolling of the items on the right. In fact, I wrote it in a box at the beginning, and the scroll container scrolls together, but I encountered a small problem. Because the items on the right will become too wide, a horizontal scroll bar will appear. If the entire container is scrolled horizontally, the time scale on the left will be scrolled out of the visible area.

So after absolute positioning, listen to the scroll event of the schedule item on the right, dynamically change the top value of the style on the left, and assign the value in the opposite direction. Since it is scrolling down, the time scale on the left needs to scroll up, so the top value is inverted to achieve the synchronization effect; what a clever little ghost, hehe; this code will not take up space, everyone is free to play, if there is a better way, welcome to leave a message in the comment area.

ScheduleItem schedule container entry

First look at the code of this component:

const ScheduleItem: React.FC<ScheduleItemType> = ({
  timestampRange,
  dataItem,
  scheduleRender,
  width,
  dataItemLength,
}) => {
  // Calculate container height const calcHeight: (timestampList: [number, number]) => number = (timestampList) =>
    timestampList.length > 1 ? (timestampList[1] - timestampList[0]) / 1000 / 60 / 2 : 30;
  const calcTop: (startTime: number) => number = (startTime) => moment(startTime).minute() / 2;
  // Calculate ScheduleItem width const calcWidth: (w: number, d: number) => string = (w, d) =>
    width === 0 || dataItemLength * width < 347 ? '100%' : `${d * w}px`;

  return (
    <div style={{ position: 'relative' }} className={style.Calendar_ScheduleItem_Fath}>
      <div
        className={style.Calendar_ScheduleItem}
        style={{ width: calcWidth(width, dataItemLength) }}
      >
        {dataItem.map((data, index) => {
          return (
            <Fragment key={index}>
              {data.startTime >= timestampRange[0] && data.startTime < timestampRange[1] && (
                <div
                  className={`${style.Calendar_ScheduleItem_container} Calendar_ScheduleItem_container`}
                  style={{
                    height: `${calcHeight([data.startTime, data.endTime]) || 30}px`,
                    top: calcTop(data.startTime),
                  }}
                >
                  {scheduleRender({ data, timestampRange })}
                </div>
              )}
            </Fragment>
          );
        })}
      </div>
    </div>
  );
};

Why do we need to have a separate component for this part (the gray part below)? Let's think about it first...

Okay, I won't keep you in suspense. Actually, it is to locate the user's schedule data, for example, today's 10:00-11:00, where to locate.

Remember this API?

scheduleRender?: ({
    data: dataType,
    timestampRange: [DOMTimeStamp, DOMTimeStamp],
  }) => JSX.Element; 

This component has a parameter [DOMTimeStamp, DOMTimeStamp] (DOMTimeStamp means timestamp). These two timestamps are actually the start and end timestamps of the current period 10:00-11:00. Since the startTime and endTime we accept are also timestamps, we can control display and hiding by comparing whether the size is within this range. Now you understand why timestamps are used. Just compare the size of the numbers directly;

Let's talk about the style of this thing:

Actually, I set this thing to 30px because there are 60 minutes in an hour. If it is 60px, it will be too high. So I set it to 30px for easy positioning. After all, I am lazy and don’t want too complicated calculations.

So the positioning calculation is just one line of code: const calcTop: (startTime: number) => number = (startTime) => moment(startTime).minute() / 2; The height positioning problem is solved! Haha~~

Next, there is another problem, which is the height problem, as shown in the figure:

Height calculation is not difficult. It is mainly calculated based on the interval range of the current start and end time (1px is two minutes). See the code for specific implementation:

const calcHeight: (timestampList: [number, number]) => number = (timestampList) =>
    timestampList.length > 1 ? (timestampList[1] - timestampList[0]) / 1000 / 60 / 2 : 30;

First, we will determine whether the timestamp we input has only one time. If it has only the start time but no end time, we will hard-code it to 30px. If it has the start and end time, we will convert it to minutes and calculate it dynamically.

Finally, there is another question: how is the business data passed in and how is it rendered to the component?

Let's first look at the JSON we passed into the data field:

[
  {
    startTime: 1626057075000, // start time endTime: 1626070875000, // end time value: 'any', // business data},
  {
    startTime: 1626057075000,
    endTime: 1626070875000,
    value: 'any',
  },
  {
    startTime: 1626057075000,
    endTime: 1626070875000,
    value: 'any',
  },
  {
    startTime: 1626057075000,
    endTime: 1626070875000,
    value: 'any',
  },
];

In fact, when we loop and render the ScheduleItem component, we use the hard-coded 24h list to loop. Then, when looping, we dynamically search the business data for the business data that matches the time range of the current loop and insert the data into the component. The general code is as follows:

for (let i = 0; i < HoursList.length; i++) {
      resule.push({
        timestampRange: [todayTime + i * 3600 * 1000, todayTime + (i + 1) * 3600 * 1000],
        dataItem: [ // Due to the current time period, the schedule may conflict, so a list must be passed into the component...data.filter((item) => {
            return (
              item.startTime >= todayTime + i * 3600 * 1000 &&
              item.startTime < todayTime + (i + 1) * 3600 * 1000
            );
          }),
        ],
      });
    }

Summarize

The above is the implementation of most of this component, from receiving requirements, to designing components, and finally to implementation details. It may not be comprehensive, but it is also a basic implementation idea.

The implementation details of the technical difficulties are also listed. In fact, it doesn't seem difficult, as long as you use your brain a little.

My implementation may not be perfect. There are thousands of ways to implement a program. I just expressed my design ideas and hope that you can learn from me. If there is anything wrong, please point it out in the comments section. Let's make progress together.

This is the end of this article about how to use React to build a schedule component. For more content related to React schedule components, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!