웹솔루션개발 25년 노하우! 해피CGI의 모든것

​달력에 날짜별로 이벤트를 표시하는 달력 플러그인입니다. 다운로드 받은 파일의 압축을 해제하고, index.html 파일을 웹브라우저로 열어서 보면 데모를 확인하는게 가능합니다. 위 와 같이 기본 4가지 정도의 테마가 있네요. 좌측과 우측의 메뉴와 화살표를 이용해서 월을 표시하는 부분과, 그날의 이벤트를 표시하는 부분을 접을수 있습니다. 하나의 달력으로 위와 같은 조합의 화면을 구성할수 있습니다. 매뉴얼도 상당히 신경써서 제작을 해뒀네요 달력을 이용할수 있는 여러 설정값들을 위와 같이 설명을 해주고, 각 설정을 클릭을 해보면, 실제 코드로는 어떻게 사용을 해야 하는지를 예시로 화면에 표시를 해줍니다. 특정날짜에 이벤트를 추가/삭제를 하는게 가능합니다.

부트스트랩 형태의 달력피커로 다양한 data 부터 달력을 미리 보이게 할것인지, 클릭시 반응하여 출력하게 할 것인지등 다양한 옵션을 선택하여 출력이 가능합니다. 토글옵션을 주어 달력을 미리보게 할 수 있습니다. Methods 으로 현재 날싸부터 선택된 달력의 날짜등을 확인할 수 있습니다.

모양이나 스타일을 쉽게 변경할 수 있는 달력입니다. 월, 주, 일 단위로 일정을 볼 수 있습니다. 일정은 마지막 부분에 마우스를 가져다 대면 해당 일정의 기간을 마음대로 조정할 수 있습니다. 드래그 하면 위치도 이동이 가능하고 각 구간별 색상 지정이 가능합니다. 주, 월 단위로도 출력이 가능합니다. 주단위에서 변경한 내용은 월단위에서도 변경된 상태로 출력됩니다. 주단위나 월단위에서도 각 일정은 드래그로 위치(날짜)변경이 가능합니다. 지정된 항목을 드래그 하여 일정 등록을 할 수 있습니다.

- 소개 pickadate는 가벼운 jQuery 날짜 입력 선택기입니다. - 라이센스 MIT - 사용 방법 1. 사용할 웹페이지에 CSS 링크를 걸어줍니다. 2. 사용할 웹페이지에 JS 링크를 걸어줍니다. 3. 날짜를 입력할 INPUT 태그를 넣어줍니다. 4. pickadate 플러그인을 호출합니다. 5. 상세한 옵션은 아래 문서 페이지를 참고하세요. 문서 페이지 바로가기 각종 달력 테마 미리보기 - 작동 예제

다운로드 받은 파일의 압축을 풀고 doc/index.html 파일을 웹브라우저로 열어서 보면 샘플을 확인하는게 가능합니다. 위 그림과 같이 화면에 달력이 표시되고, 동그라미가 쳐진 날짜를 클릭해보면 위 그림과 같이 그날의 이벤트를 간단하게 표시해주는 스크립트 입니다. index.html 파일의 소스코드를 열어서 보면 이벤트가 표시되어야 할 날짜와, 그 날의 이벤트를 텍스트로 설정해둔게 확인이 됩니다. 화면에 달력을 표시하고, 이벤트를 보여주는게 필요할 때 비교적 간단하게 사용하는게 가능할거 같네요. 출처는 https://www.jqueryscript.net/time-clock/animated-event-calendar.html 입니다.

Jquery 를 이용하여 캘린더 및 스케쥴러를 구성 할 수 있는 기능을 소개해 드릴까 합니다. 첨부된 압축파일을 다운로드 하시면 아래와 같은 구조를 가지고 있습니다. 안타깝게도 full_demo 는 themeswitcher function 을 더이상 제공하지 않기 때문에 ... 사용할 수가 없습니다. 하지만 weekcalendar.html , weekcalendar_demo2.html ... 등을 이용하여 충분히 테스트 해 보실 수 있습니다. 각 html 별 특징이나 다른점을 설명 드립니다. weekcalendar.html 는 심플한 버젼의 기본 기능으로만 구성된 샘플 파일 입니다. weekcalendar_demo2.html 는 캘린더에 표시될 데이터를 셋트로 구성하여 다르게 표시 하는 기능을 보여 줍니..

다운로드 받은 파일의 압축을 해제해서 demo/basic.html demo/personal.html 위 두개의 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 일정이 있는 날짜는 날짜 아래에 빨간색 점으로 표시가 되게 됩니다. 날짜에 마우스를 올리면 아래 그림 처럼 날짜에 동그라미가 표시되고, 빨간 점이 있는 날짜를 클릭하면 해당 날짜에 저장된 일정을 달력 하단에 표시해줍니다. 달력을 클릭했을때 그날의 일정을 보여주는 효과가 필요할때 사용이 가능하겠다 싶네요. HTML 소스코드를 열어서 보니 일정을 확인하고픈 달력을 만들어야 한다는 점이 바로 사용하려고 할때는 약간 부족한 부분이네요. 그 외에 해당 하는 날짜에 일정을 지정하는 부분은 생각보다 어렵지 않게 HTML 태그로 조절하는게 가능해보이네요.