web-dev-qa-db-ja.com

タイムスロットを選択したjQueryカレンダー

PHPでアポイントメント予約機能を作成したい。ユーザーが日付を選択でき、代わりにカレンダーが選択するタイムスロットを表示するカレンダーが必要です。

タイムスロットは静的になりますが、将来的には動的になる可能性があります。

以下のリンクの例を確認できます。

https://getbooked.io/

このような種類のプラグインをインターネットで検索しましたが、見つかりませんでした。 （無料のプラグインが必要です）。

javascriptphpjquerydatepicker
12
Punit Gajjar

これを確認してください http://jsfiddle.net/Xx4GS/258/

アイデアは変更中です。新しいhtml要素を作成し、datepickerに追加しています。必要に応じて設計を変更する必要があります。 changeイベントでajax関数を呼び出して、DBからタイムスロットを取得します。あなたが与えたリンクも同じことをしていることがわかるからです。

コードも添付します。

var $datePicker = $("div#datepicker");

var $datePicker = $("div");

$datePicker.datepicker({
    changeMonth: true,
    changeYear: true,
    inline: true,
    altField: "#datep",
}).change(function(e){
    setTimeout(function(){   
        $datePicker
            .find('.ui-datepicker-current-day')
            .parent()
            .after('<tr>\n\
                        <td colspan="8">\n\
                            <div> \n\
                                <button>8:00 am – 9:00 am </button>\n\
                            </div>\n\
                            <button>9:00 am – 10:00 am</button>\n\
                            </div>\n\
                            <button>10:00 am – 11:00 am</button>\n\
                            </div>\n\
                        </td>\n\
                   </tr>');

    });
});
<div id="datepicker"></div>
10
Ish
$('.date-picker-2').popover({
        html : true, 
        content: function() {
          return $("#example-popover-2-content").html();
        },
        title: function() {
          return $("#example-popover-2-title").html();
        }
});
$(".date-picker-2").datepicker({
        onSelect: function(dateText) { 
        $('#example-popover-2-title').html('<b>Avialable Appiontments</b>');
        var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
        $('#example-popover-2-content').html('Avialable Appiontments On <strong>'+dateText+'</strong><br>'+html);
        $('.date-picker-2').popover('show');
    }
});
.popover {
        left: 40% !important;
}
.btn {
        margin: 1%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
</head>
<body>
    <div class=" col-md-4">
      <div  class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
      <span class="" id="example-popover-2"></span> </div>
    <div id="example-popover-2-content" class="hidden"> </div>
    <div id="example-popover-2-title" class="hidden"> </div>
</body>
</html>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<style>
.popover {
    left: 40% !important;
}
.btn {
    margin: 1%;
}
</style>
</head>
<body>
    <div class=" col-md-4">
      <div  class="date-picker-2" placeholder="Recipient's username" id="ttry" aria-describedby="basic-addon2"></div>
      <span class="" id="example-popover-2"></span> </div>
    <div id="example-popover-2-content" class="hidden"> </div>
    <div id="example-popover-2-title" class="hidden"> </div>
<script>
$('.date-picker-2').popover({
    html : true, 
    content: function() {
      return $("#example-popover-2-content").html();
    },
    title: function() {
      return $("#example-popover-2-title").html();
    }
});
$(".date-picker-2").datepicker({
    onSelect: function(dateText) { 
        $('#example-popover-2-title').html('<b>Avialable Appiontments</b>');
        var html = '<button  class="btn btn-success">8:00 am – 9:00 am</button><br><button  class="btn btn-success">10:00 am – 12:00 pm</button><br><button  class="btn btn-success">12:00 pm – 2:00 pm</button>';
        $('#example-popover-2-content').html('Avialable Appiontments On <strong>'+dateText+'</strong><br>'+html);
        $('.date-picker-2').popover('show');
    }
});
</script> 
</body>
</html>

これは、日付ピッカーのonSelect関数でAjaxメソッドを使用できる利用可能な予定を表示するための静的メソッドです。動的予定の場合

6
Vishnu Bhadoriya

FullCalendarを試してください： http://fullcalendar.io/

これは、フル機能の無料のオープンソースJavascriptカレンダープラグインです。それは非常に柔軟で、あなたが説明したすべてのことをすることができます。あなたの側で必要な努力は、あなたが望むイベント（例えば、ユーザーがタイムスロットを選択する）を処理し、それをサーバー側のデータに結びつけることです。外観や動作を少し変更して、必要なサイズのスロットを自動的に作成することができます。私が言ったように、それは信じられないほど柔軟ですので、少しの作業でそれを行うことができるはずです。

これらすべてを行うために提供されているドキュメントは非常に優れています。それでも行き詰まった場合は、ここにさらに質問を投稿してください-私はそれを非常に多く使用しており、助けることができるかもしれません。

正直に言って、あなたのインターネット検索ですでにそれが現れなかったことに驚いています。

1
ADyson

mouseoverハンドラーとclickハンドラーに jQueryプラグインツールチップスター を組み合わせて、行を作成できます。チェック このサンプルコード :)

月の情報を読み込んで、月が変わったら繰り返すか、コードで行ったようにすぐに読み込むことができます。

1
Grégoire Fruleux

試す jQuery Week Calendar

そのフル機能のオープンソースプラグイン。 jqueryとjquery uiの上に構築され、Googleカレンダーなどの他のオンライン週次カレンダーに触発されています。サーバー側からデータベースを更新するためのあなたの側の努力と、説明した要件に従ってプラグインのJavaScriptの変更。以下に簡単なデモを示します デモ 。 これはあなたを助けることができるより多くのデモです

0
Gopal Joshi