爱程序网

FULLCALENDAR总结

2025-01-31 16:41:51 来源: 阅读:

　　又好久没有写博客了，这段时间用到了日期控件fullcalendar，今天来做个总结，方便以后使用：

一、引入文件

1.1 引入的js文件

<script type="text/javascript" src='calendar/js/jquery.min.js'></script>
    <script type="text/javascript" src='calendar/js/jquery-ui.min.js'></script>
    <script type="text/javascript" src='calendar/js/fullcalendar.min.js'></script>

在添加新的日程时候用到了fancybox的弹出框，还使用到了ajaxForm提交表单，因此引入了这两个js

<script type="text/javascript" src='calendar/js/jquery.fancybox.js'></script>
    <script type="text/javascript" src="calendar/js/jquery.form.min.js"></script>

如果用到其他的功能，那么在加入其他的js文件即可。

1.2 引入的CSS文件

<link rel="stylesheet" type="text/css" href="calendar/css/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="calendar/css/fullcalendar.css">
    <link rel="stylesheet" type="text/css" href="calendar/css/fancybox.css">

主要的就这三个，如果有其他要求可以自己根据需求添加。

 

二、初始化

2.1 页面初始化

在jsp页面上要有一个具体的位置来显示calendar控件

<div class="col-md-9">
    <div id='calendar'></div>
</div>

2.2 JS初始化

用JQUERY选择上面的id为calendar的DIV进行fullcalendar初始化：

$(function() {
    $('#calendar').fullCalendar( {
                //options
          }）；
}）；

2.3 初始化参数

2.3.1 header

header : {
            left : 'prev,next today',
            center : 'title',
            right : 'month,agendaWeek,agendaDay'
        }

header定义日历顶部的标题和按钮,如果header设置为false，那么将不显示日历上方的标题和按钮，还可以设置的两个参数为：precYear和nextYear。

2.3.2 editable

 

　　　editable为boolean类型，决定在日历中的事件是否可以更改，例如从一个日期拖拽到另一个日期，或者修改事件时间长短。

　　   editable为true,那么事件可以同时进行日历内部拖拽和设置事件时间长短，如果设置为false，那么两者都不可以实现。

　　　如果editable为false，并且要可以设置事件拖拽，那么可以将eventStartEditable设置为true；如果editable为false，并且要可以设置事件时间长短，那么可以将eventDurationEditable设置为true。

 

editable: true,

 

2.3.3 theme

theme: true,

　　theme决定是否使用JQUERY  UI的Theme ，boolean类型，如果设置为true,在使用JQUERY UI的theme的同时还需要引入需要的其他的CSS文件。

 

 

2.3.4 dragOpacity

dragOpacity: {
            agenda: .5,
            '':.6
        },

dragOpacity表示事件拖动时候的不透明度，agenda表示对于agenda视图，’’表示其他视图。

2.3.5 eventDrop

　　eventDrop是事件从一个日期时间拖拽到另一个日期时间后的回调函数。

 

function (event,delta,revertFunc,jsEvent,ui,view) {}

 

event:包含拖拽的事件信息（名称、时间等）的事件对象；

 

delta:拖拽对象，包含事件移动的时间信息，可以有dayDelta表示事件拖拽移动的天数，minuteDelta表示移动的分钟数；

revertFunc:是一个函数，表示如果ajax请求失败，那么就把事件返回到拖拽之前的位置；

 

allDay 如果是月视图，或者是agenda视图的全天日程，此值为true,否则为false;

2.3.5.1 前台实现

/****** drag the event from a time and drop it to a different time ******/
        eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
            var url = "。。。。。";
            $.post(url,{id:event.id,days:dayDelta,minutes:minuteDelta},
                function(msg){
                    if(msg != 1){
                        alert(msg);
                        revertFunc();
                    }
            });
        },

　　使用AJAX将参数传递到后台，如果事件拖拽成功，那么久将成功后的事件的信息存储到数据库，如果失败返回给前台提示信息，并且将拖拽的事件返回到原来的位置，此处所说的拖拽是指在控件内部的拖拽，例如将一个事件从8月7号拖拽到8月10号。

2.3.5.2 后台实现

action实现：

private Integer id;
    private int days;
    private int minutes;
    /*get/set*/
    
    
    /**
     * @return "1" returns if the deploy succeed or "failed"
     * @throws IOException
     */
    public String drag() throws IOException {
        response.setContentType("text/plain");
        PrintWriter out = response.getWriter();
        
        boolean success = agendaServ.drag(id, days, minutes);
        if(success){
            out.print("1");
        } else {
            out.print("failed");
        }
        out.flush();
        out.close();
        return null;
    }

service实现：

/**
     * change the date of agenda by drag the extends to different date
     * @return
     */
    public boolean drag(Integer id, int days, int minutes) {
        long diff = days * 86400000;
        
        Agenda agenda = agendaDAO.findById(id);
        if(!agenda.isAllDay()){
            diff += minutes * 60000;
        }
        // add the changed time to start and end
        Date start = agenda.getStart();
        start.setTime(start.getTime() + diff);
        agenda.setStart(start);
        
        Date end = agenda.getEnd();
        if(end != null){
            end.setTime(end.getTime() + diff);
            agenda.setEnd(end);
        }
        // update
        return agendaDAO.update(agenda);
    }

　　在Service层中需要判断事件是否是全天事件，如果不是全天事件，那么需要将传递过来的天数和分钟数全部转换成毫秒数，原来的时间加上移动的时间才是移动之后的时间，不管是开始时间还是结束时间都需要处理，处理完成之后使用持久化层修改该事件即可。

 2.3.6 eventResize

eventResize为设置事件时间长短的回调函数；

 

eventResize函数的参数和eventDrop函数的参数一样，需要知道更改的天数和分钟数，通过AJAX请求修改事件，具体实现如下：

2.3.6.1 前台实现

 

/****** change the event duration ******/
        eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
            var url = "/wldproject/agenda/resize";
            $.post(url,{id:event.id,days:dayDelta,minus:minuteDelta},function(msg){
                if(msg != 1){
                    alert(msg);
                    revertFunc();
                }
            });
        },

 

