jqueryUI draggable和droppable 关于fullCalendar

最近要写一个日历??来管理一天的事务。用工作室买来的Metronic模版，找到我想要的日历模版。

讲讲fullcalendar吧： 我花了两天时间看源码fullcalendar.js。在里面发现了许多jquery－ui里的东西，我摸清了自己很多js已经不用写太多了，大部分写的是ajax请求，将静态代码动态化的过程。但是两天的时间都在摸索，没有任何代码写入真的让人忧伤，然后发现了有官方手册http://fullcalendar.io/docs/。

全英文的手册对于我这种英语小白来说，好头痛，硬着脑子，一个一个翻译了起来，慢慢地大致能看懂意思了。

$(‘#calendar‘).fullCalendar({    header: //Defines the buttons and title at the top of the calendar.    defaultView: //The initial view when the calendar loads.    editable://Determines whether the events on the calendar can be modified.    droppable: true, // this allows things to be dropped onto the calendar !!!    drop: function(date, allDay) { // this function is called when something is dropped

        // retrieve the dropped element‘s stored Event Object        var originalEventObject = $(this).data(‘eventObject‘);        // we need to copy it, so that multiple events don‘t have a reference to the same object        var copiedEventObject = $.extend({}, originalEventObject);

        // assign it the date that was reported        copiedEventObject.start = date;        copiedEventObject.allDay = allDay;        copiedEventObject.className = $(this).attr("data-class");        $.post($.U(‘Calendar/ajax?q=AddEvent‘),{‘addEvent‘:copiedEventObject},function(data){                console.log(copiedEventObject);        });

        // render the event on the calendar        // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)        $(‘#calendar‘).fullCalendar(‘renderEvent‘, copiedEventObject, true);        // is the "remove after drop" checkbox checked?        if ($(‘#drop-remove‘).is(‘:checked‘)) {            // if so, remove the element from the "Draggable Events" list            $(this).remove();        };

    },

events: function(start, end,callback){事件显示：可以是array，json和function。    $.ajax({        url: $.U(‘Calendar/ajax?q=AllEvent‘),        dataType:‘json‘,        success: function(data) {            var events = [];            $(data.event).each(function(e,a) {                events.push({                    id: a.id,                    title: a.title,                    start: a.start,                    backgroundColor: a.backgroundcolor,                    end:a.end,                    allDay: !!(a.allday),                    className: a.deleteclass                });

            });            callback(events);//递归调用events才能把所有事件显示出来。

        }    });},

    eventClick: function(calEvent) {事件点击进行注销，将事件中划一条线。        var the=$(this);        if(the.hasClass(‘fc-event-delete‘)) {//fc-event-delete这个样式是自己添加的，里面就是text-decoration: line-through;

            $.ajax({                url: $.U(‘Calendar/ajax?q=RemoveClass‘),                data:{id:calEvent._id},                dataType:‘json‘,                success: function(item) {                    the.removeClass(‘fc-event-delete‘)                }            });        }        else{            $.ajax({                url: $.U(‘Calendar/ajax?q=AddClass‘),                data:{id:calEvent._id},                dataType:‘json‘,                success: function(item) {                   the.addClass(‘fc-event-delete‘)                }            });        }    },    eventDrop:function( event){事件在日历移动时间会改动的代码        if(event.allDay) {            $.ajax({                url: $.U(‘Calendar/ajax?q=RemoveTime‘),                data: {                    start: event.start,                    id: event._id,                    end: event.end                },                dataType: ‘json‘,                success: function (item) {                }            })        }        else{            $.ajax({                url: $.U(‘Calendar/ajax?q=RemoveDayTime‘),                data: {                    allDay: event.allDay,                    start: event.start,                    end: event.end,                    id: event.id                },                dataType: ‘json‘,                success: function (item) {                }            })        }    },    eventDragStop:function( event, jsEvent,ui,view){//删除事件，垃圾筒的功能　　$(‘#event_delete‘).droppable({//当我的事件放在event_delete上面时进行删除和移除。    　　　　drop:function(){       　　　　 var the=$(‘#calendar‘);

      　　　　 $.ajax({          　　　  url: $.U(‘Calendar/ajax?q=deleteEvent‘),          　　　  data:{                 id:event.id            },            dataType:‘json‘,            success: function(item){                 the.fullCalendar( ‘removeEvents‘,event.id );//‘removeEvents‘移除事件，fullcalendar里的。

            }        })}});

    },    eventResize:function( event){//延长事件的时间。事件调整大小。        $.ajax({            url: $.U(‘Calendar/ajax?q=ResizeTime‘),            data:{                time:event.end,                id:event._id            },            dataType:‘json‘,            success: function(item){            }        })    }});

下面是自己百度而来的个人觉得比较的帮助：

官网：http://jqueryui.com

比较好的学习jqueryUI的手册：http://www.runoob.com/jqueryui/jqueryui-tutorial.html

还有别人的学习笔记：http://blog.csdn.net/dunyanan1/article/details/7404467

http://www.cnblogs.com/rabbit2012/archive/2013/02/22/2922007.html