Question

我正在尝试建立一个带有完整日历的在线活动预订系统。我使用与用户绑定的事件/日历，每个用户都有自定义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]{ '&#8212;'[ 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（）或plain .val（），我知道通过警告vars它正在正确读取它们，但是无论我放入什么，日历都不会渲染超过1小时它似乎正确地设定了起始时间，但没有别的。如果我对时间进行硬编码，它就会按计划运行。

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

修改

从$（document）.ready中删除了一些代码用于calarity。特别是事件处理代码。

Answer 1

只是更新：

在最新版本V2中'slotMinutes'更改为'slotDuration'，并且slotDuration的值可以设置为'00：15：00'15分钟左右。

默认值为：'00：30：00'（30分钟）

此致，Pravin B

Answer 2

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]{ '&#8212;'[ dd] MMM yyyy}",
        day: 'dddd dd MMM yyyy'  },
    //time slot - from practitioner
    slotMinutes: parseInt(timeslot),
    allDaySlot: false,
    editable: true,
    selectable: true,
    //starting time (hour) - from practitioner
    minTime: parseInt(starttime),
    //closing time (hour) - from practitioner
    maxTime: parseInt(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);
    }
});
});

FullCalendar上的动态时间段

2 个答案: