본문 바로가기
반응형

분류 전체보기35

[JavaScript] FullCalendar 캘린더 사용법 - (5. Date & Time Display) Date & Time Display weekends 일정관리에 토요일/일요일 열을 포함 할지 여부를 설정 document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { locale: 'en', initialView: 'dayGridMonth', headerToolbar: { left: 'prev,next', center: 'title', right: 'timeGridDay,timeGridWeek' }, // 토요일, 일요일 보이지 않도록함 weekends : false .. 2022. 10. 20.
[JavaScript] FullCalendar 캘린더 사용법 - (3. Sizing) Sizing height 머리글 및 바닥글을 포함하여 전체 달력의 높이를 설정. Integer로 값을 입력해야 한다. 기본적으로 이 옵션은 설정되어 있지 않으며 달력의 높이는 aspectRatio(달력의 가로 세로 비율)에 의해 계산된다. 값이 지정되면 달력의 높이는 픽셀값으로 적용된다. 내용이 높이에 맞지 않으면 스크롤바가 나타난다. "auto"로 지정된 경우, 스크롤 막대가 생기지 않는다."100%"로 지정된 경우, 상위 컨테이너의 높이와 일치하게된다. document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCale.. 2022. 10. 20.
[JavaScript] FullCalendar 캘린더 사용법 - (2. Toolbar) Toolbar 헤더, 제목 형식, 제목 범위 구분자, 버튼 텍스트/아이콘, 사용자 정의 버튼 headerToolbar / footerToolbar 일정관리의 맨 위에 있는 버튼과 제목을 정의한다. document.addEventListener('DOMContentLoaded', function() { var calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { locale: 'en', initialView: 'dayGridMonth', footerToolbar: { left: 'prevYear', center: 'dayGridMonth,listMonth', right: '.. 2022. 10. 14.
[JavaScript] FullCalendar 캘린더 사용법 - (1. 설치 및 기본 사용법) https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors, FullCalendar will always have a free and open source core. Learn more fullcalendar.io npm 으로 설치 npm install fullcalendar Download : fullcalendar-5.11.3.zip CDN : jsdelivr // JavasScript // css 기본 코드 fullcalendar의 main.js와 main.css에는 아래의 패키지가 포함되어 있다. @full.. 2022. 10. 11.
반응형