2.3.6.2 后台实现

action实现：

    private Integer id;
    private int days;
    private int minutes;
    /*get/set*/
    
    public String resize() throws IOException {
        response.setContentType("text/plain");
        PrintWriter out = response.getWriter();
        
        boolean success = agendaServ.resize(id, days, minutes);
        if(success){
            out.print("1");
        } else {
            out.print("failed");
        }
        out.flush();
        out.close();
        return null;
    }

service实现：

/**
     * change the date of agenda by resize the extends
     * @return
     */
    public boolean resize(Integer id, int days, int minutes) {
        long diff = days * 86400000;
        
        Agenda agenda = agendaDAO.findById(id);
        if(agenda.isAllDay()){
            diff += minutes * 60000;
        }
        // add the changed time to end date without start
        Date end = agenda.getEnd();
        if(end != null){
            end.setTime(end.getTime() + diff);
        } else {
            Date start = agenda.getStart();
            end = new Date(start.getTime() + diff);
        }
        agenda.setEnd(end);
        // update
        return agendaDAO.update(agenda);
    }

 

 2.3.7 selectable　　

　　允许用户点击选中一天或者拖拽选中多天，boolean类型，设置为true时才能选中。

　　选中一天或者多天时，具有select和unselect回调函数。

2.3.8 select

 

　　selectable设置为true时，表示可以选中一天或者多天，select为此时的回调函数；

2.3.8.1 前台实现

/****** select sevral days ******/
        selectable: true,
        select: function(startDate, endDate, allDay, jsEvent, view ){
            var start = $.fullCalendar.formatDate(startDate,'yyyy-MM-dd');
            var end = $.fullCalendar.formatDate(endDate,'yyyy-MM-dd');
            if(start == end){
                end="";
            }
            var params = {
                    "action"     : "add",
                    "fromdate"     : start,
                    "todate"    : end,
                    "allDay"     : allDay,
            };
            var url = '。。。。。?' + $.param(params);
            $.fancybox({
                'type':'ajax',
                'href':url,
            });
        },

 

startDate：开始时间；

endDate:  结束时间；

