Question

我正在开发一个用户使用fullcalendar创建约会的项目。用户只能在可用的时隙（30分钟）上创建约会。这些事件来自名为events_json.php的文件。我像这样包含这个文件

$(document).ready(function() {
        $myCalendar = $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'agendaWeek,agendaDay'
            },
            theme: true,
            selectable: true,
            selectHelper: true,
            height: 500,
            events:  'JSON/events_json.php',
            select: function(start, end, allDay) {
                //$('#eventStart').datepicker("setDate", new Date(start));
                /*$('#eventStart').datepicker({
                    dateFormat: 'dd-mm-yy'
                },new Date(start));
                $('#eventEnd').datepicker({
                    dateFormat: 'dd-mm-yy'
                },new Date(end));*/
                $('#calEventDialog').dialog('open');
            },
          editable: false
          });

现在事件正在显示，但我不想向用户显示，用户应该只将时间段视为已禁用，而将空闲时隙视为标题为“预订”的链接。我在文档中找到了renderEvent但无法解决它 编辑1 events_json.php正在发送这样的事件

The file is sending events like this, 
$output_arrays = array(array("title"=>"Happy Hour", "start"=>"2016-01-13T07:00:00-05:00"),
    array("title"=>"Click for Google", "start"=> "2016-09-02")
);
echo json_encode($output_arrays);

Answer 1

为了将现有事件显示为“已拍摄”，您可以处理eventDataTransform事件。

$(document).ready(function() {
    $myCalendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek,agendaDay'
        },
        theme: true,
        selectable: true,
        selectHelper: true,
        height: 500,
        events:  'JSON/events_json.php',
        eventDataTransform: function(event) //this is called once for each event returned in the JSON
        {
          event.title = "Taken";
          return event;
        },
        select: function(start, end, allDay) {
            //$('#eventStart').datepicker("setDate", new Date(start));
            /*$('#eventStart').datepicker({
                dateFormat: 'dd-mm-yy'
            },new Date(start));
            $('#eventEnd').datepicker({
                dateFormat: 'dd-mm-yy'
            },new Date(end));*/
            $('#calEventDialog').dialog('open');
        },
      editable: false
      });

N.B。你提到的“eventRender”不是一个事件，它是一种可以调用的方法，可以在客户端向日历添加新事件。这可能就是为什么它在这种情况下无法帮助你。当您希望用户预订插槽时可能会更有帮助 - 处理“选择”事件（正如您已经做的那样），然后使用renderEvent在日历上创建新约会。您可以控制添加的事件的持续时间和所有其他属性。

将事件渲染为禁用字段

1 个答案: