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

[해피CGI][cgimall] themouette week calendar jquery 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] themouette week calendar jquery

해피CGI윤실장 2018. 10. 31. 09:11
Jquery 를 이용하여 캘린더 및 스케쥴러를 구성 할 수 있는 기능을 소개해 드릴까 합니다. 

첨부된 압축파일을 다운로드 하시면 아래와 같은 구조를 가지고 있습니다. 


안타깝게도 full_demo 는 themeswitcher function 을 더이상 제공하지 않기 때문에 ... 사용할 수가 없습니다. 
  
하지만 weekcalendar.html , weekcalendar_demo2.html ... 등을 이용하여 충분히 테스트 해 보실 수 있습니다. 


각 html 별 특징이나 다른점을 설명 드립니다. 

weekcalendar.html 는 심플한 버젼의 기본 기능으로만 구성된 샘플 파일 입니다. 

weekcalendar_demo2.html 는 캘린더에 표시될 데이터를 셋트로 구성하여 다르게 표시 하는 기능을 보여 줍니다. 
사용자1, 사용자2  처럼 사용자별로 데이터 셋을 변경할 수 도 있다는걸 보여주기 위한 샘플 파일 입니다.
샘플 페이지 오른쪽 상단의 선택상자를 통해 컨트롤 할 수 있습니다. 



weekcalendar_demo3.html 는 캘린더의 특정 영역에 대해서는 이벤트를 스케쥴을 추가하지 못하도록 하는 기능을 보여줍니다.
하루의 일정에 대해서 사용자를 여려명 지정하여 동시에 스케쥴을 보여주기도 합니다. 

weekcalendar_demo4.html 는 여러개의 스케쥴을 한번에 표시 하는 기능을 보여줍니다.
지나간 일정의 이벤트는 회색으로 보여지고 다가올 이벤트는 파란색으로 보여주고 있습니다. 

저는 4번 캘린더가 가장 마음에 드네요 ^^



html 파일에 보면 캘린더를 호출하고 eventRender, eventNew, eventDrop, eventResize, eventClick, eventMouseover, eventMouseout, noEvents 등에 대해서 모두 정의가 되어 있습니다. 

각각의 이벤트에 대해서 스크립트를 추가하여 동적 캘린더로 변경하시는 것도 가능 합니다. 
프로그램을 조금 더 추가하여 만들어서 안내 드리고 싶지만 그러기에는 시간이 많이 소요되며 php, mysql 과 연계해야 하기 때문에 

기능에 대한 소개는 여기까지만 하려고 합니다.  ^^*




홈페이지바로가기 소스다운로드


Comments