allDay：  布尔类型，是否是全天事件；

 $.fullCalendar.formatDate(startDate,'yyyy-MM-dd')格式化事件的开始时间和结束时间。

　　选中一天或者多天之后进行添加事件，使用fancybox的方式弹出添加页面，弹出时需要将开始时间、结束时间等参数传递到弹出的页面上，弹出页面效果如下：

 提交表单，关闭弹出的窗口，刷新父窗口页面即可，此处使用ajaxForm异步提交表单：

//提交表单
    $("#add_form").ajaxForm({
        beforeSubmit: showRequest, //表单验证
        success: showResponse //成功返回
    });
function showRequest(){
    var events = $("#event").val();
    if(events == ""){
        alert("请输入日程内容！");
        $("#event").focus();
        return false;
    }
    if(confirm("请确定？")){
        
    } else {
        return false;
    }
}

function showResponse(responseText, statusText, xhr, $form){
    if(statusText=="success") {    
        if(responseText == "1") {
            $.fancybox.close();
            //重新获取所有事件数据
            $("#calendar").fullCalendar("refetchEvents");
        } else {
            alert(responseText);
        }
    } else {
        alert(statusText);
    }
}

2.3.8.2 后台实现

private String action;
    
    private Integer id;
    private String islong;
    private String title;
    private String allday;
    private String user;
    private String supporter;
    private String level;

    private String start;
    private String s_hour;
    private String s_minute;
    private String end;
    private String e_hour;
    private String e_minute;
    /*get/set*/
    
    private String add() throws IOException {
        boolean success = false;
        
        Agenda agenda = new Agenda();
        agenda.setTitle(title);
        agenda.setStartTime(start, allday, s_hour, s_minute);
        if(islong.equals("1")){
            agenda.setEndTime(end, allday, e_hour, e_minute);
        }
        agenda.setColor(level);
        agenda.setBoolday(allday);
        agenda.setUser(user);
        agenda.setSupporter(supporter);
        
        if(action.equals("edit")){
            agenda.setId(id);
            success = agendaServ.update(agenda);
        } else if(action.equals("add")){
            success = agendaServ.add(agenda);
        }
        if(success){
            return "1";
        }
        return "add failed!!!";
    }

之所以是修改和新增在一个方法中是因为弹出窗口是一个页面，根据传递过去的参数action的值判断是新增还是修改，弹出窗口页面如下：

<%@ page language="java" pageEncoding="utf-8"%>
<%@ page import="java.net.URLDecoder"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String basePath = request.getScheme() + "://" + request.getServerName()
            + ":" + request.getServerPort() + "/";
    // 新建还是进行修改，若未修改，获取ID
    String header = "新建事件";
    String id = "";
    String action = request.getParameter("action");
    if(action.equalsIgnoreCase("edit")){
        header = "编辑事件";
        id = request.getParameter("id");
    }
    // 事件title
    String title = request.getParameter("title");
    if(title == null){
        title = "";
    } else {
        title = URLDecoder.decode(title,"UTF-8");
    }
    // 事件开始时间
    String fromdate = request.getParameter("fromdate");
    
    // 事件结束时间----判定是否多天事件
    String todate = request.getParameter("todate");
    String endStyle = "display:none";
    String longDayStyle = "";
    String longValue = "0";
    if(todate != null && !todate.equals("")){
        endStyle = "";
        longDayStyle = "checked";
        longValue = "1";
    }
    // 全天事件判定
    String timeStyle = "display:none";
    String allDayStyle = "checked";//default all day event
    String allDay = request.getParameter("allDay");
    String dayValue = "1";
    if(allDay != null && allDay.equals("false")){// not all day event
        timeStyle = "display:";
        allDayStyle = "";
        dayValue = "0";
    }
%>
<!DOCTYPE html>
<html>
<head><base href=<%=basePath%>></head>
<body>
<div class="container" style="width:450px">
<h3 class="fancy-head"><%=header%></h3>
<form id="add_form" class="form-horizontal" action="0000" method="post">
<!-- 日程等级格式 -->
<div class="form-group has-warning">
    <label class="col-sm-3 control-label">日程等级：</label>
    <div class="col-sm-8">
        <select class="form-control" name="level">
            <option value="black">默认等级</option>
            <c:forEach var="level" items="${ levelArr }">
                   <option value="${ level.color }">${ level.name }</option>
            </c:forEach>
        </select>
    </div>
