Javascript 使用EventClick返回数据完整日历

大家下午好，我需要帮助，我正在使用Fullcalendar创建一个简单的日历，我已经可以创建事件并将它们保存在DB中并显示在日历中，现在我需要的是，当单击事件时，会打开一个弹出窗口（模式），显示事件的数据以及执行此数据更新的选项，当点击打开的事件时，我已经使用了模式，但我不知道如何在BD中的相应字段中显示保存的数据。以下是我的代码：

控制器（calendar2.php）：

class Calendar2扩展CI_控制器{
函数_u构造（）{
父项：：_构造（）；
$this->load->model（'calendar2Model'，'model'，TRUE）；
} 
公共职能指数（）{
$this->template->set（'title'，'Agenda'）；
$this->template->load（'layout'，'calendar_v.php'）；
//$this->load->view（'calendar_v.php'）；
}
公共函数getEvents（）{
$data=$this->model->get_events（）；
echo json_编码（$data）；
}
公共函数updateEvents（）{
$param['id']=$this->input->post（'id'）；
$param['inicio']=$this->input->post（'inicio'）；
$param['fim']=$this->input->post（'fim'）；
$r=$this->model->updateEvents（$param）；
echo json_编码（$r）；
}
公共函数deleteEvents（）{
$id=$this->input->post（'id'）；
$r=$this->model->deleteEvents（$id）；
echo json_编码（$r）；
}
公共功能新事件（）{
$this->template->set（'title'，'Nova tarefa'）；
$this->load->library（'form_validation'）；
/*定义为一个错误的标记*/
$this->form_validation->set_error_分隔符（“”，）；
/*定义为第validação段*/
$this->form_validation->set_规则（'nomevento'，'Nome'，'required | max_length[40]）；
$this->form_validation->set_rules（'inicio'，'Data de inicio'，'trim | required | max_length[60]）；
$this->form_validation->set_规则（'importancia'、'Prioridade'、'trim | required | max_length[60]）；
$this->form_validation->set_rules（'descripaoevento'，'descripaoevento'，'trim | required | max_length[150]）；
/*执行有效的控制指标*/
如果（$this->form\u validation->run（）==FALSE）{
$this->template->load（'layout'，'clients_inserir.phtml'）；
/*森诺，卡索成功：*/
}否则{
/*福尔马里奥教堂（visão）*/
$data['nomeEvento']=$this->input->post（'nomeEvento'）；
$data['inicio']=$this->input->post（'inicio'）；
$data['fim']=日期（'Y-m-d'，标准时间（$this->input->post（'inicio'）。+1天））；
$data['user']=$this->input->post（'user'）；
$data['importancia']=$this->input->post（'importancia'）；
$data['importancia']=$this->input->post（'descripaoevento'）；
/*Chama a funço inserir do modelo*/
如果（$this->model->inserir（$data））{
$this->session->set_flashdata（'mensage'，'registro salvo com successo'）；
重定向（“客户”）；
}否则{
$this->session->set_flashdata（'mensage'，'registro nao salvo'）；
}
}
}
}

模态（calendar2model.php）：

---

您可以添加一个
eventRender
并附加一个onClick侦听器，如下所示：

$('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
      },
      [cut]
      eventRender: function (event, element, view) {
            element.attr('href', 'javascript:void(0);');
            element.click(function() {
                    $.get( "yoururl/" + event.id, function( data ) {
                        //Clone object in order to not update the original event (if user press cancel)
                        var eventClone = deepClone(event);
                        eventClone.start = data.myStart;
                        eventClone.end = data.myEnd;
                        eventClone.title = data.myTitle;
                        openDialog(eventClone);
                    });
                });
        }
      [cut]
});

function openDialog(event){
    $('#myForm').modal('show');
    $('#myModalLabel').html(event.title);
    $('#myId').val(event.id);
    [cut]
}

