Default Component - Copy this React, Tailwind Component to your project

Calendar Management App Function Planning I. Page Layout Navigation Bar: The left side of the page is the Calendar navigation bar, which displays a list of all created Calendars, enabling users to quickly switch between different calendars. Content Display Area: The right side of the page is the main content display area. When users click on a specific Calendar in the left navigation bar, the detailed information of that Calendar will be shown in this area. II. Calendar View Display Day View: Presents calendar information on a daily basis. Users can view the detailed information of all shifts on that day, including the start time and end time of each shift. At the same time, it shows the staff information set in each shift and marks whether the staff is valid or not. If the staff is invalid, it clearly displays the information of the replaced staff. Week View: Displays the calendar information for a week. Shifts are shown in chronological order for each day. It also shows the shift time and related staff information, as well as the validity and replacement status of the staff. Due to limited space, users can view the complete detailed information by hovering the mouse or clicking on specific areas. Month View: Presents the calendar on a monthly basis, showing the general distribution of shifts for each day of the month. Clicking on a specific date allows users to view the detailed content of the shift and staff on that day, including shift time, staff status, etc. III. Shift Operation Functions Creation: Within the calendar area, users can create a shift by dragging the mouse. Click and hold the left mouse button to select the starting position on the calendar's timeline, then drag the mouse to determine the time span of the shift. Release the mouse to complete the preliminary creation, and then further set the detailed information of the shift. Editing: When users click on a specific shift, an editing window will pop up. They can modify the information of the shift, such as adjusting the start time, end date, and other basic time information. At the same time, they can also edit the staff in the shift, such as adding, deleting, or replacing staff members, and modifying the staff's work tasks. Deletion: For shifts that are no longer needed, users can click on the shift and select the delete option to remove the shift from the calendar. The related staff information will also be deleted accordingly. IV. Information Display Shift Basic Information: Regardless of which view is used, when a shift is selected, its basic information, including start time, end time, and the date it belongs to, is clearly displayed. Staff Information: Displays the detailed information of the staff in each shift, including the name, position, and other general information. At the same time, it clearly marks whether the staff is valid or not. When the staff is invalid, it shows the relevant information of the replaced staff, such as the name, the reason for replacement, etc., facilitating users to have a comprehensive understanding of the staffing arrangement.