</div>
<!-- 日程内容格式 -->
<div class="form-group has-warning">
    <label for="event" class="col-sm-3 control-label">日程内容：</label>
    <div class="col-sm-8">
        <input type="text" class="form-control" name="title" 
                id="event" value="<%=title%>" placeholder="记录你将要做的一件事...">
    </div>
</div>
<!-- 计划人员 -->
<div class="form-group has-warning">
    <label for="user" class="col-sm-3 control-label">计划人员：</label>
    <div class="col-sm-8">
        <select class="form-control" name="user">
            <c:forEach var="user" items="${ userArr }">
                   <option>${user.name}</option>
            </c:forEach>
            <option>其他</option>
        </select>
    </div>
</div>
<!-- 提交人员 -->
<div class="form-group has-warning">
    <label for="supporter" class="col-sm-3 control-label">提交人员：</label>
    <div class="col-sm-8">
        <select class="form-control" name="supporter">
            <c:forEach var="user" items="${ userArr }">
                   <option>${ user.name }</option>
            </c:forEach>
            <option>其他</option>
        </select>
    </div>
</div>
<!-- 开始时间格式 -->
<div class="form-group has-warning">
    <label for="start" class="col-sm-3 control-label">开始时间：</label>
    <div class="col-sm-8">
        <input type="text" class="date datepicker" name="start" value="<%=fromdate%>">
        <span id="sel_start" style="<%=timeStyle%>">
            <select name="s_hour">
                <c:forEach var='hour' begin='00' end='23'>
                    <option>${hour}</option>
                </c:forEach>
            </select>
            <label>时</label>
            <select name="s_minute">
                <option>00</option>
                <c:forEach var='minute' begin='10' end='50' step='10'>
                    <option>${minute}</option>
                </c:forEach>
            </select>
            <label>分</label>
        </span>
    </div>
</div>
<!-- 结束时间格式 -->
<div class="form-group has-warning" id="p_endtime" style="<%=endStyle%>">
    <label for="end" class="col-sm-3 control-label">结束时间：</label>
    <div class="col-sm-8">
        <input type="text" class="date datepicker" name="end" value="<%=todate%>">
        <span id="sel_end" style="<%=timeStyle%>">
            <select id="e_hour" name="e_hour">
                <c:forEach var='hour' begin='00' end='23'>
                    <option>${hour}</option>
                </c:forEach>
            </select>
            <label for="e_hour">时</label>
            <select id="e_minute" name="e_minute">
                <option>00</option>
                <c:forEach var='minute' begin='10' end='50' step='10'>
                    <option>${minute}</option>
                </c:forEach>
            </select>
            <label for="e_minute">分</label>
        </span>
    </div>
</div>
<!-- 日程类型格式 -->
<div class="form-group has-warning">
    <label for="type" class="col-sm-3 control-label">日程类型：</label>
    <div class="col-sm-8">
        <div class="checkbox">
            <label><input type="checkbox" id="isallday" <%=allDayStyle%>>全天日程</label>
            <label><input type="checkbox" id="isend" <%=longDayStyle%>>多天日程</label>
        </div>
    </div>
</div>
<!-- 按钮组格式 -->
<div class="form-group btn-action">
    <div class="col-sm-3">
    <% 
        String okstr = "确定";
        if(action.equalsIgnoreCase("edit")){
            okstr = "修改";
    %>
        <input type="button" class="btn btn-danger" id="del_event" value="删除">
    <%}%>
    </div>
    <div class="col-sm-8">
        <input type="submit" class="btn btn-success" value="<%=okstr%>"> 
        <input type="button" class="btn btn-default" value="取消" onClick="$.fancybox.close()">
    </div>
</div>
<!-- hidden fields used to submit -->
<div class="form-group">
    <input type="hidden" id="eid" name="id" value="<%=id%>">
    <input type="hidden" name="action" value="<%=action%>">
    <input type="hidden" id="allday" name="allday" value="<%=dayValue%>">
    <input type="hidden" id="islong" name="islong" value="<%=longValue%>">