因此，在“保存”按钮（在模式对话框中）上，您可以将数据发送到服务器，保存到数据库，然后刷新日历，如下所示：

$('#calendar').fullCalendar( 'refetchEvents' );

我希望这很清楚，再见。
您可以添加一个
eventRender
并附加一个onClick侦听器，如下所示：

$('#calendar').fullCalendar({
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,basicWeek,basicDay'
      },
      [cut]
      eventRender: function (event, element, view) {
            element.attr('href', 'javascript:void(0);');
            element.click(function() {
                    $.get( "yoururl/" + event.id, function( data ) {
                        //Clone object in order to not update the original event (if user press cancel)
                        var eventClone = deepClone(event);
                        eventClone.start = data.myStart;
                        eventClone.end = data.myEnd;
                        eventClone.title = data.myTitle;
                        openDialog(eventClone);
                    });
                });
        }
      [cut]
});

function openDialog(event){
    $('#myForm').modal('show');
    $('#myModalLabel').html(event.title);
    $('#myId').val(event.id);
    [cut]
}

因此，在“保存”按钮（在模式对话框中）上，您可以将数据发送到服务器，保存到数据库，然后刷新日历，如下所示：

$('#calendar').fullCalendar( 'refetchEvents' );

我希望这是清楚的，再见。
您可以添加以下代码：

  var calendar = $('#calendar').fullCalendar({
     buttonText: {
        prev: '<i class="icon-chevron-left"></i>',
        next: '<i class="icon-chevron-right"></i>'
    },

    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    events: jQuery.parseJSON(data),

    disableDragging: true, 
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar !!!
    drop: function(date, allDay) { // this function is called when something is dropped

        // retrieve the dropped element's stored Event Object
        var originalEventObject = $(this).data('eventObject');
        var $extraEventClass = $(this).attr('data-class');


        // we need to copy it, so that multiple events don't have a reference to the same object
        var copiedEventObject = $.extend({}, originalEventObject);

        // assign it the date that was reported
        copiedEventObject.start = date;
        copiedEventObject.allDay = allDay;
        if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];

        // render the event on the calendar
        // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
        $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

        // is the "remove after drop" checkbox checked?
        if ($('#drop-remove').is(':checked')) {
            // if so, remove the element from the "Draggable Events" list
            $(this).remove();
        }

    }
    ,
    selectable: true,
    selectHelper: true,
    select: function(start, end, allDay) {

        bootbox.prompt("New Event Title:", function(title) {
            if (title !== null) {
                calendar.fullCalendar('renderEvent',
                    {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay
                    },
                    true // make the event "stick"
                );
            }
        });


        calendar.fullCalendar('unselect');

    }
    ,
    eventClick: function(calEvent, jsEvent, view) {

        var form = $("<form class='form-inline'><label>Change event name &nbsp;</label></form>");
        form.append("<input autocomplete=off type=text value='" + calEvent.title + "' /> ");
        form.append("<button type='submit' class='btn btn-small btn-success'><i class='icon-ok'></i> Save</button>");

        var div = bootbox.dialog(form,
            [
            {
                "label" : "<i class='icon-trash'></i> Delete Event",
                "class" : "btn-small btn-danger",
                "callback": function() {
                    calendar.fullCalendar('removeEvents' , function(ev){
                        return (ev._id == calEvent._id);
                    })
                }
            }
            ,
            {
                "label" : "<i class='icon-remove'></i> Close",
                "class" : "btn-small"
            }
            ]
            ,
            {
                // prompts need a few extra options
                "onEscape": function(){div.modal("hide");}
            }
        );

        form.on('submit', function(){
            calEvent.title = form.find("input[type=text]").val();
            calendar.fullCalendar('updateEvent', calEvent);
            div.modal("hide");
            return false;
        });

    }
});

