html前台日历,calendar.html

  • Post author:
  • Post category:其他


– 日历

可拖动的活动

移动后删除

FullCalendar

这是一个jQuery插件,它提供了全尺寸,可拖动,使用Ajax的操作方式,并且可以使用自己的feed格式,如谷歌日历。


FullCalendar开发文档

FullCalendar示例

$(document).ready(function () {

$(‘.i-checks’).iCheck({

checkboxClass: ‘icheckbox_square-green’,

radioClass: ‘iradio_square-green’,

});

/* 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();

$(‘#calendar’).fullCalendar({

header: {

left: ‘prev,next’,

center: ‘title’,

right: ‘month,agendaWeek,agendaDay’

},

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’);

// 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;

// 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: [

{

title: ‘日事件’,

start: new Date(y, m, 1)

},

{

title: ‘长事件’,

start: new Date(y, m, d – 5),

end: new Date(y, m, d – 2),

},

{

id: 999,

title: ‘重复事件’,

start: new Date(y, m, d – 3, 16, 0),

allDay: false,

},

{

id: 999,

title: ‘重复事件’,

start: new Date(y, m, d + 4, 16, 0),

allDay: false

},

{

title: ‘会议’,

start: new Date(y, m, d, 10, 30),

allDay: false

},

{

title: ‘午餐’,

start: new Date(y, m, d, 12, 0),

end: new Date(y, m, d, 14, 0),

allDay: false

},

{

title: ‘生日’,

start: new Date(y, m, d + 1, 19, 0),

end: new Date(y, m, d + 1, 22, 30),

allDay: false

},

{

title: ‘打开百度’,

start: new Date(y, m, 28),

end: new Date(y, m, 29),

url: ‘http://baidu.com/’

}

],

});

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史