</div>
</form>
</div>
</body>
<script type="text/javascript">
$(function(){
    /**********时间控件  time control************/
    $(".datepicker").datepicker({
        //regional: "zh-CN",
        dateFormat:"yy-mm-dd",
        timeFormat: 'hh:mm',
        stepHour: 1,
        stepMinute: 10,
    });
    $("#isallday").click(function(){
        if($("#sel_start").css("display")=="none"){
            // all day event
            $("#sel_start,#sel_end").show();
            $("#allday").val("0");
        } else{
            // not an all day event
            $("#sel_start,#sel_end").hide();
            $("#allday").val("1");
        }
    });
    
    $("#isend").click(function(){
        if($("#p_endtime").css("display")=="none"){
            $("#islong").val("1");
            $("#p_endtime").show();
        } else{
            $("#islong").val("0");
            $("#p_endtime").hide();
        }
        $.fancybox.resize();//调整高度自适应
    });
    
    //提交表单
    $("#add_form").ajaxForm({
        beforeSubmit: showRequest, //表单验证
        success: showResponse //成功返回
    });
    
    //删除事件
    $("#del_event").click(function(){
        if(confirm("您确定要删除吗？")){
            var eid = $("#eid").val();
            var url = "。。。。。";
            $.post(url,{id:eid},function(msg){
                if(msg == '1'){//删除成功
                    alert("事件删除成功");
                    $.fancybox.close();
                    //从日程视图中删除该事件
                    $("#calendar").fullCalendar("removeEvents",eid);
                } else{
                    alert(msg);    
                }
            });
        }
    });
});

function showRequest(){
    var events = $("#event").val();
    if(events == ""){
        alert("请输入日程内容！");
        $("#event").focus();
        return false;
    }
    if(confirm("请确定？")){
        
    } else {
        return false;
    }
}

function showResponse(responseText, statusText, xhr, $form){
    if(statusText=="success") {    
        if(responseText == "1") {
            $.fancybox.close();
            //重新获取所有事件数据
            $("#calendar").fullCalendar("refetchEvents");
        } else {
            alert(responseText);
        }
    } else {
        alert(statusText);
    }
}
</script>
</html>

这里面带着删除一起给了，其实删除是最简单的一个。

 

2.3.9 eventClick

点击日历控件中的一个事件时的回调函数，比如8月10号有一个日程是开会，那么当你点击开会这个事件时就会通过fancybox弹出窗口，将开会这个事件的详细信息回显到弹出的窗口上：

2.3.9.1 前台实现

/******edit the event created ******/
        eventClick: function(calEvent, jsEvent, view) {
            var s_Date = $.fullCalendar.formatDate(calEvent.start,'yyyy-MM-dd');
            var e_Date = "";
            if(calEvent.end){
                e_Date = $.fullCalendar.formatDate(calEvent.end,'yyyy-MM-dd');
            }
            var params = {
                "id"        : calEvent.id,
                "title"        : encodeURI(calEvent.title),
                "action"     : "edit",
                "allDay"     : calEvent.allDay,
                "fromdate"     : s_Date,
                "todate"    : e_Date
            };
            var url = '000000/event.jsp?' + $.param(params);
            $.fancybox({
                'type':'ajax',
                'href':url,
            });
        }

在event.jsp页面上接收参数，处理后显示在文本框中，提交表单即可修改，修改和新增在一个方法中。

2.3.10 events

events是作为加载日历中的事件的数据源，可以直接给一个数组作为数据源，可以通过后台传递到前台的json对象。Events可以放在eventSources中使用。

2.3.10.1 前台实现

此处通过加载后台传递过来的json数据加载数据：

 

/****** load all events ******/
        events: {
            url: "00000",
            type: 'post',
            error: function() {
                alert('获取日程事件失败！');
            },
            //color:'yellow',// 背景色
            //textColor:'black'// 文字颜色
        }

 

2.3.10.2 后台实现

