웹프로그래밍/개발노트
-
[FullCalendar] 이미 출석 체크가 되었다는 표시하기웹프로그래밍/개발노트 2019. 5. 22. 14:55
목표 : 이미 출석 체크가 된 날짜에 이미 출석되었다는 표시를 해주어야한다. 1. 날짜를 처음 클릭했을 때 체크되었는지 알려주는 boolean변수도 함께 넣어준다. (default값은 false) 2. 출석 날짜들 중 같은 날짜가 있으면 "이미 출석되었습니다"라는 메세지를 보이게 해줌. 3. 그렇지 않으면 "출석되었습니다"는 메세지와 함께 출석 날짜를 모아놓은 데이터 리스트에 출석날짜를 넣어줌. 처음엔 저장된 출석 날짜에 클릭한 날짜가 존재하지 않으면 출석되었다는 메세지와 함께 날짜를 저장해주려고 했다. 반복문을 돌리면서 비교해주려 했는데 자꾸 새로운 데이터만 추가 되었다. for문으로는 비교를 해주지 못했다. var todayDate = this.$moment().format("YYYY-MM-DD") ..
-
[FullCalendar] interaction설치해서 dateClick handler사용하기웹프로그래밍/개발노트 2019. 5. 21. 23:57
목표 : 날짜를 클릭하면 해당 날짜가 화면에 alert되도록 한다. FullCalendar에서 날짜를 클릭하면 발생하는 events를 dateClick handler라고 한다. 위에 코드처럼 @dateClick="handleDateClick"을 추가해주면, 날짜를 클릭했을 때 handleDateClick 메서드가 실행될 것이다. handleDateClick 메서드는 클릭된 날짜를 alert해주는 메서드로 만들어 주었다. methods: { handleDateClick(arg) { alert(arg.date) } } 하지만, 아무리 클릭해도 날짜가 alert되지 않았다. FullCalendar의 dateClick함수를 찾아보고 문서를 찾아보다가 interaction을 추가 해주어야된다는 것을 알았다. np..
-
[FullCalendar] Vue로 FullCalendar 띄우기웹프로그래밍/개발노트 2019. 5. 21. 23:11
목표 : Vue로 FullCalendar 띄워주기 FullCalendar을 사용할 수 있도록 package를 설치해준다. npm install --save @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid 아래의 코드 처럼 script에서 css도 import해주면 화면에 FullCalendar가 나타날 것이다. 보여지는 화면 참고 : https://fullcalendar.io/docs/vue