Javascript 完整日历删除事件

Javascript 完整日历删除事件,javascript,html,fullcalendar,Javascript,Html,Fullcalendar,我希望通过单击确认对话框时显示的事件从我的完整日历中删除事件。我还希望使用一个表单(带有文本框)将值保存到日历中。我已经阅读了文档,但不知道如何实现、在何处放置以及如何使用以下功能: .fullCalendar( 'removeEventSource', source ) 日历几乎完全实现,只需要最后几个功能 下面是代码,只需将其复制并粘贴到记事本中即可运行并查看 <!DOCTYPE html> <html> <head> <link href='..

我希望通过单击确认对话框时显示的事件从我的完整日历中删除事件。我还希望使用一个表单(带有文本框)将值保存到日历中。我已经阅读了文档,但不知道如何实现、在何处放置以及如何使用以下功能:

.fullCalendar( 'removeEventSource', source )
日历几乎完全实现,只需要最后几个功能

下面是代码,只需将其复制并粘贴到记事本中即可运行并查看

<!DOCTYPE html>
<html>
<head>
<link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../jquery/jquery-1.9.1.min.js'></script>
<script src='../jquery/jquery-ui-1.10.2.custom.min.js'></script>
<script src='../fullcalendar/fullcalendar.min.js'></script>
<script>

    $(document).ready(function() {

var equip = document.getElementById('equipment').value;
var size = document.getElementById('size').value;
var surface = document.getElementById('surface').value;
var orderNumber = document.getElementById('orderNumber').value;
var responsible = document.getElementById('responsible').value;

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        var calendar = $('#calendar').fullCalendar({

            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            selectable: true,
            selectHelper: true,
            select: function(start, end, allDay) {
                var equipment = document.getElementById('equipment');
                var title = prompt('Title');
                if (title && surface) {
                    calendar.fullCalendar('renderEvent',
                        {

                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay,
                            description: "ga",
                            backgroundColor: 'red'
                        },

                        true // make the event "stick"
                    );
                }
                else if(title){
                    calendar.fullCalendar('renderEvent',
                        {

                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },

                        true // make the event "stick"
                    );
                }
                calendar.fullCalendar('unselect');
            },

            eventClick: function(calEvent, jsEvent, view) {

                alert("Equipment: " + equip + "\nSize: " + size + 
                "\nRequired on Surface: " + surface + 
                "\nWork Order Number: " + orderNumber + 
                "\nResponsible: " + responsible);
                var r=confirm("Press a button");
                if (r==true)
                  {

                  }
                else
                  {
                  x="You pressed Cancel!";
                  }
                // change the border color just for fun
                $(this).css('border-color', 'red');

            },
//          eventMouseover: function(calEvent, jsEvent, view) {
//              if(surface)
//              {
//              // change the border color just for fun
//                  $(this).css('background-color', 'red');
//              }

//          },

            editable: true,
            events: [
                {
                    title: 'Test event',
                    start: new Date(y, m, 28),
                    color: 'yellow',
                    url: 'http://google.com/'
                }
            ]

    });

    });

</script>
<style>

    body {
        margin-top: 40px;
        text-align: left;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }

    #calendar {
        width: 1000px;
        margin: 0 auto;
        }

</style>
</head>
<body>
<align="right">

<FORM>
Equipment: <input type='text' id='equipment' /> <br />
Size: <input type='text' id='size' /> <br />
Required on Surface: <input type='text' id='surface' /> <br />
Work Order Number: <input type='text' id='orderNumber' /> <br />
Responsible: <input type='text' id='responsible' /> <br />
<div id='calendar'></div>
<FORM>
</body>
</html>

$(文档).ready(函数(){
var equipm=document.getElementById('equipment')。值;
var size=document.getElementById('size')。值;
var surface=document.getElementById('surface').value;
var orderNumber=document.getElementById('orderNumber')。值;
var responsible=document.getElementById('responsible')。值;
变量日期=新日期();
var d=date.getDate();
var m=date.getMonth();
var y=date.getFullYear();
var calendar=$(“#calendar”).fullCalendar({
标题:{
左:“上一个,下一个今天”,
中心:'标题',
右图:“月,agendaWeek,agendaDay”
},
是的,
selectHelper:对,
选择:功能(开始、结束、全天){
var设备=document.getElementById(“设备”);
变量标题=提示(“标题”);
if(标题和表面){
日历。完整日历('renderEvent',
{
标题:标题,,
开始:开始,
完:完,,
全天,
描述:“ga”,
背景颜色:“红色”
},
true//使事件“持续”
);
}
其他如果(标题){
日历。完整日历('renderEvent',
{
标题:标题,,
开始:开始,
完:完,,
全天
},
true//使事件“持续”
);
}
日历。完整日历(“取消选择”);
},
eventClick:函数(calEvent、jsEvent、view){
警报(“设备:+Equipm+”\n尺寸:+size+
“\n表面要求:”+表面+
“\n工作订单号:”+订单号+
“\n负责任:”+负责任);
var r=确认(“按下按钮”);
如果(r==true)
{
}
其他的
{
x=“您按了取消!”;
}
//更改边框颜色只是为了好玩
$(this.css('border-color','red');
},
//eventMouseover:函数(calEvent、jsEvent、view){
//如果(表面)
//              {
////更改边框颜色只是为了好玩
//$(this.css('background-color','red');
//              }
//          },
是的,
活动:[
{
标题:“测试事件”,
开始日期:新日期(y、m、28),
颜色:'黄色',
网址:'http://google.com/'
}
]
});
});
身体{
边缘顶端:40px;
文本对齐:左对齐;
字体大小:14px;
字体系列:“Lucida Grande”,Helvetica,Arial,Verdana,无衬线;
}
#历法{
宽度:1000px;
保证金:0自动;
}
设备:
大小:
表面要求:
工单编号:
负责人:

就这样,希望这能奏效。

不久前我回答了类似的问题。检查此项:。可能也适用于这里。我以前见过你的小提琴,但是它使用日期选择器,不允许在一次约会中发生多个事件。好吧,它不显示如何实现你想要的吗?说得太快了,我想我很快会再评论
var r=confirm("Press a button");

if (r==true)
{
    deleteevent(eventid,startdatetime,enddatetime)//when r is true write a function to make a server call to delete the event and save it in DB
    $('#calendar').fullCalendar('removeEvents');// remove events
    $('#calendar').fullCalendar('addEventSource', pEvents);//add events
    $('#calendar').fullCalendar('rerenderEvents');// re render the events
}