Let's start by creating the Calendar component. First, we must create a folder containing all our components. We can name it "components." Our Calendar component should include other components, such as different calendar views and actions.

We can decompose the creation of all these components and their logic into the following steps:

Create the Header component with input for filtering by the user's name.

import { setSearchUserValue } from '@/features/calendarSlice'; 
import { useAppDispatch, useAppSelector } from '@/hooks'; 
import classes from './Header.module.css'; 

const Header = () => { 
  const { searchUserValue } = useAppSelector((state) => state.calendar.calendarFilters); 
  const dispatch = useAppDispatch(); 
  const handleChangeSearchUserValue = (event: React.ChangeEvent<HTMLInputElement>) => { 
    dispatch(setSearchUserValue(event.target.value)); 
  }; 
  return ( 
    <div className={classes.container}> 
      <input type="text" value={searchUserValue} placeholder="Search by user" onChange={handleChangeSearchUserValue} /> 
    </div> 
  ); 
}; 

export default Header;

Create the useCalendar custom hook to handle calendar actions and work with data.

import { useState, useEffect, useCallback, useMemo } from 'react'; 
import { setCalendarLoading } from '@/features/calendarSlice'; 
import { DisplayMode } from '@/models'; 
import { getWeek, getMonth, getYear, getDayOfYear } from '@/utils/dates'; 
import { useAppSelector, useAppDispatch } from '@/hooks'; 
import SystemAPI, { AppointmentModel, UserModel } from '@/services/SystemAPI'; 

interface RequestsState { 
  users: boolean; 
  appointments: boolean; 
} 
function useCalendar() { 
  const [calendarDateTime, setCalendarDateTime] = useState(new Date().getTime()); 
  const [displayMode, setDisplayMode] = useState<DisplayMode>('Week'); 
  const [users, setUsers] = useState<UserModel[]>([]); 
  const [appointments, setAppointments] = useState<AppointmentModel[]>([]); 
  const [requestsState, setRequestsState] = useState<RequestsState>({ users: false, appointments: false }); 
  const { searchUserValue } = useAppSelector((state) => state.calendar.calendarFilters); 
  const dispatch = useAppDispatch(); 
  const fetchUsers = async () => { 
    setRequestsState((rs) => ({ ...rs, users: true })); 
    try { 
      const res = await SystemAPI.users.getAll(); 
      if (res.Success) { 
        setUsers(res.users); 
      } else { 
        throw new Error(res.ErrorMessage); 
      } 
    } catch (err) { 
      console.error(err); 
    } 
    setRequestsState((rs) => ({ ...rs, users: false })); 
  }; 
  const fetchAppointments = async () => { 
    setRequestsState((rs) => ({ ...rs, appointments: true })); 
    try { 
      const res = await SystemAPI.appointments.getAllOnDate({ 
        year: getYear(calendarDateTime), 
        month: displayMode === 'Month' ? getMonth(calendarDateTime) + 1 : null, 
        week: 
          displayMode === 'Week' 
            ? getWeek(calendarDateTime, { 
                weekStartsOn: 1, 
                firstWeekContainsDate: 4, 
              }) 
            : null, 
        day: displayMode === 'Day' ? getDayOfYear(calendarDateTime) : null, 
      }); 
      if (res.Success) { 
        return setAppointments(res.appointments); 
      } else { 
        throw new Error(res.ErrorMessage); 
      } 
    } catch (err) { 
      console.error(err); 
    } 
    setRequestsState((rs) => ({ ...rs, appointments: false })); 
  }; 
  const changeCalendarDate = useCallback((dateTime: number) => { 
    setCalendarDateTime(dateTime); 
  }, []); 
  const changeDisplayMode = useCallback((displayMode: DisplayMode) => { 
    setDisplayMode(displayMode); 
  }, []); 
  const filteredUsers = useMemo(() => { 
    return users.filter((user) => { 
      const searchValue = searchUserValue.toLowerCase(); 
      const userName = user.fullName.toLowerCase(); 
      return searchValue.includes(userName); 
    }); 
  }, [users, searchUserValue]); 
  useEffect(() => { 
    fetchUsers(); 
  }, []); 
  useEffect(() => { 
    fetchAppointments(); 
  }, [displayMode, calendarDateTime]); 
  useEffect(() => { 
    if (requestsState.users || requestsState.appointments) { 
      dispatch(setCalendarLoading(true)); 
    } else { 
      dispatch(setCalendarLoading(false)); 
    } 
  }, [requestsState, dispatch]); 
  return { 
    users: filteredUsers, 
    appointments, 
    displayMode, 
    calendarDateTime, 
    changeCalendarDate, 
    changeDisplayMode, 
  }; 
} 

