귀하의 웹사이트를 위한 간단한 약속 일정 위젯

방문자와 고객이 다음과 같은 Spurwing의 무료 내장형 위젯을 사용하여 웹사이트에서 약속을 쉽고 빠르게 예약할 수 있습니다.



이 게시물에서는 웹 사이트에 쉽게 배치할 수 있는 간단한 약속 일정 도구 및 위젯의 개발 및 사용자 정의를 안내합니다. 이 모든 기능에는 HTML, CSS 및 JavaScript 코드를 추가하는 기능이 필요하며 이는 일반적으로 Wordpress 및 기타와 같은 인기 있는 CMS 웹사이트에서도 가능합니다.

캘린더 UI 자체는 pg-calendar에서 제공하며 상당히 모바일 친화적입니다. index.html 아래에 있는 달력을 표시하는 HTML 코드는 단 4줄의 코드입니다.

<div id="disabled-range" class="article">
  <div class="disabled-range-calendar"></div>
  <div class="box">loading ...</div>
</div>

약속 일정 논리에 대한 JavaScript 코드(jQuery 라이브러리 포함)는 js/demo.js 아래에 있습니다. 흐름에 대한 높은 수준의 개요는 다음과 같습니다.

Spurwing API 세부 정보를 제공합니다.

페이지 준비 ➜ init_calendar()

init_calendar: Spurwing 계정에 따라 사용 가능한 날짜를 로드하고 예약 범위를 2개월로 제한합니다(show_months 변수).

요일을 선택할 때마다 onSelectHandler(date) 함수가 호출됩니다. 또한 사용 가능한 슬롯과 제출 양식도 표시됩니다.

마지막으로 제출 버튼에 대한 클릭 이벤트 기능이 구현되었습니다.

이 예약 위젯의 전체 코드는 available here 입니다.

멋진 점은 프로젝트 범위에 맞지 않는 한 React/Vue/Angular와 같은 복잡한 프레임워크를 사용하지 않고도 100줄 미만의 코드로 약속 일정 위젯을 빌드하거나 사용자 정의할 수 있다는 것입니다.

또한 index.html에 로드되는 Spurwing API JavaScript 라이브러리를 사용하여 필요한 모든 API 요청을 용이하게 합니다.

<script type="text/javascript" src="https://spurwingio.github.io/Spurwing-API-Javascript-Library/spurwing.js"></script>

Spurwing에는 무료 및 오픈 소스 약속과 캘린더 위젯을 개발하는 전담 팀이 있습니다our GitHub repository. 문제와 질문이 있으시면 언제든지 저희에게 연락하십시오.