// 自带参数
    private long start;
    private long end;
    /**
     * get the JSON String to display the events
     * 
     * @return
     */
    public String loadJSON() {
        
        String json = agendaServ.loadSpan(start, end);
        
        response.setContentType("text/plain");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = null;
        try {
            out = response.getWriter();
            out.print(json);
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (out != null) {
                out.flush();
                out.close();
            }
        }
        return null;
    }

如果需要向后台传递参数，即带着过滤条件加载数据，可以使用如下的方式：

 

　　为了实现当前用户不能看到其他用户的非公开日程的功能，在后台加载数据的时候进行了一下过滤，即从session中拿到当前用户，然后遍历查询到的日程，从中拿到非公开日程，如果日程的用户跟当前用户不一致，那么设置该日程的标题为个人日程。

 

public String loadJSON() {
        List<Agenda> alist = agendaService.loadSpan(start, end);
        SysUser sysUser = SessionUtils.getSysUserFromSession(request);
        for(Agenda agenda:alist){
            if(!agenda.isOpen()){
                if(agenda.getUser().trim().equals(sysUser.getCnname().trim())){
                    continue;
                }else{
                    agenda.setTitle("个人日程");
                }
            }
        }
        String json = GsonUtil.getJson(alist);
        //String json = agendaService.loadSpan(start, end);
        response.setContentType("text/plain");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = null;
        try {
            out = response.getWriter();
            out.print(json);
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (out != null) {
                out.flush();
                out.close();
            }
        }
        return null;
    }

 

 

 

2.3.11 eventMouseover和eventMouseout

eventMouseover:用户鼠标放在事件上时的回调函数；

 

// Has not been complete because of the JQUERY dialog using manner
        // To display the detail message about the event
        eventMouseover: function(calEvent, jsEvent, view) {
            $("#agenda-content").text(calEvent.title);
            $("#agenda-user").text(calEvent.user);
            $("#agenda-start").text($.fullCalendar.formatDate(calEvent.start,'yyyy-MM-dd'));
            $("#win").dialog(
                {
                    title: '日程详细内容',
                    width: 250,
                    height: 140,
                    hide:    "slide",
                    position: [jsEvent.clientX, jsEvent.clientY],
                    overlay: {
                        backgroundColor: 'blue',
                        opacity: 0
                    },
                }
            );
        },

 

eventMouseout:用户鼠标移除事件时的回调函数；

 

eventMouseout: function(calEvent, jsEvent, view) {
            $("#win").hide();
            $("#win").dialog("destroy");
        },

 

弹出的div代码：

<div class="container">
    <div class="row" id="win" style="display:none">
        <div class="input-group">
            <span class="input-group-addon">日程内容：</span>
            <label id='agenda-content' class="form-control"></label>
        </div>
        <div class="input-group">
            <span class="input-group-addon">提交人员：</span>
            <label id='agenda-user' class="form-control"></label>
        </div>
        <div class="input-group">
            <span class="input-group-addon">开始时间：</span>
            <label id='agenda-start' class="form-control"></label>
        </div>
    </div>
</div>

 

2.3.12 droppable

　　boolean类型，默认为false,表示是否允许从外部拖拽一个事件放到日历中，设置为true表示允许，回调函数为drop。

　　使用从外部拖拽时间到日历中的功能需要JQUERY UI draggables支持，即需要引入JQUERY UI的js文件。

 

 2.3.13 drop

拖拽一个外部事件到日历中时的回调函数；

首先需要存在外部事件才可以进行拖拽，在显示日历页面时，查询事件表中的所有的事件，传递到前台显示：

2.3.13.1 显示日历页面

显示日历页面时，将事件表中的事件查出，发送到前台

public String execute() {
        
        List<Events> eventList = eventDAO.findAll();
        List<User> userList = userDAO.findAll();
        List<Level> levelList = levelDAO.findAll();
        
        HttpSession session = request.getSession();
        session.setAttribute("eventArr", eventList);
        session.setAttribute("userArr", userList);
        session.setAttribute("levelArr", levelList);
        return SUCCESS;
    }

前台显示：

