-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
127 additions
and
59 deletions.
There are no files selected for viewing
28 changes: 28 additions & 0 deletions
28
frontend/src/components/pages/schedule/ScheduleCalendar.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,36 @@ | ||
| .fc .fc-toolbar-title { | ||
| font-size: 2em; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .fc-timegrid-slot | ||
|
|
||
| .fc-timegrid-slot-lane | ||
|
|
||
| .fc-timegrid-slot-minor { | ||
| display: none; | ||
| color: transparent; | ||
| } | ||
|
|
||
| .fc-scrollgrid-liquid { | ||
| border-left: none!important; | ||
| } | ||
|
|
||
| .fc-timegrid-slot-label { | ||
| border: none!important; | ||
| padding-right: 5px!important; | ||
| } | ||
|
|
||
| col { | ||
| width: 100px!important; | ||
| } | ||
|
|
||
| :root { | ||
| --fc-today-bg-color: rgba(87,70,157,0.10); | ||
| --fc-button-bg-color: rgb(87, 70, 157); | ||
| --fc-button-border-color: rgb(87, 70, 157); | ||
| --fc-button-hover-bg-color: rgb(71, 53, 147); | ||
| --fc-button-hover-border-color: rgb(71, 53, 147); | ||
| --fc-button-active-bg-color: rgb(62, 42, 153); | ||
| --fc-button-active-border-color: rgb(62, 42, 153); | ||
| } |
109 changes: 65 additions & 44 deletions
109
frontend/src/components/pages/schedule/ScheduleCalendar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,75 +1,96 @@ | ||
| import FullCalendar from '@fullcalendar/react' | ||
| import timeGridPlugin from '@fullcalendar/timegrid'; | ||
| import { DayHeaderContentArg, EventContentArg } from '@fullcalendar/core'; | ||
| import FullCalendar from "@fullcalendar/react"; | ||
| import timeGridPlugin from "@fullcalendar/timegrid"; | ||
| import { DayHeaderContentArg, EventContentArg } from "@fullcalendar/core"; | ||
| import React, { useEffect, useRef } from "react"; | ||
| import ModeCommentOutlinedIcon from "@mui/icons-material/ModeCommentOutlined"; | ||
| import "./ScheduleCalendar.css"; | ||
|
|
||
| const events = [ | ||
| { title: 'test', start: new Date('2024-09-29T09:00:00'), end: new Date('2024-09-29T10:00:00' ), allDay: true }, | ||
| ] | ||
| { | ||
| title: "test", | ||
| start: new Date("2024-09-29T09:00:00"), | ||
| end: new Date("2024-09-29T10:00:00"), | ||
| allDay: true, | ||
| }, | ||
| ]; | ||
|
|
||
| function renderEventContent(eventInfo: EventContentArg) { | ||
| const isAllDay = eventInfo.event.allDay; | ||
| return ( | ||
| <div style={{ | ||
| display: 'flex', | ||
| flexDirection: isAllDay ? 'row' : 'column', | ||
| padding: '5px', | ||
| borderRadius: '5px', | ||
| border: '0px', | ||
| borderLeft: '5px solid #255B9A', | ||
| backgroundColor: '#C5DCF8', | ||
| color: '#255B9A', | ||
| justifyContent: isAllDay ? 'space-between' : 'flex-start', | ||
| }}> | ||
| <div><b>{eventInfo.event.title}</b></div> | ||
| {isAllDay ? '' : `${new Date(eventInfo.event.start!).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - ${new Date(eventInfo.event.end!).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`} | ||
| <ModeCommentOutlinedIcon fontSize="inherit" style={{marginTop: '3px'}} /> | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| flexDirection: isAllDay ? "row" : "column", | ||
| padding: "5px", | ||
| borderRadius: "5px", | ||
| border: "0px", | ||
| borderLeft: "5px solid #255B9A", | ||
| backgroundColor: "#C5DCF8", | ||
| color: "#255B9A", | ||
| justifyContent: isAllDay ? "space-between" : "flex-start", | ||
| }} | ||
| > | ||
| <div> | ||
| <b>{eventInfo.event.title}</b> | ||
| </div> | ||
| {isAllDay | ||
| ? "" | ||
| : `${new Date(eventInfo.event.start!).toLocaleTimeString([], { | ||
| hour: "2-digit", | ||
| minute: "2-digit", | ||
| })} - ${new Date(eventInfo.event.end!).toLocaleTimeString([], { | ||
| hour: "2-digit", | ||
| minute: "2-digit", | ||
| })}`} | ||
| <ModeCommentOutlinedIcon | ||
| fontSize="inherit" | ||
| style={{ marginTop: "3px" }} | ||
| /> | ||
| </div> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| function renderHeaderContent(date: DayHeaderContentArg) { | ||
| const dayOfWeek = date.date.toLocaleString('en-US', { weekday: 'long' }); | ||
| const dayOfWeek = date.date.toLocaleString("en-US", { weekday: "long" }); | ||
| const dayOfMonth = date.date.getDate(); | ||
|
|
||
| return ( | ||
| <div style={{ textAlign: 'center'}}> | ||
| <div style={{ textAlign: "center" }}> | ||
| {dayOfWeek.substring(0, 3).toUpperCase()} | ||
| <br /> | ||
| {dayOfMonth} | ||
| </div> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| export function ScheduleCalendar() { | ||
| export function ScheduleCalendar() { | ||
| const calendarRef = useRef<any>(null); | ||
| const handleAllDayContent = (arg: any) => { | ||
| return <span>{arg.text ? '' : ''}</span>; | ||
| return <span>{arg.text ? "" : ""}</span>; | ||
| }; | ||
| return ( | ||
| <div> | ||
| <FullCalendar | ||
| plugins={[timeGridPlugin]} | ||
| initialView='timeGridWeek' | ||
| weekends | ||
| events={events} | ||
| slotMinTime="08:00:00" | ||
| slotMaxTime="19:00:00" | ||
| slotDuration={{ minute: 20 }} | ||
| slotLabelInterval={{ hours: 1 }} | ||
| eventContent={renderEventContent} | ||
| dayHeaderContent={renderHeaderContent} | ||
| eventDisplay="block" | ||
| firstDay={1} // Set the first day of the week to Monday | ||
| slotLabelFormat={{ hour: 'numeric', minute: '2-digit', hour12: true }} // Format slots as H:MM am/pm | ||
| allDayContent={handleAllDayContent} | ||
| eventBackgroundColor='transparent' | ||
| eventBorderColor='transparent' | ||
| slotEventOverlap={false} | ||
| plugins={[timeGridPlugin]} | ||
| initialView="timeGridWeek" | ||
| weekends | ||
| events={events} | ||
| slotMinTime="08:00:00" | ||
| slotMaxTime="19:00:00" | ||
| slotDuration={{ minute: 20 }} | ||
| slotLabelInterval={{ hours: 1 }} | ||
| eventContent={renderEventContent} | ||
| dayHeaderContent={renderHeaderContent} | ||
| eventDisplay="block" | ||
| firstDay={1} // Set the first day of the week to Monday | ||
| slotLabelFormat={{ hour: "numeric", minute: "2-digit", hour12: true }} // Format slots as H:MM am/pm | ||
| allDayContent={handleAllDayContent} | ||
| eventBackgroundColor="transparent" | ||
| eventBorderColor="transparent" | ||
| slotEventOverlap={false} | ||
| /> | ||
| </div> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| export default ScheduleCalendar; | ||
| export default ScheduleCalendar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters