Календарь jQuery с выбором временных интервалов [закрыт]

Я хочу создать функцию бронирования встреч в PHP. Я хочу иметь календарь, в котором пользователь может выбрать дату, а взамен календарь показывает временные интервалы для выбора.

Временной интервал будет статичным, в будущем он может быть динамичным.

Вы можете проверить пример по ссылке ниже.

Https://getbooked.io/

Искал в Интернете такие плагины, но не смог найти. (Мне нужен бесплатный плагин).

Author: halfer, 2016-08-17
Source

5 answers

Пожалуйста, проверьте это http://jsfiddle.net/Xx4GS/258/

Идея заключается в изменении, мы создаем новый html-элемент и добавляем его в указатель даты. Вам нужно изменить дизайн в соответствии с вашими потребностями. Вызовите функцию ajax в событии изменения, чтобы получить временной интервал из базы данных. потому что я вижу, что ссылка, которую вы дали, также делает то же самое.

Также прикрепляем код:

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>
 9
Author: Ish, 2017-04-07 07:38:48 

$('.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>

Это статический метод отображения доступных встреч, которые Вы можете использовать Метод Ajax в функции onSelect средства выбора даты для динамического Встречи

 4
Author: Vishnu Bhadoriya, 2018-07-11 08:04:22

Попробуйте использовать полный календарь: http://fullcalendar.io/

Это полнофункциональный бесплатный плагин календаря Javascript с открытым исходным кодом. Он очень гибкий и может делать все, что вы описали. С вашей стороны требуется приложить усилия для обработки событий, которые вы хотите (например, выбор пользователем временного интервала), и подключить их к вашим данным на стороне сервера. Возможно, вам захочется немного изменить внешний вид и/или поведение, чтобы он автоматически создавал слоты нужного вам размера. Как я уже сказал, это невероятно гибкий, так что немного поработав, вы сможете это сделать.

Документация, предоставленная для выполнения всего этого, довольно хороша. Если вы застряли, пожалуйста, напишите здесь больше вопросов - я использовал его довольно часто и, возможно, смогу помочь.

Честно говоря, я удивлен, что это еще не появилось в ваших поисковых запросах в Интернете.

 1
Author: ADyson, 2016-08-17 12:34:22

Вы можете объединить плагин jQuery Tooltipster для обработчика mouseover и click для создания строки. Проверьте этот пример кода :)

Вы можете либо загрузить информацию за месяц и повторить ее при изменении месяца, либо загрузить на лету, как я сделал в своем коде.

 1
Author: Grégoire Fruleux, 2016-08-31 09:29:42

Попробуйте Календарь недели jQuery

Его полнофункциональный плагин с открытым исходным кодом. Он построен поверх пользовательского интерфейса jquery и jquery и вдохновлен другими еженедельными онлайн-календарями, такими как календарь google. Усилия с вашей стороны по обновлению базы данных со стороны сервера и некоторым изменениям javascript в плагине в соответствии с вашим описанным требованием. Вот простая демонстрация Демонстрация . Вот еще демо-версии, которые могут вам помочь

 0
Author: Gopal Joshi, 2016-08-31 06:48:33