Skip to content

GitLab

Commit 30c95dda authored by CHAERIN KIM's avatar CHAERIN KIM
Browse files

스케줄 디비연결

parent 9cc867e8
Hide whitespace changes
Inline Side-by-side
server/client/src/Components/Schedule.js
View file @ 30c95dda
...@@ -3,10 +3,13 @@ import Calendar from '@toast-ui/react-calendar'; ...@@ -3,10 +3,13 @@ import Calendar from '@toast-ui/react-calendar';
import "tui-calendar/dist/tui-calendar.css"; import "tui-calendar/dist/tui-calendar.css";
import "tui-date-picker/dist/tui-date-picker.css"; import "tui-date-picker/dist/tui-date-picker.css";
import "tui-time-picker/dist/tui-time-picker.css"; import "tui-time-picker/dist/tui-time-picker.css";
import axios from 'axios';
function Cal(calledday) {
function Cal(props) {
const calendarRef = useRef(); const calendarRef = useRef();
const [day, setDay] = useState(calledday); const [reserve, setReserve] = useState([]);
// const [day, setDay] = useState(props.calledday);
const [day, setDay] = useState(props.day);
const [myTheme, setMyTheme] = useState({ const [myTheme, setMyTheme] = useState({
'common.dayname.color': '#333', 'common.dayname.color': '#333',
'common.today.color': '#333', 'common.today.color': '#333',
...@@ -15,6 +18,59 @@ function Cal(calledday) { ...@@ -15,6 +18,59 @@ function Cal(calledday) {
// Theme object to extends default dark theme. // Theme object to extends default dark theme.
}); });
const yj = [
{
id: 'a',
calendarId: 'Subject',
category: 'time',
start: '2020-10-27T11:00:00',
end: '2020-10-27T12:00:00',
},
{
id: 'b',
calendarId: 'Subject',
category: 'time',
start: '2020-10-28T10:00:00',
end: '2020-10-28T11:00:00',
},
{
id: '3',
calendarId: 'Subject',
category: 'time',
start: '2020-10-29T11:00:00',
end: '2020-10-29T15:00:00',
}
]
function getReserve(room) {
console.log("room", room)
// setReserve({
// id: room,
// calendarId: 'Subject',
// category: 'time',
// })
axios.get(`/reserves/room/${room}`, {
headers: { authorization: localStorage.getItem('token') },
})
.then(res => {
const reserves = res.data.map(item => ({
id: item._id,
start: item.start,
end: item.end,
calendarId: 'Subject',
category: 'time',
}))
console.log("room list", res.data);
setReserve(reserves);
// console.log("room list",res.data);
})
.catch(err => {
alert(err.error)
});
}
useEffect(() => { useEffect(() => {
// const cal = calendarRef.current.getInstance(); // const cal = calendarRef.current.getInstance();
// cal.setDate(new Date(day)); // cal.setDate(new Date(day));
...@@ -39,71 +95,91 @@ function Cal(calledday) { ...@@ -39,71 +95,91 @@ function Cal(calledday) {
// return (console.log(isFocused)) // return (console.log(isFocused))
// }); // });
// setReserve([
// {
// id: '3',
// calendarId: 'Subject',
// category: 'time',
// start: '2020-10-29T11:00:00',
// end: '2020-10-29T15:00:00',
// }
// ])
getReserve(props.room);
}, [day]) }, [day])
return ( return (
<Calendar <div>{
height="100%" console.log("reserve", reserve)}
calendars={[ <Calendar
{ height="100%"
id: 'Subject', calendars={[
bgColor: '#a9a9a9', {
borderColor: '#a9a9a9', id: 'Subject',
isReadOnly: 'true' bgColor: '#a9a9a9',
} borderColor: '#a9a9a9',
]} isReadOnly: 'true'
}
view="week" ]}
disableDblClick={false}
disableClick={true} view="week"
isReadOnly={false} disableDblClick={false}
// template={ disableClick={true}
// popupIsAllDay=function { isReadOnly={false}
// return display: "none" // template={
// } // popupIsAllDay=function {
// } // return display: "none"
schedules={[ // }
{ // }
id: '1', schedules={ reserve
calendarId: 'Subject', // reserve.map(item=>({id: item._id,
category: 'time', // start: item.start,
start: '2020-10-05T11:00:00', // end: item.end,
end: '2020-10-05T12:00:00', // calendarId: 'Subject',
}, // category: 'time',}))
{ // [
id: '2', // {
calendarId: 'Subject', // id: 'a',
category: 'time', // calendarId: 'Subject',
start: '2020-10-09T10:00:00', // category: 'time',
end: '2020-10-09T11:00:00', // start: '2020-10-27T11:00:00',
}, // end: '2020-10-27T12:00:00',
{ // },
id: '3', // {
calendarId: 'Subject', // id: 'b',
category: 'time', // calendarId: 'Subject',
start: '2020-10-08T11:00:00', // category: 'time',
end: '2020-10-08T15:00:00', // start: '2020-10-28T10:00:00',
// end: '2020-10-28T11:00:00',
// },
// {
// id: '3',
// calendarId: 'Subject',
// category: 'time',
// start: '2020-10-29T11:00:00',
// end: '2020-10-29T15:00:00',
// }
// ]
} }
]} scheduleView={['time']}
scheduleView={['time']} taskView={false}
taskView={false} theme={myTheme}
theme={myTheme} timezones={[
timezones={[ {
{ timezoneOffset: 540,
timezoneOffset: 540, displayLabel: 'GMT+09:00',
displayLabel: 'GMT+09:00', tooltip: 'Seoul'
tooltip: 'Seoul' },
}, ]}
]} useDetailPopup
useDetailPopup useCreationPopup
useCreationPopup view={"week"}
view={"week"} week={{
week={{ workweek: true,
workweek: true, hourStart: 8,
hourStart: 8, hourEnd: 23
hourEnd: 23 }}
}} />
/> </div>
) )
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment