首页 文章

FullCalendar上的动态时间段

提问于
浏览 次
1

我正在尝试 Build 一个完整日历的在线活动预订系统 . 我使用与用户绑定的事件/日历，每个用户都有自定义slotMinutes，minTime，maxTime . 这些值从DB中提取并插入隐藏的表单中 .

测试我在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 . 特别是事件处理代码 .

javascript php jquery fullcalendar

2 回答

  • 1

    Just an update:

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

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

    此致，Pravin B.

    回复于
  • 0

    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);
    }
});
});
    回复于

相关问题