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

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

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

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

jQuery 를 이용한 켈린더 입니다. 첨부된 압축 파일을 다운로드 하시면 demos 폴더안에 index.html 파일이 있습니다. index.html 파일은 인라인 켈린더와 드랍 켈린터 2가지 형태로 구성되어 있습니다. 사용해보니 간단하게 가져와서 쓸 수 있네요. ^^

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