Jquery Calendar是一款非常好用的預(yù)約插件，它可以幫助我們方便地管理預(yù)約信息，讓我們更加高效地安排時間。

首先，我們需要引入Jquery和Jquery Calendar的相關(guān)文件：

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery-ui-timepicker-addon.js"></script>

然后，我們需要在頁面中添加一個用于顯示預(yù)約信息的div區(qū)域：

<div id="calendar"></div>

接下來，我們可以使用Jquery Calendar的API來配置預(yù)約信息的顯示格式：

$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'Business Meeting',
start: '2022-01-15T10:30:00',
end: '2022-01-15T12:30:00'
},
{
title: 'Lunch',
start: '2022-01-16T12:00:00'
}
//...
]
});

其中，header選項用于定義日歷的頭部，在左側(cè)顯示上一個月和下一個月的按鈕，中間顯示當(dāng)前月份的標題，右側(cè)顯示日、周、日程等視圖切換按鈕。editable選項用于開啟編輯模式，允許用戶創(chuàng)建、拖拽和調(diào)整預(yù)約事件。eventLimit選項用于限制每個日期顯示的事件數(shù)量，如果超過限制，則會顯示“more”鏈接。events選項用于設(shè)置默認的預(yù)約事件，包括標題、開始時間、結(jié)束時間等信息。

最后，我們需要用一些回調(diào)函數(shù)來對預(yù)約事件進行處理，比如創(chuàng)建、修改和刪除事件：

$('#calendar').fullCalendar({
 …
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:');
var eventData;
if (title) {
eventData = {
title: title,
start: start,
end: end
};
$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
}
$('#calendar').fullCalendar('unselect');
},
// This allows things to be dragged and dropped onto the calendar
// accept: function(event, element) {
//   // if(event.allDay && !confirm("Are you sure you want to add this event?")) {
//   //     return false;
//   // }
//   return true;
// },
droppable: true,
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
eventClick: function(event) {
// opens events in a popup window
$('#dialog').dialog({
title: event.title,
modal: true,
buttons: {
"Edit": function() {
// change the time (0 seconds)
event.start = event.start.add(1, 'days');
$('#calendar').fullCalendar('updateEvent', event);
$(this).dialog('close');
},
"Delete": function() {
$('#calendar').fullCalendar('removeEvents', event._id);
$(this).dialog('close');
}
}
});
},
eventResize: function(event, delta, revertFunc) {
alert(event.title + " end is now " + event.end.format());
if (!confirm("is this okay?")) {
revertFunc();
}
}
});

以上就是關(guān)于Jquery Calendar預(yù)約的基本使用方法，如果你想深入了解，可以參考官方文檔或者其他教程。