jQueryUI draggable and droppable about Fullcalendar

Want to write a calendar recently?? To manage a day's business. Use the studio-bought Metronic template to find the calendar template I want.

Talk about Fullcalendar: I spent two days to see the source fullcalendar.js. Found in the inside of a lot of jquery-ui things, I find myself a lot of JS has not written too much, most of the writing is the AJAX request, the static code dynamic process. But two days in the groping, no code write really sad, and then found the Official Handbook http://fullcalendar.io/docs/.

English-language Handbook for me this kind of English small white, good headache, hard brain, a translation up, slowly roughly can understand the meaning.

$ (' #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-be dropped onto the calendar!!!
Drop:function (date, AllDay) {//This function was called when something was 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 has a reference to the same object
var copiedeventobject = $.extend ({}, Originaleventobject);

Assign it the date that is 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) {event display: can be array,json and 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);//Call events recursively to show all events.

        }
    });
},

    Eventclick:function (calevent) {Event Click to log off, the event will be a uniform line.
        var the=$ (this);
        if (The.hasclass (' Fc-event-delete ')) {//fc-event-delete This style is added by oneself, inside is 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) {event code changed during calendar move time
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) {//delete event, trash bin function
$ (' #event_delete '). Droppable ({//) Delete and remove when my event is placed above 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 ' Remove events, Fullcalendar.

            }
        })
}});

    },
    Eventresize:function (Event) {//Extended event time. The event size is resized.
        $.ajax ({
            URL: $. U (' Calendar/ajax?q=resizetime '),
            data:{
                Time:event.end,
                id:event._id
            },
            DataType: ' JSON ',
            Success:function (item) {
            }
        })
    }
});

The following is their own Baidu and the personal feel that the comparison of help:

Official website:http://jqueryui.com

A better Handbook of learning jQueryUI:http://www.runoob.com/jqueryui/jqueryui-tutorial.html

And someone else's study notes:http://blog.csdn.net/dunyanan1/article/details/7404467

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

jQueryUI draggable and droppable about Fullcalendar