html前台日历,calendar.html

- 日历
Draggable Events

可拖动的活动

移动后删除

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

原始数据

按行查看

历史

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值