在 Fullcalendar POPUP 上插入、更新、删除事件操作并显示插入的事件

Question

你好朋友我需要制作一个 web 应用程序，我必须在两个人之间预约日程所以我使用 Fullcalendar 打开一个弹出窗口有一些字段，如描述、开始时间和结束时间。我想为每个事件设置与FUllcalendar Selectable Demo start:start(variable from mycode) end:end 我不知道我的方向是否正确所以请帮帮我 数据库上的事件自动更新的 IF 更改 我需要在日历中显示

更新代码：

JavaScript：

     $(document).ready(function() {
    var count=0;
    var liveDate=new Date();
    var dat = new Date();
    var d = dat.getDate();
    var m = dat.getMonth();
    var y = dat.getFullYear();
    $.getJSON("<?php echo base_url(); ?>names",function(data){
        var select = $('#AgentName'); //combo/select/dropdown list
        if (select.prop) {
            var options = select.prop('options');
        }
        else {
            var options = select.attr('options');
        }
        var calendar = $('#calendar').fullCalendar({

            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                $("#popup").show();
                $("#eventName").focus();
                $("#submit").click(function(){
                    var title=$("#eventName").val();
                    if (title) {
                        calendar.fullCalendar('renderEvent',{
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                        true // make the event "stick"
                    );
                        var dataString={};
                        dataString['eventName']=title;
                        dataString['startTime']=$.fullCalendar.formatDate(start, "yyyy-MM-dd H:mm:ss");
                        dataString['endTime']=$.fullCalendar.formatDate(end, "yyyy-MM-dd H:mm:ss");
                        $.ajax({
                            type : 'POST',
                            dataType : 'json',
                            url : '<?php echo base_url(); ?>data/insert',
                            data: dataString,
                            success: function(data) {
                                alert("Data Insert SuccessFully");
                                if(data.success)
                                    alert("Data Insert SuccessFully");
                            }
                        });
                    }
                    calendar.fullCalendar('unselect');
                    calendar.fullCalendar('refetchEvents');
                    $("#popup").hide();
                });
            },
            editable: true,
            viewDisplay: function(view) {
                if(view.name=="month" && count==0){
                    var a=$(".fc-day-number").prepend("<img src='/assets/images/add.jpg' width='20' height='20'style='margin-right:80px;' name='date'>");                                    
                    count++;
                }
            },
            eventSources: [
                {
                    url: '<?php echo base_url(); ?>data/read', // use the `url` property
                    color: '#65a9d7',    // an option!
                    textColor: '#3c3d3d'  // an option!
                }                    
            ]
        });
    });

---

CSS：

<style>
    body {
        text-align: left;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    }
    #calendar {
        width: 70%;
        margin: 0 auto;
        text-align:left;
    }
    #popup{
        width: 70%;
        height: auto;
        position: absolute;
        background-color: rgba(255,255,255,0.8);
        border-color: #0033ff;
        border-style: solid;
        display:block;
        left: 400px;
        top: 300px;
        display: none;
        cursor: pointer;
    }
    #detail{
        background-color: #000;
    }
    #popup input{
        width:480px;
        border-radius: 5px;
    } 
    #popup table label{
        font-size: 100px;
    }
    #startTime{
        background-image: url('/assets/images/calendar.png');
        background-position:right center;
        background-repeat:no-repeat;
    }
    #endTime{
        background-image: url('/assets/images/calendar.png');
        background-position:right center;
        background-repeat:no-repeat;
    }
</style>

---

HTML：

<div class="wrapper">
<div id='calendar'></div>
<div id="detail"></div>
<div id="popup"> 
    <form name="addData" id="addData" action="" method="post">
    <table>
        <tr>
            <td><lable for="eventName">Description:</lable></td>
            <td><input name="eventName" id="eventName"></td>
        </tr>
        <tr>
            <td><lable for="startTime">Start: </td>
            <td><input type="text" id="startTime"name="startTime"/></td>
        </tr>
        <tr>
            <td><lable for="endTime">End: </td>
            <td><input type="text" id="endTime"name="endTime"/></td>
        </tr>
        <tr>
            <td align="left"colspan="2">
                <button type="submit"class="k-button" name="submit" id="submit">Submit</button>
                <button type="reset" name="reset" class="k-button" id="reset">Reset</button>
                <button type="submit"class="k-button" name="cancel" id="cancel">Cancel</button>
            </td>
        </tr>
    </table>
    </form>
    <p><tt id="results"></tt></p>
</div>
</div>

Answer 1

您可以在dayClick 事件中显示对话框：

dayClick: function(date, allDay, jsEvent, view) {
    $('#dialog').dialog('open');
}

然后格式化开始和结束日期并传递给您的表单