export default useCalendar;

Create the ActionsBar component, containing the DatePicker from the react-datepicker library and buttons for changing the display mode.

import clsx from 'clsx'; 
import { DisplayMode } from '@/models'; 
import classes from './ActionsBar.module.css'; 

interface ActionsBarProps { 
  displayMode: DisplayMode; 
  calendarDateTime: number; 
  onChangeDisplayMode: (displayMode: DisplayMode) => void; 
  onChangeCalendarDate: (dateTime: number) => void; 
} 

const ActionsBar: React.FC<ActionsBarProps> = ({ 
  displayMode, 
  calendarDateTime, 
  onChangeDisplayMode, 
  onChangeCalendarDate, 
}) => { 
  return ( 
    <div> 
      <div className={classes.datePickerContainer}> 
        <DatePicker 
          date={calendarDateTime} 
          onChange={onChangeCalendarDate} 
          options={{ type: 'control', mode: displayMode }} 
        /> 
      </div> 
      <div className={classes.displayModeActionsContainer}> 
        <button 
          className={clsx({ [classes.isSelected]: displayMode === 'Day' })} 
          onChange={() => onChangeDisplayMode('Day')} 
        > 
          Day 
        </button> 
        <button 
          className={clsx({ [classes.isSelected]: displayMode === 'Week' })} 
          onChange={() => onChangeDisplayMode('Week')} 
        > 
          Week 
        </button> 
        <button 
          className={clsx({ [classes.isSelected]: displayMode === 'Month' })} 
          onChange={() => onChangeDisplayMode('Month')} 
        > 
          Month 
        </button> 
      </div> 
    </div> 
  ); 
}; 

export default ActionsBar;

Create the WeekView component to display calendar rows in week display mode.

import clsx from 'clsx'; 
import { format, eachDayOfInterval, isWeekend, startOfWeek, endOfWeek } from '@/utils/dates'; 
import { AppointmentModel, UserModel } from '@/services'; 
import WeekRow from './WeekRow'; 
import classes from './WeekView.module.css'; 

function getScheduleBlocks(date: Date | number) { 
  const startDay = startOfWeek(date, { weekStartsOn: 1 }); 
  const endDay = endOfWeek(date, { weekStartsOn: 1 }); 

  return eachDayOfInterval({ start: startDay, end: endDay }).map((dayDate) => ({ 
    date: dayDate, 
    isWeekend: isWeekend(dayDate), 
  })); 
} 

interface WeekViewProps { 
  users: UserModel[]; 
  appointments: AppointmentModel[]; 
  date: Date | number; 
} 

const WeekView: React.FC<WeekViewProps> = ({ users, appointments, date }) => { 
  const dayBlocks = getScheduleBlocks(date); 

  return ( 
    <div className={classes.container}> 
      <div className={classes.scheduleHeader}> 
        <div className={classes.scheduleRow}> 
          <div className={clsx(classes.scheduleBlock, classes.auditorScheduleBlock)} data-is-auditor-block> 
            <span className={classes.scheduleBlockTitle}>User</span> 
          </div> 

          {dayBlocks.map((dayDate) => { 
            return ( 
              <div 
                key={dayDate.date.getTime()} 
                className={clsx(classes.scheduleBlock, { 
                  [classes.weekendScheduleBlock]: dayDate.isWeekend, 
                })} 
              > 
                <span className={classes.scheduleBlockTitle}> 
                  {format(dayDate.date, !dayDate.isWeekend ? 'iiii' : 'iii')} 
                </span> 

                <span className={classes.scheduleBlockDescription}>{format(dayDate.date, 'MM/d')}</span> 
              </div> 
            ); 
          })} 
        </div> 
      </div> 

      <div> 
        {users.map((user) => { 
          const userAppointments = appointments.filter((appointment) => 
            appointment.systemUsersIds.includes(user.systemUserId) 
          ); 

          return <WeekRow user={user} userAppointments={userAppointments} date={date} />; 
        })} 
      </div> 
    </div> 
  ); 
}; 

