带记事功能的日历插件fullCalendar

  1. 效果图

  2. 业务常景介绍
    公司的一款订餐系统,分中饭和晚饭,每天默认为点。
  3. 引入
    <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> 
  4. html
    <div id="calendar"></div> 
  5. 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 system
                selectable: true,
                defaultView: 'month',
                locale:'zh-cn',
                axisFormat: 'h:mm',
                columnFormat: {
                    month: 'ddd',    // Mon
                    week: 'ddd d', // Mon 7
                    day: 'dddd M/d',  // Monday 9/7
                    agendaDay: '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 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: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);
                    			}
                    		}
                			
                		})
                		
                }          
            });

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


    提交后使用$('#calendar').fullCalendar('refetchEvents');刷新显示数据
  7. 记事显示
    蓝色部门为记事显示的代码
    主要通过ajax向后端拿到数据放入events数组中,经过处理后填充
  8. 细节
    buttonText: {
            		  today: '今天',
            		  month: '月',
            		  week: '周',
            		  day: '天'
            		 },
            		 allDayText: '全天',
            		 monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
            		 monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'],
            		 dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
            		 dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
      


    中文显示


阅读更多
文章标签: 日历 插件
个人分类: 前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