javascript - FullCalendar 上的动态时段

Question

我正在尝试建立一个具有完整日历的在线事件预订系统。我使用与用户绑定(bind)的事件/日历，每个用户都有自定义的 slotMinutes、minTime、maxTime。这些值从数据库中提取并插入到隐藏表单中。

为了测试，我修复了 php 中表单中的值。

<div id="practitioner-details hidden">
    <form action="" id="practitioner-details"> 
        <input type="hidden" name="name" value="Dr Demo"/>  
        <input type="hidden" name="timeslot" value="15"/>  
        <input type="hidden" name="starthour" value="09"/>  
        <input type="hidden" name="endhour" value="17"/>  
    </form>
</div>

我使用 jquery 从文档就绪的输入字段中读取值，如下所示:

$(document).ready(function() {
    var timeslot = $('input[name=timeslot]').val().toString();
    var starttime = $('input[name=starthour]').val().toString();
    var endtime = $('input[name=endhour]').val().toString();
// Activate Current Calendar Link
$('.links #' + $('#practitioner').val()).addClass('active');

var defaultViewCal = 'agendaWeek';

// Set Event Source URL
$('#fullCalendar').attr('events', "/calendar/view/" + $('.links a.active').attr('id'));


// Initiate Full Calendar   
$('#fullCalendar').fullCalendar({
    header: {
        //view names are: month, agendaWeek, agendaDay
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultView: defaultViewCal,
    firstDay: 1,
    columnFormat: {
    month: 'dddd',
    week: 'dddd \n dd/MM',
    day: 'dddd dd MMM yyyy' },
    titleFormat: {
        month: 'MMMM yyyy',                            
        week: "dd MMM[ yyyy]{ '—'[ dd] MMM yyyy}",
        day: 'dddd dd MMM yyyy'  },
    //time slot - from practitioner
    slotMinutes: timeslot,
    allDaySlot: false,
    editable: true,
    selectable: true,
    //starting time (hour) - from practitioner
    minTime: starttime,
    //closing time (hour) - from practitioner
    maxTime: endtime,
    //fetch time from practitioner details
    lazyFetching: true,
    // Set Height to Prevent Scroll Bars in day and week view
    viewDisplay: function (view) {
        var h;
        if (view.name == "month") {
            h = NaN;
        }
        else {
            h = 2100;  
        }

        $('#fullCalendar').fullCalendar('option', 'contentHeight', h);
    }
});
});

无论我使用 .val().toString() 还是普通的 .val()，我都通过提醒变量知道它正在正确读取它们，但无论我输入什么，日历都不会渲染超过 1 小时. 似乎正确设置了开始时间，但没有其他。如果我对时间进行硬编码，它就会按计划工作。

如果我尝试从表单中读取值，我不知道为什么它会死掉。

编辑

从 $(document) 中删除了一些代码。准备好进行说明。特别是事件处理代码。

Answer 1

只是更新:

在最新版本 V2 中，“slotMinutes”更改为“slotDuration”，slotDuration 的值可以设置为“00:15:00”，持续 15 分钟，依此类推。

默认值为:“00:30:00”(30 分钟)

问候，
Pravin B