带记事功能的日历插件fullCalendar

效果图
业务常景介绍
公司的一款订餐系统，分中饭和晚饭，每天默认为点。

引入

<link rel="stylesheet" type="text/css" href="css/fullcalendar.css"> <link rel="stylesheet" type="text/css" href="css/fancybox.css"> <script src='js/jquery-1.9.1.min.js'></script> <script src='js/jquery-ui-1.10.3.custom.min.js'></script> <script src='js/fullcalendar.min.js'></script>

html
```
<div id="calendar"></div> 
```

Jquery

 $('#calendar').fullCalendar({header: {left: 'title',center: 'agendaDay,agendaWeek,month',right: 'prev,next today'},editable: true,firstDay: 1, //  1(Monday) this can be changed to 0(Sunday) for the USA systemselectable: true,defaultView: 'month',locale:'zh-cn',axisFormat: 'h:mm',columnFormat: {month: 'ddd',    // Monweek: 'ddd d', // Mon 7day: 'dddd M/d',  // Monday 9/7agendaDay: 'dddd d'},titleFormat: {month: 'MMMM yyyy', // September 2009},allDaySlot: false,selectHelper: true,  select: function(start, end, allDay) {var date=formatDate(start);$("#seldate").html(date);openDinnerUpdate();},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 Objectvar originalEventObject = $(this).data('eventObject');// we need to copy it, so that multiple events don't have a reference to the same objectvar copiedEventObject = $.extend({}, originalEventObject);// assign it the date that was reportedcopiedEventObject.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:function(start,end,callback) {$.ajax({url:'<%=basePath%>/dinner/findAll',success:function(data){var events=[];for(var i=0;i<data.length;i++){var plan=data[i];if(plan.status==-1){continue;}var don=plan.lun_or_din;var title=don==0?"中午没点":"晚饭没点";var id=plan.id;var start=new Date(plan.year,plan.month-1,plan.day);var allDay=true;events.push({id:id,title:title,allDay:allDay,start:start})}try{callback(events);}catch(e){console.info(e);}}})}          });

弹出层
代码中红色部分为弹出层的主要代码，使用了bootstrap的模态框方便简介。点击后触发

提交后使用$('#calendar').fullCalendar('refetchEvents');刷新显示数据
记事显示
蓝色部门为记事显示的代码
主要通过ajax向后端拿到数据放入events数组中，经过处理后填充

细节

buttonText: {today: '今天',month: '月',week: '周',day: '天'},allDayText: '全天',monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'],dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],

中文显示

带记事功能的日历插件fullCalendar相关推荐

html桌面日历功能,jQuery简单带记事功能的日历插件
e-calendar是一款jQuery简单带记事功能的日历插件.通过该jQuery日历插件你可以记录或设置某天某个时刻发生的事情,具有工作备忘录的功能.通过简单的参数设置你就可以定制该日历插件的外观. ...
jQuery简单备忘录功能的日历插件
e-calendar是一款jQuery简单带备忘录功能的日历插件.通过该jQuery日历插件你可以记录或设置某天某个时刻发生的事情,具有工作备忘录的功能.通过简单的参数设置你就可以定制该日历插件的外观 ...
Bootstrap全年日历插件带记事功能
下载地址实用的Bootstrap3带记事功能的全年日历插件.该日历插件使用简单,可以动态在某个日期上设置备忘录,可以自定义高亮日期样式和选择最大日期和最小日期范围等. dd:
前端Vue制作日历插件FullCalendar
前端Vue制作日历插件FullCalendar 官方文档:https://fullcalendar.io/ 效果图安装 Vue2:npm install --save @fullcalendar/v ...
jQuery插件-支持天干地支阴历阳历万年历节假日红字显示记事等功能的日历插件(1)...
要求: jQuery1.4以上就行了. 用途: 可以支持天干地支,阴历,阳历,万年历,节假日红字显示,记事,等功能,有些老外也开发了这个日历插件,可是很不幸,他们不懂中国的老黄历以及<易经> ...
日历插件---FullCalendar （vue3中实现，常用详细的功能以及样式、有源码）
FullCalendar官网在vue3中的使用方式私聊获取源码链接 FullCalendar的使用步骤安装FullCalendar相关插件 "@fullcalendar/core&qu ...
fullcalendar php,日历插件fullcalendar+php的使用教程 — 读取json数据
根据FullCalendar日历插件说明文档中的介绍,日历主体事件数据的来源有三,一是直接以javascript数组的形式显示日历事件,二是获取JSON数据形式显示日历事件,三是函数回调的形式显示日历 ...
jquery日历插件FullCalendar使用技巧
原文链接:http://blog.csdn.net/u013493957/article/details/44920341 FullCalendar是一款基于jquery的日历控件,它有着很强大的功能 ...
jQuery日历插件FullCalendar使用方法
转载至此 html代码片段 <head> <meta charset='utf-8' /> <link href='../fullcalendar.css' rel='s ...

带记事功能的日历插件fullCalendar

带记事功能的日历插件fullCalendar相关推荐

最新文章

热门文章