export default WeekView;

Create the WeekRow component to display a single row.

import clsx from 'clsx'; 
import { eachDayOfInterval, isWeekend, startOfWeek, endOfWeek } from '@/utils/dates'; 
import { AppointmentModel, UserModel } from '@/services'; 
import classes from './WeekRow.module.css'; 

function getWeekDays(date: Date | number) { 
  const startDay = startOfWeek(date, { weekStartsOn: 1 }); 
  const endDay = endOfWeek(date, { weekStartsOn: 1 }); 

  return eachDayOfInterval({ start: startDay, end: endDay }).map((dayDate) => ({ 
    date: dayDate, 
    isWeekend: isWeekend(dayDate), 
  })); 
} 

interface WeekRowProps { 
  user: UserModel; 
  userAppointments: AppointmentModel[]; 
  date: Date | number; 
} 

const WeekRow: React.FC<WeekRowProps> = ({ user, userAppointments, date }) => { 
  const weekDays = getWeekDays(date); 

  return ( 
    <div className={classes.scheduleRow}> 
      <div className={clsx(classes.scheduleBlock, classes.auditorScheduleBlock)}> 
        <span className={classes.scheduleBlockTitle}>{user.fullName}</span> 
      </div> 

      {weekDays.map((dayDate, dayIdx) => { 
        return ( 
          <div 
            key={`${user.systemUserId}-${dayIdx}`} 
            className={clsx(classes.scheduleBlock, classes.appointmentBlock, { 
              [classes.weekendScheduleBlock]: dayDate.isWeekend, 
            })} 
          > 
            {/* You can pass userAppointments here but you need additional logic for displaying them correctly */} 
          </div> 
        ); 
      })} 
    </div> 
  ); 
}; 

export default WeekRow;

Put everything together in the Calendar component.

import { DayView, WeekView, MonthView } from './Views'; 
import useCalendar from './useCalendar'; 
import ActionsBar from './ActionsBar'; 
import classes from './Calendar.module.css'; 

const Calendar = () => { 
  const { users, appointments, displayMode, calendarDateTime, changeCalendarDate, changeDisplayMode } = useCalendar(); 

  return ( 
    <div className={classes.calendarContainer}> 
      <ActionsBar 
        displayMode={displayMode} 
        calendarDateTime={calendarDateTime} 
        onChangeCalendarDate={changeCalendarDate} 
        onChangeDisplayMode={changeDisplayMode} 
      /> 

      {displayMode === 'Day' ? ( 
        <DayView users={users} appointments={appointments} date={calendarDateTime} /> 
      ) : displayMode === 'Week' ? ( 
        <WeekView users={users} appointments={appointments} date={calendarDateTime} /> 
      ) : ( 
        <MonthView users={users} appointments={appointments} date={calendarDateTime} />
      )} 
    </div> 
  ); 
}; 

export default Calendar;

Add the created components to "App.tsx".

import Header from '@/components/Header'; 
import Calendar from '@/components/Calendar'; 
import classes from './App.module.css'; 
import { useAppSelector } from './hooks'; 

function App() { 
  const isCalendarLoading = useAppSelector((state) => state.calendar.loading.calendar); 

  if (isCalendarLoading) { 
    return <div>Loading...</div>; 
  } 

  return ( 
    <div className={classes.container}> 
      <Header /> 

      <Calendar /> 
    </div> 
  ); 
} 

export default App;

After completing all these steps, the "components" folder will look like this:

Using react to create complex aplicated UI in Power Apps - components folder