jquery time slot booking calendar

您好,jQuery是一款常用的JavaScript库,可以方便地操作HTML文档和处理事件。如果您需要创建一个时间段预定日历,可以使用jQuery和一些其他的库来实现。

下面是一个简单的示例代码,可以为您提供一个基本的时间段预定日历:

HTML代码:

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

JavaScript代码:

$(document).ready(function() {
  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    editable: true,
    selectable: true,
    selectHelper: true,
    events: [
        title: 'Business Meeting',
        start: '2023-03-06T10:30:00',
        end: '2023-03-06T12:30:00'
        title: 'Lunch',
        start: '2023-03-07T12:00:00'
        title: 'Meeting',
        start: '2023-03-12T14:30:00'
        title: 'Happy Hour',
        start: '2023-03-12T17:30:00'
        title: 'Dinner',
        start: '2023-03-12T20:00:00'
        title: 'Birthday Party',
        start: '2023-03-13T07:00:00'

这段代码使用了FullCalendar库来创建日历。通过在events数组中定义活动的开始和结束时间,我们可以在日历上显示这些活动。此外,editableselectableselectHelper属性可使日历可编辑和选择时间段。

您可以根据自己的需求调整代码中的参数和样式来定制日历。希望这个例子能为您提供一些帮助。

  •