Календарь Jquery с выбором временных интервалов

Я хочу создать функцию "Назначение бронирования" в PHP.

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

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

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

https://getbooked.io/

искал через интернет для таких плагинов, но не смог найти. (Нужен бесплатный плагин)

Любой может помочь мне с этим.

Ответы

Ответ 1

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

Идея заключается в изменении, мы создаем новый элемент html и добавляем к datepicker. Вам необходимо изменить дизайн в соответствии с вашими потребностями. Вызовите функцию 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>

Ответ 2

<!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>
<style>
.popover {
	left: 40% !important;
}
.btn {
	margin: 1%;
}
</style>
</head>
<body>
<div class=" col-md-4">
  <div  class="date-picker-2" placeholder="Recipient 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> 

**This Is a Static method for showing Available Appointments**

**You Can Use Ajax method in onSelect function of date picker For  Dynamic Appointments 

<!-- begin snippet: js hide: false console: true babel: false -->

Ответ 3

Попробуйте FullCalendar: http://fullcalendar.io/

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

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

Я удивлен, что он не появился в ваших интернет-поисках, если честно.

Ответ 4

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

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

Ответ 5

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

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