일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Java
- fullcalenda 등록
- 키보드명령어
- red hat java설치
- TCP
- Java정규표현식
- red hat linux mysql
- fullcalenda
- 정규표현식
- linux java설치
- linux dump하는법
- IP
- NULL
- fullcalenda 추가
- fullcalenda 일정
- 패킷
- Linux
- 키보드단축기
- linux 데이터베이스
- linux mysql설치
- fullcalenda 캘린더
- red hat mysql
- fullcalenda 일정추가
- red hat db
- linux dump
- fullcalenda 사용법
- fullcalenda 일정수정
- fullcalenda 수정
- linux db설치
- select
- Today
- Total
어느 비전공자의 개발일지
fullcalenda 캘린더 일정추가 본문
국비지원 최종 프로젝트
팀 이름 : Miracle Job A ( 미라클 잡아 ) , 이끌렸으
팀 인원 인원 : 5명 - -1명이탈 = 4명
Front-end
: HTML5 , CSS3, JavaScript
Back-end
: Java11, OracleDB 18c, SpringFrameWork, Maven, Tomcat8.5, Spring Sequrity
프로젝트 설명
: 기업내 간단한 그룹웨어를 구현
프로젝트 UI/UX
: Notion 페이지
: 기간 : 2022.03.27 ~ 2022.04.01 Figma를 이용한 설계진행
: DA#을 통한 데이터베이스 모델링
주요기능
: 회원관리/게시판/주소록/일정관리/전자결재
추가했던날 : 2022.04.08~09 풀캘린더 일정추가 구현하기.
캘린더 : 메인화면,추가,수정,삭제 jsp를 각자 따로따로 만들어 주었고,
모달창을 띄워 sciprt 로 이벤트 를 넣었음
event : 이벤트 hover시 색이 변하고 사용자(user)가 어떤 이벤트를 클릭 했는지를 알수있다.
, 또한 각자 입맛에 맞는 css를 통해 background-color 색 등등을 바꿨다.
Fullcalendar 데모버전을 들어가면 간단한 div 태그와
javascript를 받으면 완성 된 캘린더를 구현해준다.
하지만 일정추가, 일정수정, 일정삭제는 내가 직접 구현하기로 한다. ( 달력만 빌린셈 )
* 피그마로 어떻게 만들지를 일단 스케치를 했다.
일단 구현이 완성된 모습이다. * ScheduleUserMain 화면
추가,수정,삭제는 따로 jsp를 만들기로 했다.
- 일정 추가 과정 예시 -
- 일정 추가 코드 -
1. jsp에서 div로 복사 붙여넣기 한다
<div id='calendar-container'>
<div id='calendar'></div>
</div>
2. 스크립트 부분
<script>
let calendar = null;
let Alldata = {};
$(function(){
let calendarEl = $('#calendar')[0];
calendar = new FullCalendar.Calendar(calendarEl, {
expandRows: true, // 화면에 맞게 높이 재설정
slotMinTime: '08:00', // Day 캘린더에서 시작 시간
slotMaxTime: '20:00', // Day 캘린더에서 종료 시간
headerToolbar: {
left: 'prev,next',
center: 'title',
right: 'dayGridMonth'
},
initialView: 'dayGridMonth',
editable: true,
selectable: true, // 달력 일자 드래그 설정가능
nowIndicator: true, // 현재 시간 마크
dayMaxEvents: true, // 이벤트가 오버되면 높이 제한 (+ 몇 개식으로 표현)
locale: 'ko', // 한국어 설정
eventAdd: function(obj) { // 이벤트가 추가되면 발생하는 이벤트
sDate =
obj.event._instance.range["start"].getFullYear() +
'-'+(obj.event._instance.range["start"].getMonth() +1) +
'-' + obj.event._instance.range["start"].getDate();
eDate =
obj.event._instance.range["end"].getFullYear() +
'-'+(obj.event._instance.range["end"].getMonth() +1) +
'-' + (obj.event._instance.range["end"].getDate() -1);
Alldata = {
"start": sDate,
"end": eDate,
"title": obj.event._def["title"],
"allday": obj.event._def["allDay"],
"defId": obj.event._instance["defId"],
"instanceId": obj.event._instance["instanceId"]
};
let allEvent = calendar.getEvents();
console.log(allEvent);
let jsondata = JSON.stringify(Alldata);
console.log("jsondata : " + jsondata);
},
eventChange: function(obj) { // 이벤트가 수정되면 발생하는 이벤트
console.log(obj);
},
eventRemove: function(obj){ // 이벤트가 삭제되면 발생하는 이벤트
console.log(obj);
},
eventClick : function(obj){
console.log(obj);
},
select: function(arg) { // 캘린더에서이벤트를 생성
let title = prompt('일정 내용을 입력하세요 :');
if (title) {
calendar.addEvent({
title: title,
start: arg.start,
end: arg.end,
allDay: arg.allDay
})
}
calendar.unselect()
},
});
// 캘린더 랜더링
calendar.render();
});
function allSave() {
console.log(allData); */
document.getElementById("submenu").style.display = "block";
$.ajax({
url: "/miracle/schedule/userScAdd",
type: "post",
data: {addEvent : JSON.stringify(Alldata)},
success:function(data, textStatus, xhr){
console.log(data);
},
error:function(xhr, status, error){
console.log(error);
}
});
}
3. Controller 컨트롤러부분
private ScheduleService scheduleService;
@Autowired
public ScheduleController(ScheduleService scheduleService) {
this.scheduleService = scheduleService;
}
@PostMapping("/userScAdd")
@ResponseBody
public String insertSchedule(@RequestParam("addEvent") String addEvent, HttpServletRequest request) throws ParseException {
System.out.println("addEvent 확인 : "+ addEvent);
JSONParser jsonParser = new JSONParser();
JSONObject jsonObject = (JSONObject) jsonParser.parse(addEvent);
ScheduleDTO scheduleDTO = new ScheduleDTO();
scheduleDTO.setUserNo(((LoginDTO) request.getSession().getAttribute("loginMember")).getUserNo());
if(((LoginDTO) request.getSession().getAttribute("loginMember")).getUserNo() > 10000) {
scheduleDTO.setDivide("부서");
} else {
scheduleDTO.setDivide("개인");
}
scheduleDTO.setStart(java.sql.Date.valueOf((String)jsonObject.get("start")));
scheduleDTO.setEnd(java.sql.Date.valueOf((String)jsonObject.get("end")));
scheduleDTO.setTitle((String) jsonObject.get("title"));
scheduleDTO.setAllday((boolean) jsonObject.get("allday"));
scheduleDTO.setDefId(Integer.parseInt((String)jsonObject.get("defId")));
scheduleDTO.setInstanceId(Integer.parseInt((String)jsonObject.get("instanceId")));
System.out.println("scheduleDTO : "+ scheduleDTO);
int result = scheduleService.insertService(scheduleDTO);
String message = null;
if(result > 0) {
message = "success";
} else {
message = "fail";
}
return message;
}
4. Service & ServiceImpl 서비스
public interface ScheduleService {
int insertService(ScheduleDTO scheduleDTO);
}
@Service
public class ScheduleServiceImpl implements ScheduleService {
private ScheduleMapper mapper;
@Autowired
public void ScheduleService(ScheduleMapper schedulemapper) {
this.mapper = schedulemapper;
}
@Override
public int insertService(ScheduleDTO scheduleDTO) {
return mapper.scheduleinsert(scheduleDTO);
}
5. mapper
public interface ScheduleMapper {
int scheduleinsert(ScheduleDTO scheduleDTO);
}
6. mapper.xml
<insert id="scheduleinsert" parameterType="ScheduleDTO">
INSERT /*com.project.miracle.schedule.model.dao.ScheduleMapper#scheduleinsert() */
INTO SCHEDULE A
(
A.SC_NO
, A.SC_START_DATE
, A.SC_END_DATE
, USER_NO
, A.SC_CONTENT
, A.SC_DIVIDE
, A.SC_ALLDAY
, A.SC_DEFID
, A.SC_INSTANCEID
, A.SC_YN
)
VALUES
(
SEQ_SCHEDULE.NEXTVAL
, #{ start }
, #{ end }
, #{ userNo }
, #{ title }
, #{ divide }
, #{ allday }
, #{ defId }
, #{ instanceId }
, 'N'
)
</insert>
'백엔드 개발자 > 2022년 국비 학원 프로젝트' 카테고리의 다른 글
fullcalenda 캘린더 부서,개인별 일정삭제 (0) | 2023.07.20 |
---|---|
fullcalenda 캘린더 부서,개인별 일정수정 (0) | 2023.07.19 |
fullcalenda 캘린더 raido버튼으로 일정구분 (0) | 2023.07.17 |
fullcalenda 일정수정 (0) | 2023.07.14 |
fullcalenda 캘린더 변경 (0) | 2023.07.12 |