Question

我希望通过点击确认对话框的事件从我的完整日历中删除一个事件。我也希望使用一个表单（带有文本框）将值保存到我的日历中。我已经阅读了文档，但我不知道如何实现，在何处放置以及如何使用以下函数：

.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>

Answer 1

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
}

就是这样，希望这会奏效。

Fullcalendar删除一个事件

1 个答案: