Full Calendar
with draggable and editable events
Full Calendar - Bootstrap后台管理系统模版Ace下载
try{ace.settings.check('navbar' , 'fixed')}catch(e){}
try{ace.settings.check('main-container' , 'fixed')}catch(e){}
#438EB9
#222A2D
#C6487E
#D0D0D0
Choose Skin
Fixed Navbar
Fixed Sidebar
Fixed Breadcrumbs
Right To Left (rtl)
Inside
.container
window.jQuery || document.write("
if("ontouchend" in document) document.write("
jQuery(function($) {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
buttonText: {
prev: '',
next: ''
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1),
className: 'label-important'
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2),
className: 'label-success'
},
{
title: 'Some Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
}]
,
editable: true,
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');
var $extraEventClass = $(this).attr('data-class');
// 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;
if($extraEventClass) copiedEventObject['className'] = [$extraEventClass];
// 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();
}
}
,
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
bootbox.prompt("New Event Title:", function(title) {
if (title !== null) {
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
});
calendar.fullCalendar('unselect');
}
,
eventClick: function(calEvent, jsEvent, view) {
var form = $("
Change event name ");form.append(" ");
form.append(" Save");
var div = bootbox.dialog({
message: form,
buttons: {
"delete" : {
"label" : " Delete Event",
"className" : "btn-sm btn-danger",
"callback": function() {
calendar.fullCalendar('removeEvents' , function(ev){
return (ev._id == calEvent._id);
})
}
} ,
"close" : {
"label" : " Close",
"className" : "btn-sm"
}
}
});
form.on('submit', function(){
calEvent.title = form.find("input[type=text]").val();
calendar.fullCalendar('updateEvent', calEvent);
div.modal("hide");
return false;
});
//console.log(calEvent.id);
//console.log(jsEvent);
//console.log(view);
// change the border color just for fun
//$(this).css('border-color', 'red');
}
});
})
一键复制
编辑
Web IDE
原始数据
按行查看
历史
378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
