javascript - 从日历中删除选定的事件

标签 javascript jquery spring-mvc fullcalendar freemarker

我正在使用 JQuery Full Calendar 和 Spring MVC。

您好, 我做了一个类似 that 的演示.

目标:我需要当用户点击她/他已经插入的事件时,会出现一个对话框,让他/她能够删除该事件或取消。

问题:现在每当用户点击任何一天时,都会出现一个对话框,允许用户输入该事件的标题,然后用户点击“确定”以保存该事件。

自由标记: 自由标记:

<script type="text/javascript">
    var resourceVacation;

    function censor(censor) {
        return (function() {
            var i = 0;
            return function(key, value) {
                if (i !== 0 && typeof(censor) === 'object' && typeof(value) == 'object' && censor == value)
                    return '[Circular]';                   

                ++i; // so we know we aren't using the original object anymore

                return value;
            }
        })(censor);
    }


    function doAjax() {

        $.each(resourceVacation, function(index) {
            var tmpDate = resourceVacation[index].start;
            tmpDate.setHours(tmpDate.getHours() - tmpDate.getTimezoneOffset() / 60);
            resourceVacation[index].start=tmpDate;

        });
//        var arrays = [
//            {"id":111,"title":"event1","start":"2012-04-15T22:00:00.000Z","url":"http://yahoo.com/"}
//        ];
//        var objects = {"id":111,"title":"event2","start":"2012-04-16T22:00:00.000Z","url":"http://yahoo2.com/"};
//
//        arrays.push(objects);
        var test = JSON.stringify(resourceVacation, censor(resourceVacation));
        var x = test;
        $.ajax(
        {
            url:"[@spring.url '/vacation/saveResourceVacation'/]",
            type: "POST",
            data :x ,
            dataType: "json",
            contentType: "application/json"
        });
    }


    $(document).ready(function() {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        $.getJSON('[@spring.url '/vacation/loadResourceVacation'/]', function (data) {
            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 title = prompt('Event Title:');

                            if (title) {
                                start.setHours(start.getHours() - start.getTimezoneOffset() / 60);
//                                var dat=$.fullCalendar.formatDate( start, "yyyy/MM/dd")


                                var newVacation= {id:133,title:'title',start:start,url: 'title'};
                                resourceVacation.push(newVacation);
                                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('Event: ' + calEvent.title);
            alert('start: ' + calEvent.start);             
        }

                editable: true,
                events:data
            });
            resourceVacation = data;
        });
    });


</script>

Controller :

     @RequestMapping(value = "/vacation/loadResourceVacation", method = RequestMethod.GET)
        public
        @ResponseBody
        String loadResourceVacation(HttpServletResponse response) throws Exception {


            //Here I build my vacationFormBean
            List<VacationFormBean> vacationFormBeanList= buildVacationFormBean();
            // Convert to JSON string.
            String json = new Gson().toJson(vacationFormBeanList);

            // Write JSON string.
            response.setContentType("application/json");
            response.setCharacterEncoding("UTF-8");       

        return json;
    }

    @RequestMapping(value = "/vacation/saveResourceVacation", method = RequestMethod.POST)
    public
    @ResponseBody
    void saveResourceVacation(@RequestBody String jsonString, Principal principal) throws Exception {
        List<String> resourceVacations = extractVacationDatesFromJsonObject(jsonString);

    }

VacationFormBean:

public class VacationFormBean {
    int id; // (With Setter & Getter)
    String title; // (With Setter & Getter)
    String start;  // (With Setter & Getter)
    String url; // (With Setter & Getter)
}

我需要这样的东西:

enter image description here

======================更新======================== =

作为 domi27 推荐的结果,我添加了点击事件。 请查看 freemarker 更新。 我添加了一个使用的 java 脚本方法:http://arshaw.com/fullcalendar/docs/event_data/removeEvents/

新的 JS 方法:

   $('#calendar').fullCalendar('removeEvents', 1);

此方法与最初从 Controller 加载的事件完美配合。 但是,每当我尝试使用相同的方法删除刚刚添加的新事件时,什么都没有发生。 当我为我创建的新事件触发“选择事件”时,我得到它的 ID“未定义”。

正如我在我的 freemarker 中提到的,这些行是我用来构建新事件对象的行,我将其附加到列表中。

var newVacation = {id:'133',title:'title',start:start,url: 'title'};
                                    resourceVacation.push(newVacation);

当我调试我的脚本时,我观察到从 Controller 加载的对象与我在用户添加新事件时创建的新对象之间存在差异。

这是我启动日历时从 Controller 获得的旧对象: enter image description here

这是我插入新事件后得到的新对象:

enter image description here

最佳答案

你可以这样实现它:

  1. 获取事件点击
  2. 显示有关(如何)删除此事件的信息
  3. 调用ajax请求在后端处理事件删除
  4. 从日历前端删除事件

1) 首先在这里描述:http://arshaw.com/fullcalendar/docs/mouse/eventClick/

2) 最简单的 JS: confirm("真的要删除这个事件?")

3) 像保存预订一样通过 jQuery 调用删除操作

4) 通过完整日历的“removeEvents”方法删除此事件:http://arshaw.com/fullcalendar/docs/event_data/removeEvents/

这是一个简短且非常基本的示例:

eventClick: function(calEvent, jsEvent, view) {
    /**
     * calEvent is the event object, so you can access it's properties
     */
    if(confirm("Really delete event " + calEvent.title + " ?")) {
        // delete event in backend
        jQuery.post(
            "/vacation/deleteEvent"
            , { "id": calEvent.id }
        );
        // delete in frontend
        calendar.fullCalendar('removeEvents', calEvent.id);
    }
}

关于javascript - 从日历中删除选定的事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10183667/

相关文章:

javascript - 将加载的内容限制在 div 中

Hibernate - 更新与级联类型 all-delete-orphan 映射的集合的正确方法

spring - 使用@RequestMapping 和不使用方法的区别

javascript - iOS 版 Cordova 加载带有间隙 ://ready iframe 的白页

javascript - 保存到变量时循环获取上一个数字

javascript - jquery ui datepicker - 如何在一个日期选择器中设置两个最小/最大日期限制?

java - Spring 4 - 资源映射 - 未找到处理程序方法

javascript - 从 react-router-bootstrap 使用 LinkContainer 时测试失败

Javascript 的 "new Date()"返回 '2011-02-1' 和 '2011-02-01' 的不同日期

javascript - Angular ng-repeat 过滤器在搜索后取消选中所有复选框