유혁스쿨

제목에서와 같이 해당 옵션들을 사용하기 위해서는 interactionPlugin를 사용해야만 selectable, dateClick등의 옵션이 구현된 interaction클래스에 접근이 가능하다. 따라서 interaction 을 dependencies로 추가해야만 한다. package.json에 가보면 dependencies에 "@fullcalendar/interaction" 속성이 존재하지 않는다. interaction은 fullcalendar api를 설치할때 기본적으로 함께 디펜던시가 추가되지 않으므로 따로 npm을 설치해야한다. 터미널에 아래 명령어를 입력해본다. npm install --save "@fullcalendar/interaction" 버전차이등의 오류가 발생하거나 npm 설치를 실패할..

터미널에서 다음과같이 입력 npm install --save @fullcalendar/react @fullcalendar/daygrid 오류가 날 경우 force옵션을 부여하여 아래와 같이 강제로 설치 npm install --force@fullcalendar/react @fullcalendar/daygrid import FullCalendar from '@fullcalendar/react' // must go before plugins import dayGridPlugin from '@fullcalendar/daygrid' // a plugin! 위 두 코드를 import해 줘야지 사용이 가능하다. Example Component import FullCalendar from '@fullcalendar/..

지난 포스팅 때에는 타입스크립트 문법으로 유추했지만 오늘 다시 보니 그냥 기본문법으로 구현된 것 일수도 있겠다 유추되었다. var FullCalendar = (function (exports){ /* 코드 생략 */ }({})); 자바스크립트 기본서 책을 한번 읽고나서 객체인줄 알았으나 책을 두번째 읽으며 블로그에 정리하고 다시 파일을 보니우측에 function이라는것이 이제서야 눈에 들어왔다. 식별자 변수명이 대문자인것으로 보아 생성자 함수로 유추된다. 익명 함수문법을 사용한 생성자 함수 선언이다. 선언적 생성자 함수로 구현하면 아래와 같지 않을까? function fullcalendar (exports) { } var fullCalendar = new FullCalendar(); 마지막 괄호의 중괄호..

tbody에는 접근이 가능하지만 아직도 그 하위의 fc-list-event-title클래스명을 갖는 tr태그에는 접근이 되지 않는다. 구현된 renderSegList 함수에서 코드를 수정한다. public renderSegList(allSegs, datDates) { var _a = this.context, theme = _a.theme, options = _a.options; var _b = this.state, timeHeaderId = _b.timeHeaderId, eventHeaderId = _b.eventHeaderId, dateHeaderIdRoot = _b.dateHeaderIdRoot; var segsByDay = groupSegsByDay(allSegs); return (createEle..

ListView.prototype.render = function () { var _this = this; var _a = this, props = _a.props, context = _a.context; var extraClassNames = [ 'fc-list', context.theme.getClass('table'), context.options.stickyHeaderDates !== false ? 'fc-list-sticky' : '', ]; var _b = this.computeDateVars(props.dateProfile), dayDates = _b.dayDates, dayRanges = _b.dayRanges; var eventSegs = this.eventStoreToSegs(props..

두 스크립트를 선언해줘야한다. ,titleFormat : 'YYYY - MM' titleFormat 옵션을 통해 날짜 형식이 지정 가능하다. 처음 언급한 두 스크립트중 하나라도 없다면 캘린더는 렌더링되지 않는다. 두 스크립트는 추후 링크에 접속하여 실물파일로 저장하여 사용한다.

이벤트가 지니고있는 데이터 중 api 사용자가 임의로 데이터 컬러를 동적으로 컨트롤 하는 경우가 생긴다. , eventDidMount: function(info) { } eventDidMount : 함수형 옵션을 활용하여 설정한다. function의 매개변수 info에 접근하여 event에 대한 정보를 가질 수 있다. , eventDidMount: function(info) { var title = info.event.title; var start = info.event.start; var end = info.event.end; console.log(title,start,end); } start, end, title과 같이 default 속성은 모두 info.event에서 직접 접근이 가능하지만 만약 e..

v5에서의 툴팁 구현 2.x대 버전의 "popper.js"와 "tooltip.js"의 새 버전인 "tippy.js" 두 스크립트 파일 등록 (추후 해당 URL에 직접 들어가서 각 파일들을 직접 다운받아서 사용해야한다.) FullCalendar의 eventDidMount 함수 옵션을 통해 tippy 메소드 호출 후 툴팁 세팅. eventDidMount: function(info) { tippy(info.el, { content: info.event.title//이벤트 타이틀을 툴팁으로 가져옵니다. //content: info.event.extendedProps.description,//이벤트 디스크립션을 툴팁으로 }); }, 툴팁 디자인 및 기타 옵션 설정하기 eventDidMount: function(i..

FullCalendar API에서 지원하는 main.js 스크립트 파일에는 Calendar를 그려주는 기능과 다양한 옵션 기능들이 구현되어있다. ListView 목록보기 기능에서 기본 DESC 내림차순 정렬이 되어있다 ASC 오름차순 기능으로 날짜를 역순으로 출력하던 도중 오버라이딩을 하여 코드를 수정하기 위해 main.js 파일의 문법 형태를 파악하였는데, 생성자 함수를 var 함수명 = (function () {})(); 와 같이 선언된 형태를 처음 접하게되어 구글링과 책을통해 이리저리 검색해보니 자바스크립트 컴파일 엔진을 통해 다른 언어로 작성된 코드를 변환한 형태인 것을 확인할 수 있었다. (아닐수도 있음) 해당 형태는 타입스크립트 엔진을 통해 변환된 형태인것으로 추측된다. 변환 전 코드 clas..

Script 옵션 코드 ,events:function(info, successCallback, failureCallback){ var url = "/SampleCalendarList"; $.ajax({ type: 'POST' ,cache: false ,url: url ,dataType: 'json' ,contentType : "application/x-www-form-urlencoded; charset=UTF-8" ,success: function(data){ var events = []; console.log(data); if(data.pValue != null && data.pValue === 'private'){ events.push({ title : data.title ,start : data.s..

ListMonth ListView는 기본적으로 오름차순 하향 정렬로 데이터를 출력해준다. 필자는 역순인 내림차순 즉, 최신 날짜가 가장 위에 출력되도록 API 코드를 아래와 같이 수정한다. main.js 파일에서 ListView.prototype.renderSegList를 검색하고 아래와같은 for 루프를 찾아 코드를 수정한다. for (var dayIndex = 0; dayIndex 0 ; dayIndex -= 1) { 로 변경 ListView.prototype.renderSegList = function (allSegs, dayDates) { v..