予約システムのダウンロード「CARTMAKER」

予約システムのユーザー用カレンダーに自由なレイアウト

美容院向けの予約カレンダー エステの予約カレンダーのレイアウト 医療機関向けの予約カレンダーのデザイン カルチャースクール向けの予約カレンダーの統合 スクール向けの予約カレンダーの統合

予約カレンダーのレイアウト

お客様がレイアウトされたホームページ内でユーザー用予約カレンダーを表示するのに複数の方法があります。
また、WordPress内での予約ページの表示方法も紹介しています。

メールサポート このページで紹介している機能や操作方法などについて、ご質問がありましたら下記のボタンよりお気軽にご質問ください。 このページの機能について質問する

iFrameによる予約カレンダーの読み込み - 方法1

HTMLタグの<iframe>を利用する事で、既存のホームページ内に予約カレンダーを表示させることができます。
下記のサンプルコードを任意のHTMLファイル内に記載してください。また、iframe要素のsrc属性に指定するURLは、”http://example.cartmaker.net/calendar_dx/index.html”となっていますが、お客様が設置した予約カレンダーのURLに変更する必要があります。

<iframe>タグを使用時のサンプルコード
<iframe style="width: 650px; height: 500px; border: 0px;" src="http://example.cartmaker.net/calendar_dx/index.html"></iframe>

予約カレンダーファイル index.htmlの編集について - 方法2

各パッケージのディレクトリ内にある、index.html又は、Reservation.htmlファイルを編集する事で任意のデザインを施すことができます。 また、必要に応じて上記のHTMLファイルをコピーしてご利用いただく事もできます。
編集不可なソースコードは、赤色でマークされている箇所となります。

index.html内のソースコード
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- <meta name="viewport" content="width=device-width, user-scalable=no" /> -->
<title>Reservation</title>
<!-- ここから -->
<script type="text/javascript" language="javascript" src="ReservationDX/ReservationDX.nocache.js"></script>
<!-- ここまでは、変更しないでください。 -->
</head>
<body>
<!-- ここから -->
<div id="reservationPage"></div>
<!-- ここまでは、変更しないでください。 -->
</body>
</html>
Javascriptのsrcに設定するパスは、パッケージのタイプごとに異なります。
パッケージDXのパス
<script type="text/javascript" language="javascript" src="ReservationDX/ReservationDX.nocache.js"></script>
パッケージEXのパス
<script type="text/javascript" language="javascript" src="ReservationEX/ReservationEX.nocache.js"></script>
パッケージSTのパス
<script type="text/javascript" language="javascript" src="ReservationST/ReservationST.nocache.js"></script>

スマートフォン用予約ページについて

スマートフォン用予約ページに最適化されたカレンダーを表示するには、SmartPhone.htmlファイルを編集するか、下記のMETAタグをスマートフォン用HTMLファイル内のヘッダーに追加する必要があります。

<meta name="viewport" content="width=device-width, user-scalable=no" />

任意の階層のHTMLファイルに予約カレンダーを表示 - 方法3

予約カレンダーを表示したい任意のHTMLファイル内に下記のコードを記載してください。

サンプルコード
<input typy="hidden" style="display: none;" id="calendar_Dx_Path" value="http://yourdomain.com/calendar_dx/" />
<div id="reservationPage"></div>
<script type="text/javascript" language="javascript" src="http://yourdomain.com/calendar_dx/ReservationDX/ReservationDX.nocache.js"></script>
  1. inputタグの属性
    • type属性には、「hidden」を指定してください。
    • id属性には、「calendar_Dx_Path」を指定してください。
    • value属性には、ホスティングサーバーに設置されているパッケージDXの場合は、ディレクトリ(/calendar_dx/)までのパスを指定してください。
      設定例
      http://yourdomain.com/calendar_dx/
  2. divタグの属性
    id属性には、「reservationPage」を指定してください。
  3. scriptタグの属性
    • type属性には、「text/javascript」を指定してください。
    • language属性には、「javascript」を指定してください。
    • src属性には、ホスティングサーバーに設置されているパッケージDXの場合は、ディレクトリ(/calendar_dx/ReservationDX/ReservationDX.nocache.js)までのパスを指定してください。
      設定例
      http://yourdomain.com/calendar_dx/ReservationDX/ReservationDX.nocache.js

スマートフォン用予約ページについて

スマートフォン用予約ページに最適化されたカレンダーを表示するには、SmartPhone.htmlファイルを編集するか、下記のMETAタグをスマートフォン用HTMLファイル内のヘッダーに追加する必要があります。

<meta name="viewport" content="width=device-width, user-scalable=no" />

WordPress内で予約ページを表示方法

WordPress用の予約システムの解説ページを公開いたしましたので、詳細は、WordPressで予約システムを運用についてをごご確認ください。

メールサポート

このページで紹介している機能や操作方法などについて、ご質問がありましたら下記のボタンよりお気軽にご質問ください。 このページの機能について質問する

その他の関連項目