var calendar=$（“#calendar”）.fullCalendar({
按钮文字：{
上一页：''，
下一步：“”
},
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
事件：jQuery.parseJSON（数据），
DisableDraging:对，
是的，
可拖放：true，//这允许将内容拖放到日历上！！！
drop:function（date，allDay）{//在删除某些内容时调用此函数
//检索已删除元素的存储事件对象
var originalEventObject=$（this.data（'eventObject'）；
var$extraEventClass=$（this.attr（'data-class'）；
//我们需要复制它，这样多个事件就不会引用同一个对象
var copiedEventObject=$.extend（{}，originalEventObject）；
//将其指定为报告的日期
copiedEventObject.start=日期；
copiedEventObject.allDay=全天；
如果（$extraEventClass）CopiedEventToObject['className']=[$extraEventClass]；
//在日历上呈现事件
//最后一个'true'参数确定事件是否“持续”(http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$（“#calendar”）.fullCalendar（'renderEvent'，copiedEventObject，true）；
//是否选中了“删除后删除”复选框？
如果（$（'#drop remove'）。是（':checked'））{
//如果是，请从“可拖动事件”列表中删除该元素
$（this.remove（）；
}
}
,
是的，
selectHelper:对，
选择：功能（开始、结束、全天）{
bootbox.prompt（“新事件标题：”，函数（标题）{
如果（标题！==null）{
日历。完整日历（'renderEvent'，
{
标题:标题,，
开始：开始，
完:完,，
全天
},
true//使事件“持续”
)
  var calendar = $('#calendar').fullCalendar({
     buttonText: {
        prev: '<i class="icon-chevron-left"></i>',
        next: '<i class="icon-chevron-right"></i>'
    },

    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    events: jQuery.parseJSON(data),

    disableDragging: true, 
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar !!!
    drop: function(date, allDay) { // this function is called when something is dropped

        // retrieve the dropped element's stored Event Object
        var originalEventObject = $(this).data('eventObject');
        var $extraEventClass = $(this).attr('data-class');


        // we need to copy it, so that multiple events don't have a reference to the same object
        var copiedEventObject = $.extend({}, originalEventObject);

        // assign it the date that was reported
        copiedEventObject.start = date;
        copiedEventObject.allDay = allDay;
        if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];

        // render the event on the calendar
        // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
        $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

        // is the "remove after drop" checkbox checked?
        if ($('#drop-remove').is(':checked')) {
            // if so, remove the element from the "Draggable Events" list
            $(this).remove();
        }

    }
    ,
    selectable: true,
    selectHelper: true,
    select: function(start, end, allDay) {

        bootbox.prompt("New Event Title:", function(title) {
            if (title !== null) {
                calendar.fullCalendar('renderEvent',
                    {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay
                    },
                    true // make the event "stick"
                );
            }
        });


        calendar.fullCalendar('unselect');

    }
    ,
    eventClick: function(calEvent, jsEvent, view) {

        var form = $("<form class='form-inline'><label>Change event name &nbsp;</label></form>");
        form.append("<input autocomplete=off type=text value='" + calEvent.title + "' /> ");
        form.append("<button type='submit' class='btn btn-small btn-success'><i class='icon-ok'></i> Save</button>");

        var div = bootbox.dialog(form,
            [
            {
                "label" : "<i class='icon-trash'></i> Delete Event",
                "class" : "btn-small btn-danger",
                "callback": function() {
                    calendar.fullCalendar('removeEvents' , function(ev){
                        return (ev._id == calEvent._id);
                    })
                }
            }
            ,
            {
                "label" : "<i class='icon-remove'></i> Close",
                "class" : "btn-small"
            }
            ]
            ,
            {
                // prompts need a few extra options
                "onEscape": function(){div.modal("hide");}
            }
        );

        form.on('submit', function(){
            calEvent.title = form.find("input[type=text]").val();
            calendar.fullCalendar('updateEvent', calEvent);
            div.modal("hide");
            return false;
        });

    }
});