jquery日历是一款基于javascript的插件,用于展示和管理日程安排。它可以让用户方便地添加、编辑、删除和查看日程,还可以根据不同的需求自定义显示格式、日期范围、多语言等设置。
$(document).ready(function(){ //初始化日历插件 $('#schedule-calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultView: 'month', selectable: true, selectHelper: true, editable: true, eventLimit: true, events: [ //添加日程数据,可以动态从后台获取 { title: '会议', start: '2020-12-02T10:00:00', end: '2020-12-02T12:00:00' }, { title: '电话拜访', start: '2020-12-08T14:30:00', end: '2020-12-08T15:30:00' }, ... ], //点击日程会弹出编辑窗口 eventClick: function(event) { $('#event-title').val(event.title); $('#event-start').val(moment(event.start).format('YYYY-MM-DDTHH:mm:ss')); $('#event-end').val(moment(event.end).format('YYYY-MM-DDTHH:mm:ss')); $('#event-modal').modal(); //保存修改后的数据 $('#event-save').unbind().click(function() { event.title = $('#event-title').val(); event.start = $('#event-start').val(); event.end = $('#event-end').val(); $('#schedule-calendar').fullCalendar('updateEvent', event); $('#event-modal').modal('hide'); }); }, //点击空白日历区域会弹出添加窗口 select: function(start, end) { $('#event-title').val(''); $('#event-start').val(moment(start).format('YYYY-MM-DDTHH:mm:ss')); $('#event-end').val(moment(end).format('YYYY-MM-DDTHH:mm:ss')); $('#event-modal').modal(); //保存新增数据 $('#event-save').unbind().click(function() { var title = $('#event-title').val(); var start = $('#event-start').val(); var end = $('#event-end').val(); //将新的日程添加到日历上 $('#schedule-calendar').fullCalendar('renderEvent',{ title: title, start: start, end: end }); $('#event-modal').modal('hide'); }); } }); });
使用jquery日历可以让日程管理更加高效,方便快捷地记录和查询工作、生活和学习安排。我们可以根据实际需求灵活配置和扩展,实现更多定制化的功能和效果。