화면구성(javascript, html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 | <!--head에 연결해 주세요 --> <!-- fullcalendar CDN --> <!-- fullcalendar CDN --> <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.css' rel='stylesheet' /> <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.min.js'></script> <!-- fullcalendar 언어 CDN --> <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/locales-all.min.js'></script> <!-- body에 넣어주세요 --> <div id='calendar-container'> <div id='calendar'> </div> </div> <!-- script에 넣어주세요 --> <script> 'use strict'; /* full calender */ (function(){ $(function(){ // calendar element 취득 var calendarEl = $('#calendar')[0]; // full-calendar 생성하기 var calendar = new FullCalendar.Calendar(calendarEl, { height: '700px', // calendar 높이 설정 expandRows: true, // 화면에 맞게 높이 재설정 slotMinTime: '05:00', // Day 캘린더에서 시작 시간 slotMaxTime: '24:00', // Day 캘린더에서 종료 시간 // 해더에 표시할 툴바 headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek' }, initialView: 'dayGridMonth', // 초기 로드 될때 보이는 캘린더 화면(기본 설정: 달) // 초기 날짜 설정 (설정하지 않으면 오늘 날짜가 보인다.) navLinks: true, // 날짜를 선택하면 Day 캘린더나 Week 캘린더로 링크 editable: true, // 수정 가능? selectable: true, // 달력 일자 드래그 설정가능 nowIndicator: true, // 현재 시간 마크 dayMaxEvents: true, // 이벤트가 오버되면 높이 제한 (+ 몇 개식으로 표현) locale: 'ko', // 한국어 설정 eventAdd: function(obj) { // 이벤트가 추가되면 발생하는 이벤트 console.log(obj); }, eventChange: function(info) { // 이벤트가 수정되면 발생하는 이벤트 var idx = info.event.extendedProps.idx; var title = info.event.title; var start = info.event.start; var end = info.event.end; var allDay = info.event.allDay; // 서버로 수정된 일정 정보를 전송 $.ajax({ type: "POST", url: "${ctp}/calendar/calendarUpdate", // 서버 측 스크립트의 URL data: { idx : idx, title: title, start: start, end: end, allDay: allDay }, success: function(res) { if (res != "0") { alert("일정이 수정되었습니다."); location.reload(); } else { alert("일정 수정 실패"); } }, error: function() { alert("연결오류~"); } }); console.log("수정"); }, eventRemove: function(obj){ // 이벤트가 삭제되면 발생하는 이벤트 console.log(obj); }, select: function(arg) { // 캘린더에서 드래그로 이벤트를 생성할 수 있다. var title = [안내]태그제한으로등록되지않습니다('일정을 입력하세요:'); if (title) { calendar.addEvent({ title: title, start: arg.start, end: arg.end, allDay: arg.allDay }); $.ajax({ type: "POST", url: "${ctp}/calendar/calendarInput", // 서버 측 스크립트의 URL data: { title: title, start: arg.start.toISOString(), end: arg.end.toISOString(), allDay: arg.allDay }, success: function(res) { if (res != "0" ){ alert("일정이 저장되었습니다"); location.reload(); } else { alert("일정 저장 실패"); } }, error: function() { alert("연결오류~"); } }); } calendar.unselect(); }, // 이벤트 events: function(fetchInfo, successCallback, failureCallback) { $.ajax({ url: "${ctp}/calendar/calendarListAll", type: "POST", dataType: "json", success: function(data) { data.forEach(function(vo) { calendar.addEvent({ idx: vo.idx, // 이벤트의 고유 ID title: vo.title, start: vo.startTime, end: vo.endTime, allDay: vo.allDay }); }); successCallback([]); }, error: function() { failureCallback("연결 오류~"); } }); }, eventClick: function(info) { if (confirm('정말로 이 일정을 삭제하시겠습니까?')) { info.event.remove(); // 이벤트 삭제 // 이벤트 속성 값 가져오기 var title = info.event.title; // 한국 표준시(KST)로 변환 var options = { timeZone: 'Asia/Seoul', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' }; var start = new Date(info.event.start).toLocaleString('ko-KR', options).replace(/\. /g, '-').replace('.', ''); var end = info.event.end ? new Date(info.event.end).toLocaleString('ko-KR', options).replace(/\. /g, '-').replace('.', '') : null; var allDay = info.event.allDay; $.ajax({ type: "POST", url: "${ctp}/calendar/calendarDelete", // 서버 측 스크립트의 URL data: { title: title, start: start, end: end, allDay: allDay }, success: function(res) { if (res != "0" ){ alert("일정이 삭제되었습니다."); location.reload(); } else { alert("일정 삭제 실패"); } }, error: function() { alert("연결오류~"); } }); } } }); // 캘린더 랜더링 calendar.render(); }); })(); </script> | cs |
DB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | show tables; CREATE TABLE calendar ( idx INT NOT NULL AUTO_INCREMENT PRIMARY KEY, -- 일정 고유번호 title VARCHAR(255) NOT NULL, -- 일정 내용 startTime DATETIME NOT NULL, -- 일정 시작 시간 endTime DATETIME, -- 일정 종료 시간 allDay BOOLEAN NOT NULL DEFAULT FALSE -- 종일 일정 여부 (TRUE: 종일, FALSE: 시간 지정) ); drop table calendar; desc calendar insert into calendar values(default, '일정시작', '2024-06-01', '2024-06-02', false); select * from calendar; | cs |
VO
1 2 3 4 5 6 7 8 9 10 11 12 | import lombok.Data; @Data public class CalendarVO { private int idx; private String title; private String startTime; private String endTime; private boolean allDay; } | cs |
Controller
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 | package com.spring.javaclassS.controller; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Calendar; import java.util.Date; import java.util.Locale; import java.util.TimeZone; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import com.spring.javaclassS.service.CalendarService; import com.spring.javaclassS.vo.CalendarVO; @Controller @RequestMapping("/calendar") public class CalendarController { @Autowired CalendarService calendarService; @ResponseBody @RequestMapping(value = "/calendarListAll", method = RequestMethod.POST) public ArrayList<CalendarVO> calendarListAllPost() { return calendarService.calendarListAll(); } @ResponseBody @RequestMapping(value = "/calendarDelete", method = RequestMethod.POST) public String calendarDeletePost( @RequestParam(name="title", defaultValue = "", required = false) String title, @RequestParam(name="start", defaultValue = "", required = false) String startTime, @RequestParam(name="end", defaultValue = "", required = false) String endTime, @RequestParam(name="allDay", defaultValue = "false" , required = false) Boolean allDay ) throws ParseException { // 날짜 형식을 한국어 패턴으로 변경 SimpleDateFormat inputFormat = new SimpleDateFormat("yyyy-MM-dd-a hh:mm:ss", Locale.KOREAN); SimpleDateFormat outputFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Date startDate = inputFormat.parse(startTime); Date endDate = inputFormat.parse(endTime); // UTC 시간대로 변환 (필요시) inputFormat.setTimeZone(TimeZone.getTimeZone("UTC")); // 파싱된 날짜를 출력 형식으로 변환 String formattedStartTime = outputFormat.format(startDate); String formattedEndTime = outputFormat.format(endDate); int res = 0; startTime = startTime.replace("-오전", ""); startTime = startTime.replace("-오후", ""); endTime = endTime.replace("-오전", ""); endTime = endTime.replace("-오후", ""); if(allDay == true) { System.out.println("들어옴1"); String startTimeChange = startTime.substring(10,19); startTime = startTime.replace(startTimeChange, " 00:00:00"); res = calendarService.calendarDeleteTrue(title,formattedStartTime); } else { System.out.println("들어옴2"); System.out.println(title+","+formattedStartTime+","+formattedEndTime+","+allDay); res = calendarService.calendarDelete(title,formattedStartTime,formattedEndTime, allDay); } return res+""; } @ResponseBody @RequestMapping(value = "/calendarInput", method = RequestMethod.POST) public String calendarInputPost( CalendarVO vo, @RequestParam(name="title", defaultValue = "", required = false) String title, @RequestParam(name="start", defaultValue = "", required = false) String startTime, @RequestParam(name="end", defaultValue = "", required = false) String endTime, @RequestParam(name="allDay", defaultValue = "false" , required = false) Boolean allDay) { int res = 0; SimpleDateFormat inputFormat = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss", Locale.ENGLISH); inputFormat.setTimeZone(TimeZone.getTimeZone("UTC")); // 입력된 날짜는 UTC 시간대로 설정 SimpleDateFormat outputFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); try { Date startDate = inputFormat.parse(startTime); Date endDate = inputFormat.parse(endTime); String formattedStartTime = outputFormat.format(startDate); String formattedEndTime = outputFormat.format(endDate); vo.setAllDay(allDay); vo.setStartTime(formattedStartTime); vo.setEndTime(formattedEndTime); vo.setTitle(title); res = calendarService.calendarInput(vo); } catch (ParseException e) { e.printStackTrace(); } return String.valueOf(res); } @ResponseBody @RequestMapping(value = "/calendarUpdate", method = RequestMethod.POST) public String calendarUpdatePost( @RequestParam(name="idx", defaultValue = "", required = false) int idx, @RequestParam(name="title", defaultValue = "", required = false) String title, @RequestParam(name="start", defaultValue = "", required = false) String startTime, @RequestParam(name="end", defaultValue = "", required = false) String endTime, @RequestParam(name="allDay", defaultValue = "false" , required = false) Boolean allDay ) throws ParseException { int res = 0; SimpleDateFormat inputFormat = new SimpleDateFormat("EEE MMM dd yyyy HH:mm:ss 'GMT'Z", Locale.ENGLISH); SimpleDateFormat outputFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Date startDate = null; Date endDate = null; CalendarVO vo = new CalendarVO(); startDate = inputFormat.parse(startTime); String formattedStartTime = outputFormat.format(startDate); if(allDay == true && endTime != null) { endDate = inputFormat.parse(startTime); Calendar calendar = Calendar.getInstance(); calendar.setTime(endDate); calendar.add(Calendar.HOUR_OF_DAY, 24); endDate = calendar.getTime(); String formattedEndTime = outputFormat.format(endDate); vo.setEndTime(formattedEndTime); } else if(allDay == false && endTime == "") { // startTime 파싱하여 endDate에 저장 System.out.println(startTime+" "+ endTime); endDate = inputFormat.parse(startTime); // endDate에 1시간을 더함 Calendar calendar = Calendar.getInstance(); calendar.setTime(endDate); calendar.add(Calendar.HOUR_OF_DAY, 1); endDate = calendar.getTime(); // 포맷팅하여 formattedEndTime에 저장 String formattedEndTime = outputFormat.format(endDate); // vo에 endTime 설정 vo.setEndTime(formattedEndTime); } else { endDate = inputFormat.parse(endTime); String formattedEndTime = outputFormat.format(endDate); System.out.println(startTime+" "+ formattedEndTime); vo.setEndTime(formattedEndTime); } vo.setTitle(title); vo.setStartTime(formattedStartTime); vo.setAllDay(allDay); vo.setIdx(idx); // 여기서 데이터베이스 업데이트 로직을 수행 res = calendarService.calendarUpdate(vo); // 예시: 일정 업데이트 성공 여부에 따라 응답 return res+""; } } | cs |
mapper
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "https://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.spring.javaclassS.dao.CalendarDAO" > <select id="calendarListAll" resultType="com.spring.javaclassS.vo.CalendarVO"> select * from calendar; </select> <insert id="calendarInput"> insert into calendar values(default, #{vo.title}, #{vo.startTime}, #{vo.endTime}, #{vo.allDay}); </insert> <delete id="calendarDeleteTrue"> delete from calendar where title = #{title} and startTime = #{startTime} </delete> <delete id="calendarDelete"> delete from calendar where title = #{title} and startTime = #{startTime} and endTime = #{endTime} and allDay=#{allDay} </delete> <update id="calendarUpdate"> update calendar set title=#{vo.title}, startTime=#{vo.startTime}, endTime=#{vo.endTime}, allDay=#{vo.allDay} where idx=#{vo.idx} </update> </mapper> | cs |
나머지 서비스,dao은 건드릴 필요없이 그냥 생성만 해놓으시면 됩니다.
가져가서 사용만하시면 됩니다.
그리고 개인별로 일정을 조회하도록 만들고 싶으면 session에 있는 개인의 mid나 nickName을 받아서 가져온 뒤에 입력하고 list를 불러오면 됩니다.
첫댓글 정말 감사합니다 ㅠㅠ!!!!!!
감사합니다!