2022.12.06

작업내용

어제 구글 캘린더 API연동 후 일정등록 과정을 처리하기 위해 중간프로젝트에 썼던 등록 양식을 가져와서 추가했다.
좀더 완성된 양식을 완성하고자 수정을 하는 과정중에 시간과 날짜를 합쳐서 하나의 데이터로 저장하는것을 나누어서 DTO에 정의 해주었다.

그리고 입력양식도 좀더 디테일을 추가하기 위해 html기본 태그로 바꾸기를 시도했다.
하지만 아무리 해도 기본 태그로는 내가 원하는 기능을 표현하기에 어려웠다

원래 양식

• 구현하고싶은 점

1. 시간과 날짜를 분리
2. 날짜는 달력으로 보여지고 오늘 이전의 날짜는 선택할수 없도록 함
3. 시간은 시작시간과 종료시간을 나누어서 입력받기
4. 시간 간격은 30분 단위로 오전과 오후 표시가 됨.
5. 종료시간에서 선택할수 있는시간은 시작시간보다 늦은시간.

일단 내가 원하는 UI를 갖춘 라이브러리가 필요했다.
그러다가 찾은 datetimepicker!!

datepicker와 timepicker가 합쳐진것으로 날짜와 시간을 같이 선택할 수도 있고 따로 표현도 가능하다.
자세한 소개는 https://xdsoft.net/jqplugins/datetimepicker/여기에서 확인 가능하다.
근데 나는 어제 하루종일 계속 해봤지만 datepicker는 적용이 되지만 timepicker가 적용이 안되는 문제가 발생했다.
프로그램의 문제로 css와 js파일을 직접 주입해주지않고 CDN주소를 주입해주었는데 거의 10시간을 붙잡고 해도 안되더니 오늘 아침에 드디어 해결했다.ㅜㅜㅜ
문제는 jquery의 중복이었다......
모든 경우의 수를 다해봤다고 생각했는데 저게 중복일줄이야😭

사진에서 보다시피 jquery가 3.4.1버전과 3.6.0버전이 함께 있다.
여기서 또 신기 한건 내가 위에서부터 하나씩 또는 두개씩 주석처리해가면서 실행해 봤는데 3.6.0버전을 지울때만 정상작동했다는것이다. (아직도 자세히 모름;;)
아무튼 datetimepicker를 써도 timepicker는 따로 또 필요했다....

<완성된 CDN>

<!--TimePicker -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<!--datepicker-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.4/css/bootstrap-datetimepicker.min.css">
     

• 앞으로 남은 작업

1. Schedule 테이블에 저장된 내용을 가져와서(json) fullcalendar에 출력.
2. 일정등록할때 json 객체로 서버에 전송하기.