<div class="input-group input-group-sm">
            <input type="text" id="event-title" class="form-control" placeholder="增加相关事件..">
            <span class="input-group-btn">
                <button type="button" id="add-event" class="btn btn-success">
                    增加&nbsp;<i class="glyphicon glyphicon-plus"></i>
                </button>
            </span>
        </div>
        <div class="divide-30"></div>
        <fieldset id='external-events'>
            <legend>我的任务</legend>
            <div id="event-box">
                <c:forEach var="event" items="${ eventArr }">
                       <div class='external-event'>
                           <c:out value="${ event.title }"/>
                       </div>
                </c:forEach>
            </div>
            <p>
                <input id='drop-remove' type='checkbox' class="uniform"/>
                <label for='drop-remove'>事件添加后删除</label>
            </p>
        </fieldset>

数据列表上方有新增按钮，可以在此页面上新增事件（事件和日程是不一样的表，事件表示还没有插入到日程中去，在日历控件中显示的为日程）：

$('#add-event').click(function () {
        var title = $('#event-title').val();
        addEvent(title);
    });
var addEvent = function (title) {
        if(title.length == 0){
            alert("事件名称不能为空！！！");
            return;
        }
        var url = "00000";
        $.post(url, {'title':title}, function(msg){
            if(msg != 1){
                alert("事件添加失败\n" + msg);
                return;
            }
            var html = $('<div class="external-event">' + title + '</div>');
            jQuery('#event-box').append(html);
            initDrag(html);
        });
    };

将添加成功后的事件显示在任务列表中，但是为了完成从外部拖拽事件到日历中形成日程的需求，还需要对添加的事件以及显示在该区域的事件进行处理：

var initDrag = function (el) {
        // create an Event Object
        var eventObject = {
            // use the element's text as the event title
            title: $.trim(el.text()) 
        };
        // store the Event Object in the DOM element so we can get it later
        el.data('eventObject', eventObject);
        // make the event draggable using jQuery UI
        el.draggable({
            zIndex: 999,
            revert: true, // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });
    };
$('#external-events div.external-event').each(function () {
        initDrag($(this));
    });

使用JQUERY的data函数，将事件的id和标题放到eventObject中，当需要的时候，可以使用data("eventObject")取出需要的数据。

2.3.13.2 drop实现

// this function is called when something is dropped
        drop: function(date, allDay) {
            var $obj = $(this);
            // retrieve the dropped element's stored Event Object
            var eventOBJ = $obj.data('eventObject');
            var start = $.fullCalendar.formatDate(date,'yyyy-MM-dd HH:mm');
            // submit the agenda to the background and save to the database
            var url = "000000";
            $.post(url,{title:eventOBJ.title,date:start,allday:allDay},function(msg){
                if(msg != 1){
                    alert(msg);
                    revertFunc();
                } else {
                    // is the "remove after drop" checkbox checked?
                    if ($('#drop-remove').is(':checked')) {
                        // if so, remove the element from the "Draggable Events" list
                        $obj.remove();
                    }
                    //重新获取所有事件数据
                    $("#calendar").fullCalendar("refetchEvents");
                }
            });
        },

Date:事件拖拽到的位置日期；

allDay:是否是整天事件；

后台实现：

private String title;
    private String date;
    private boolean allday;

    public String drop() throws IOException {
        
        response.setContentType("text/plain");
        PrintWriter out = response.getWriter();
        
        boolean success = agendaServ.drop(title, date, allday);
        if(success){
            out.print("1");
        } else {
            out.print("failed");
        }
        out.flush();
        out.close();
        return null;
    }

service实现：

/**
     * drag the event outside to the calendar and add it to database
     * @return
     */
    public boolean drop(String title, String date, boolean allday) {
        Agenda agenda = new Agenda(title);
        agenda.setAllDay(allday);
        agenda.setStart(DateUtil.parse2Date(date, "yyyy-MM-dd HH:mm"));
        return agendaDAO.save(agenda);
    }

 

上面基本就是整个的fullcalendar的操作，我把前台和后台实现都放上来了，当然还有其他的功能，按照需求查API也是可以做出来的，如果有什么不对的地方欢迎大家指正。

 

 

 

 

 

 

 

 

 

Tags：[db:关键字]
相关文章列表:
热门排行
关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助

CopyRight © 2008-2022 爱程序网 ichengxu.cc All Rights Reserved. 豫ICP备17027907号-2