Xem thêm

React Calendar vs. React Scheduler: Choosing the Right Component for Your App

Today, we're going to explore the differences between a React calendar and a React scheduler component. By understanding their unique features, you'll be able to choose the right component for your app. We'll also take...

Today, we're going to explore the differences between a React calendar and a React scheduler component. By understanding their unique features, you'll be able to choose the right component for your app. We'll also take a look at some real-world examples to see how these components can be implemented.

Calendars have been a part of our lives for many years, but with the rise of computers and smartphones, their functionality has expanded. Nowadays, calendars can be used to create a variety of applications. However, with different styles of calendar components available, it can be confusing to determine which one is the most appropriate solution for your app.

React Calendar or React Scheduler?

A React calendar component is a great choice when you need to allow users to select a specific date. For example, if your app has a form field for a date of birth or an employee start date, a calendar component would be the best bet. It's also useful for applications that involve booking appointments, where users can select a specific date and time slot from available options.

On the other hand, a React scheduler component is more suitable for viewing an agenda at a glance or scheduling events and tasks. It allows you to see multiple agendas simultaneously, like your work schedule and childcare plans. Additionally, a scheduler provides a richer overview of your tasks, allowing you to view your agendas by day, week, or month.

In summary, a calendar is ideal for a big-picture view, while a scheduler is better for detailed schedules and agendas.

Now let's dive into some real examples to see how these components can be used.

React Calendar: Selecting a Date of Birth

A React calendar component is commonly used when you need to allow users to select a specific date, such as a date of birth. Although a simple input can accomplish this task, a calendar component provides a better user experience. It works especially well on touch-screen devices, where users can simply click or touch a few times to select the desired date.

Here's an example of how you can implement a simple calendar component using the KendoReact Calendar:

import { Calendar } from "@progress/kendo-react-dateinputs";
import { useState } from "react";

const PickDateOfBirth = () => {
  const [date, setDate] = useState(null);

  return (
    
Date of birth:
setDate(e.value)} />
Selected date: {date?.toDateString()}
); }; export default PickDateOfBirth;

In this example, the PickDateOfBirth component uses the Calendar component from the @progress/kendo-react-dateinputs library. It utilizes the useState hook to store the selected date and updates it when the user makes a selection.

React Calendar: Booking a Driving Lesson

A React calendar component can also be combined with other functionality to create more complex features. For example, let's say you want to book a driving lesson with an instructor. In this case, you would need to select the day you want to drive and then choose from a list of available time slots.

Here's an example of how you can implement this functionality using the KendoReact Calendar:

import { Calendar } from "@progress/kendo-react-dateinputs";
import { useEffect, useRef, useState } from "react";

const times = [
  "08:00 - 10:00",
  "10:00 - 12:00",
  "12:00 - 14:00",
  "14:00 - 16:00",
  "16:00 - 18:00",
  "18:00 - 20:00",
];

const getRandomNumInRange = (min, max) => {
  return Math.floor(Math.random() * (max - min) + min);
};

const pickSlotTimes = (times) => {
  const timesToPick = getRandomNumInRange(0, times.length);

  if (timesToPick === times.length - 1) {
    return times;
  }

  let timesPicked = [];

  while (timesToPick !== timesPicked.length - 1) {
    const index = getRandomNumInRange(0, times.length);
    const selectedTime = times[index];

    if (timesPicked.includes(selectedTime)) continue;

    timesPicked.push(selectedTime);
  }

  return timesPicked.sort();
};

const BookDrivingSlot = () => {
  const [bookingDate, setBookingDate] = useState(null);
  const [selectedTimeSlot, setSelectedTimeSlot] = useState(null);
  const [bookingTimes, setBookingTimes] = useState([]);
  const timeSlotCacheRef = useRef(new Map());

  useEffect(() => {
    if (!bookingDate) return;

    let newBookingTimes = timeSlotCacheRef.current.get(
      bookingDate.toDateString()
    );

    if (!newBookingTimes) {
      newBookingTimes = pickSlotTimes(times);
      timeSlotCacheRef.current.set(bookingDate.toDateString(), newBookingTimes);
    }

    setBookingTimes(newBookingTimes);
  }, [bookingDate]);

  const onDateChange = (e) => {
    setSelectedTimeSlot(null);
    setBookingDate(e.value);
  };

  return (
    
Book a driving slot:
{bookingTimes.map((time) => ( ))}
{bookingDate && selectedTimeSlot && (
Selected slot: {bookingDate.toDateString()} at {selectedTimeSlot}
)}
); }; export default BookDrivingSlot;

In this example, the BookDrivingSlot component allows users to select a date for a driving lesson and choose from a list of available time slots. It utilizes the Calendar component from the @progress/kendo-react-dateinputs library and the useState and useEffect hooks to manage the state and handle changes.

React Scheduler: Meeting Room Scheduler

A React scheduler component, like the one offered by KendoReact, is perfect for scheduling events. Let's consider an example of a meeting room scheduler in a large office. With limited meeting rooms available, employees need to reserve a room ahead of time to avoid conflicts.

Here's an example of how you can implement a meeting room scheduler using the KendoReact Scheduler:

import { Scheduler, TimelineView, DayView, WeekView, MonthView, AgendaView } from "@progress/kendo-react-scheduler";
import { useState } from "react";
import { guid } from "@progress/kendo-react-common";

const meetingRooms = {
  name: "Meeting Room",
  data: [
    { text: "Blue room", value: 1, color: "blue" },
    { text: "Red room", value: 2, color: "red" },
    { text: "Green room", value: 3, color: "green" },
  ],
  field: "RoomID",
  valueField: "value",
  textField: "text",
  colorField: "color",
};

const compareById = (matchingItem) => (item) => matchingItem.id === item.id;

const RoomScheduler = () => {
  const [data, setData] = useState([]);

  const onDataChange = ({ created, updated, deleted }) => {
    const newItemsWithIds = created.map((item) => ({ ...item, id: guid() }));

    setData((dataState) =>
      dataState.reduce((acc, item) => {
        if (deleted.find(compareById(item))) return acc;

        acc.push(updated.find(compareById(item)) || item);
        return acc;
      }, newItemsWithIds)
    );
  };

  return (
    
Book a room:
); }; export default RoomScheduler;

In this example, the RoomScheduler component uses the Scheduler component from the @progress/kendo-react-scheduler library to create a meeting room scheduler. It offers five default views: timeline, day, week, month, and agenda. By utilizing the useState hook for managing the state and the guid function for generating unique IDs, you can implement a powerful scheduler component.

Wrap-up

In conclusion, React calendar and React scheduler components serve different purposes in your app. A calendar component is perfect for selecting specific dates, while a scheduler component is ideal for scheduling and managing events. By understanding the differences and considering the specific requirements of your app, you'll be able to choose the right component.

When implementing calendar and scheduler components, I recommend using third-party libraries like KendoReact. These libraries provide feature-rich components that are well-tested and save you time and effort. Additionally, they offer support for time zones, localization, and internationalization, making them a valuable tool for creating remarkable apps.

So, whether you need to allow users to select a specific date or schedule events, React has the right component for you. Make the most of these components to enhance the functionality of your app and provide an exceptional user experience.

1