본문 바로가기
반응형

jQuery, CSS, HTML11

[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.
[jQuery + HTML + CSS] 오디오 플레이어 만들기 - 2 이전 포스팅 [jQuery + HTML + CSS] 오디오 플레이어 만들기 - 1 [jQuery + HTML + CSS] 오디오 플레이어 만들기 - 0 * 목차 * 1. youtube 링크 삽입 화면 2. 음원파일 삽입 화면 3. Youtube API 4. 오디오 플레이어 관련 js 함수 먼저 관리자 등록화면에 대해 설명하도록 하겠다. 관리자 화면에서는 음원과 유튜브 링크를 등록할 수 있다. 오디오 플레이어에 마우스 오버하면 생기는 툴박스에 등록 버튼이 생기도록 하였다. 재생이 시작되면 반복 재생되도록 설정 해놓았다. 1. youtube 링크 삽입 링크삽입 버튼을 클릭하면 youtube url을 삽입하는 팝업이 뜬다. youtube 영상의 주소창에 있는 url 또는 공유 url 삽입이 가능하다. 적용하기.. 2020. 8. 12.
반응형