# FullCalendar

26개의 포스트

FullCalendar (1)

1.풀캘린더 사용하기에 앞서 eclipse와 tomcat을 통해 기본 웹페이지 부터 만들어 본다.참조사이트

2023년 5월 4일
·
0개의 댓글
·

[fullcalendar-datesSet] 출력 일자 범위 확인 및 next, prev 버튼 제어

fullcalendar 라이브러리를 활용한 달력 UI 내 조회가능월 범위 설정 필요next, prev 버튼을 제어해보자datesSet : 달력 UI가 렌더링될 때마다 호출되는 callback function초기 렌더링 시next, prev 버튼 클릭 후 렌더링 시달력

2023년 4월 29일
·
0개의 댓글
·
post-thumbnail

React,Typescript 에서 fullcalendar 라이브러리 사용해보기 -(2) 드롭다운 메뉴 보여주기

지난 포스팅을 통해 fullcalendar를 사용해서 달력을 보여주고 데이터를 표시하기까지 했습니다. 이번 포스팅에서는 달력에 표시된 이벤트에 마우스를 올렸을 때 드롭다운 메뉴가 열리면서 해당 이벤트에 보여주고싶은 데이터를 보여주도록 하겠습니다. 생각보다 쉽지 않네요.

2023년 3월 29일
·
0개의 댓글
·

[fullcalendar-eventClick] start 시작일자 변환하기 (Date 객체 -> YYYYMMDD)

fullcalendar 라이브러리는 달력 UI에서 event 클릭 시, eventClick 콜백 함수를 통해 event에 대한 정보를 전달해준다.eventClick(info)을 통해 선택된 일자를 전달받을 수 있다.선택된일자 : info.event.start${info

2023년 3월 25일
·
0개의 댓글
·

[fullcalendar-eventOrder] event 정렬 로직 적용

fullcalendar 라이브러리는 event의 시작 시간이 없는 경우, evnet의 title 기준 알파벳 또는 한글 순으로 정렬 (default)백엔드에서는 시작일자 외 조건에 따른 sort 로직이 적용된 배열 응답배열을 fullcalendar event에 추가 시

2023년 3월 25일
·
0개의 댓글
·
post-thumbnail

달력 라이브러리 FullCalendar를 사용해보자

리액트 프로젝트를 진행하며 달력을 통해 일정을 보여줘야 할 필요가 있었고FullCalendar 라이브러리가 필요한 기능을 제공하고 있고 많은 확장 기능들이 있어 사용했다.아래와 같은 형식으로 작성 할 수 있다.프로젝트 실제 적용 화면이고, 각 이벤트마다 배경 색을 줄

2023년 2월 13일
·
0개의 댓글
·
post-thumbnail

[fullcalendar] view 형태가 list 풀캘린더를 여러해 보고싶은경우

listview 형태로 하는경우 initialview에 listYear로 하는경우 당해 데이터는 출력하지만 전년도의 데이터를 출력해야 하는 경우에는 수정 해주어야한다option에 initialview를 list로 바꾸고 visiblerange를 설정해주면 전년도도 조회

2023년 1월 2일
·
0개의 댓글
·
post-thumbnail

230101 한주회고 캘린더

캘린더로 꼭!wil써줘! 하는 분들이 많아서...그리구 나도 틈틈히 공부해서 내껄루 만들어야하기 때문에...적어본다...ㅎㅎ구현한 영역팀 프로젝트 내에서 캘린더가 들어가야할 부분을 모두 구현했었는데task입력 시 일자를 기입할 수 있게 보여주는 작은 캘린더\+) 작은

2023년 1월 1일
·
0개의 댓글
·

FullCalendar 뷰포트 고정

상단의 날짜 고정 여부스크롤하는 동안 뷰의 수평 스크롤바를 뷰포트 하단에 고정 여부

2022년 12월 26일
·
0개의 댓글
·

FullCalendar 크기 조절

Height Setter (동적 설정) contentHeight Setter (동적 설정) aspectRatio(종횡비) Setter (동적 설정) Getter (설정 값 가져오기) expandRows

2022년 12월 26일
·
0개의 댓글
·
post-thumbnail

Header / Footer Toolbar

start/center/endleft/center/righttitle현재 월/주/일을 포함하는 텍스트prev달력을 한 달/주/일 뒤로 이동하는 버튼next달력을 한 달/주/일 앞으로 이동하는 버튼prevYear달력을 연도로 되돌리기 위한 버튼nextYear달력을 1년

2022년 12월 26일
·
0개의 댓글
·
post-thumbnail

[fullcalendar] 풀캘린더 지연실행, 지연렌더링 옵션

한 페이지의 2개의 풀캘린더를 렌더링 하는데 동시에 로딩을 끝내고 싶었으나 fullcalender내부에서 events success를 setTimeout으로 처리하려 했으나 실패하고, 다른 방법을 찾던 중ex> setTimeout(() => calendar.render

2022년 12월 20일
·
0개의 댓글
·
post-thumbnail

[fullcalendar] 풀캘린더 노드(속성) 동적 변경

info.el의 property에서 node에 접근하여 직접 수정할 수 있음※ fullcalendar에서 기본적으로 정의되어 사용되는 속성들은 info object의 event 속성 내부에서 접근할 수 있으며 사용자가 추가하는 custom 속성은 extendedPros

2022년 12월 19일
·
0개의 댓글
·
post-thumbnail

2022.12.05

day13

2022년 12월 5일
·
0개의 댓글
·

2022.11.28

day6

2022년 11월 28일
·
0개의 댓글
·
post-thumbnail

FullCalendar 시작하기

FullCalendar는 자바스크립트 기반 오픈소스 라이브러리입니다. FullCalendar를 사용하는 가장 기본적인 방법에 대해 설명합니다.

2022년 10월 23일
·
0개의 댓글
·
post-thumbnail

FullCalendar 달력 내부 이벤트 직접 정의하기

FullCalendar 달력 내부 이벤트 직접 정의하는 방법에 대해 소개합니다.

2022년 10월 23일
·
0개의 댓글
·
post-thumbnail

Drag&Drop 달력 구현하기

FullCalendar라는 오픈소스를 활용하여 드래그앤드롭 기능의 달력을 구현한 내용을 정리해보았습니다. 구현하면서 고민했던 내용들은 추후에 작성해서 해당 기능을 구현하는 분들에게 도움이 되었으면 합니다.

2022년 10월 23일
·
0개의 댓글
·