fullcalendar

//日期对象原型格式方法
 Date.prototype.pattern=function(fmt) {    
  var o = {    
   "M+" : this.getMonth()+1, //月份    
   "d+" : this.getDate(), //日    
   "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时    
   "H+" : this.getHours(), //小时    
   "m+" : this.getMinutes(), //分    
   "s+" : this.getSeconds(), //秒    
   "q+" : Math.floor((this.getMonth()+3)/3), //季度    
   "S" : this.getMilliseconds() //毫秒    
  };    
  var week = {    
   "0" : "\u65e5",    
   "1" : "\u4e00",    
   "2" : "\u4e8c",    
   "3" : "\u4e09",    
   "4" : "\u56db",    
   "5" : "\u4e94",    
   "6" : "\u516d"   
  };    
  if(/(y+)/.test(fmt)){    
   fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));    
  }    
  if(/(E+)/.test(fmt)){    
   fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "\u661f\u671f" : "\u5468") : "")+week[this.getDay()+""]);    
  }    
  for(var k in o){    
   if(new RegExp("("+ k +")").test(fmt)){    
    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));    
   }    
  }    
  return fmt;    
 }; 
 
 
 
  //格式化时间函数,此函数为了处理json格式中带date类型数据的 
function formatJson(time) 
{ 
var jsonDate=new Date(time); 
var result = jsonDate.format("yyyy-MM-dd hh:mm"); 
return jsonDate; 
} 
 
 Date.prototype.format = function(format){ 
    var o = 
    { 
        "M+" : this.getMonth()+1, //month 
        "d+" : this.getDate(),    //day 
        "h+" : this.getHours(),   //hour 
        "m+" : this.getMinutes(), //minute 
        "s+" : this.getSeconds(), //second 
        "q+" : Math.floor((this.getMonth()+3)/3),  //quarter 
        "S" : this.getMilliseconds() //millisecond 
    } 
    if(/(y+)/.test(format)) 
    format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
    for(var k in o) 
    if(new RegExp("("+ k +")").test(format)) 
    format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length)); 
    return format; 
}

cyper的java代碼(spring mvc controller):

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

@RequestMapping(value = "calendarEvents")

@ResponseBody

public String calendarEvents(){

    List<LecturerAgendaVo> agendas = lecturerAgendaService.findAllMatchedAgenda();

    StringBuilder sb = new StringBuilder();

    sb.append("[");

    for(LecturerAgendaVo agenda: agendas){

        sb.append("{\"id\":" + agenda.getId());

        sb.append(",\"title\":\"\\n" + agenda.getLecterName()+"\\n");

        sb.append(agenda.getSchoolName()+"\\n");

        sb.append(agenda.getStartTime() + "-"+ agenda.getEndTime() + "\\n");

        sb.append("\"");

        sb.append(",\"start\":\""  + agenda.getLectDate() + " " + agenda.getStartTime() + ":00\"");

        sb.append(",\"end\":\""  + agenda.getLectDate() + " " + agenda.getEndTime() + ":00\"");

        sb.append("},");

    }

    sb.setLength(sb.length()-1);

    sb.append("]");

    return sb.toString();

}

cyper的javascript:

?


1

2

3

4

5

6

7

8

9

10

11

12

$(document).ready(function() {

    $(‘#calendar‘).fullCalendar({

        header: {

            left: ‘prev,next today‘,

            center: ‘title‘,

            right: ‘month,basicWeek,basicDay‘

        },

        editable: false,

        events:  ‘${ctx}/mgr/lect/apply/calendarEvents.json‘

    });

    

});

以下為轉載部分：

fullcalendar 的帮助文档 可见地址：http://arshaw.com/fullcalendar/docs/

jQuery日历FullCalendar插件是一个非常不错的日历工具，可用于制作日程表或计划安排

里有3种显示events的方式

1 events (as an array) 这种课见帮助

?


1

2

3

4

5

6

7

8

9

10

11

12

13

<pre class="javascript" name="code">

          $(‘#calendar‘).fullCalendar({

            events: {

                url: ‘<%=request.getContextPath()%>/displayAction.do?method=testJson‘ //你的controller的地址

                type: ‘POST‘,

                error: function() {

                    alert(‘there was an error while fetching events!‘);

                },

                color:‘yellow‘,// 背景色

                textColor:‘black‘// 文字颜色

            }

        });</pre>

<pre></pre>

java代码

?


1

2

3

4

5

6

7

8

9

10

11

public ModelAndView testJson(HttpServletRequest request, HttpServletResponse response) {

       String strvalue = "[{\"id\":111,\"title\":\"Event1\",\"start\":\"2012-03-10\",\"url\":\"http:\\/\\/yahoo.com\\/\"},{\"id\":222,\"title\":\"Event2\",\"start\":\"2012-03-20\",\"end\":\"2012-03-22\",\"url\":\"http:\\/\\/yahoo.com\\/\"}]";

       response.setCharacterEncoding("UTF-8");

       System.out.println("strvalue="+strvalue);

       try {

           response.getWriter().print(strvalue);

       } catch (IOException e) {

           e.printStackTrace();

       }

       return null;

   }

3 events (as a function)

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

  $(‘#calendar‘).fullCalendar({

    events:function(start, end, timezone, callback) {

        $.ajax({

            url:"<%=request.getContextPath()%>/displayAction.do?method=getTitle",

            cache:false,

            success:function(doc) {

                eval("var j=" + doc);

                var events = [];

                var info = j.eventinfo;

                for (var i = 0; i < info.length; i++) {

                    var ev = info[i];

                    var title = ev.title;

                    var evtstart = new Date(Date.parse(ev.start));

                    var evtend = new Date(Date.parse(ev.end));

                    events.push({

                        title:title,

                        start:evtstart,

                        end:evtend,

                        id:1

                    });

                }

                callback(events);

            },

            error:function() {

                alert(‘sdf‘)

            }

        })

    }

})

java代码

?


1

2

3

4

5

6

7

8

9

10

11

public ModelAndView getTitle(HttpServletRequest request, HttpServletResponse response) {

        String strvalue = "{ ‘eventinfo‘:[{day: ‘3/3/2012‘,eventtitle:‘test1‘},{day: ‘3/8/2012‘,eventtitle:‘test2‘}　]} ";

        response.setCharacterEncoding("UTF-8");

        System.out.println("strvalue="+strvalue);

        try {

            response.getWriter().print(strvalue);

        } catch (IOException e) {

            e.printStackTrace();

        }

        return null;

    }
时间： 2024-08-25 10:47:17

fullcalendar的相关文章

Web日程管理FullCalendar

fullcalendar是一款jQuery日程管理控件,提供了丰富的属性设置和方法调用,官网下载地址http://fullcalendar.io/download,目前最新版本是2.3.2. 只要调用$('#calendar').fullcalendar(options)即可初始化,初始化配置中events.eventSources.select和eventClick是必须设置项. events和eventSources是数据源配置项,存储数组对象,可以是Arrays/Functions/URL

fullcalendar日历控件知识点集合

1.基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码.当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性.方法.托付(函数回调)作为成员变量.通过为这些成员变量赋值,就可以实例化出一个符合自己需求的fullcalendar实例出来,即终于在浏览器里渲染出的日历.换句话说,我们所做的绝大多数工作就是依照fullcalendar的语法约定去配置出一个符合我们需求的fullcalendar实例.除非对于极少的特

js非常强大的日历控件fullcalendar.js, 日期时间库: moment.js

日历控件: https://fullcalendar.io/docs/ https://fullcalendar.io/docs/event_data/events_function/ https://fullcalendar.io/docs/event_data/Event_Object/ https://fullcalendar.io/docs/mouse/eventClick/ <!DOCTYPE html> <html> <head> <meta char

FullCalendar应用——整合农历节气和节日

FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用性. HTML 首先是要载入jQuery库和fullcalendar插件. <script src='js/jquery-1.9.1.min.js'></script> <script src='js/fullcalendar.min.js'></script>

FullCalendar如何实现minTime,slotDuration动态更新

最近在使用jQuery插件FullCalendar实现一个患者预约医生看病的功能,大致需求如下: 1.  医生首先以周为单位设置自己下个月的出诊时间,包括上班时间,下班时间,每次可预约的时间间隔 2.  患者通过在线预约系统,选择医生的出诊时间并预约 3.  医生可查看自己的预约安排,了解病人的预约情况,使用FullCalendar插件实现效果如下图: 那么现在问题来了,如果医生不同的周或不同月上下班的时间不一样,我们跳转到别的周后,左边的时间轴是否也要跟着改变,遗憾的是FullCalendar

FullCalendar 日历插件中文说明文档

FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中文文档,以供参阅 普通显示设置 属性 描述 默认值 header 设置日历头部信息.如果设置为false,则不显示头部信息.包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置:title: 显示当前月份/周/日信息prev: 用于切换到上一月/周/日视图的按钮ne

FullCalendar应用——读取JSON数据

开发者可以使用FullCalendar创建强大的日历日程应用,FullCalendar提供了丰富的选项设置和方法调用,使得开发者可以轻松的创建各种功能的日历程序.本文将结合实例使用PHP读取MySQl数据,显示在FullCalendar日历中. 查看演示DEMO 根据FullCalendar日历插件说明文档中的介绍,日历主体事件数据的来源有三,一是直接以javascript数组的形式显示日历事件,二是获取JSON数据形式显示日历事件,三是函数回调的形式显示日历数据,三种调用数据的方式各有所用之处

Fullcalendar 日历控件的基本使用

1:Fullcalendar 日历控件的基本简介 Fullcalendar是一款十分强大的开源日历免费控件,提供了丰富的属性设置和方法调用. 官网地址:https://fullcalendar.io/ 文档地址:https://fullcalendar.io/docs/   优点:1.设置时区 2.丰富的回调函数 3.支持拖拽 多选 4.支持触摸 5.列表视图 6.年.月.周.日的显示 7.前端展示可自定义 8.有完整的文档 2:基本使用方法 需要引用的外部支持文件---->>> 1 &

fullcalendar日历控件集合知识

1.基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码.当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性.方法.托付(函数回调)作为成员变量.通过为这些成员变量赋值,就可以实例化出一个符合自己需求的fullcalendar实例出来,即终于在浏览器里渲染出的日历.换句话说,我们所做的绝大多数工作就是依照fullcalendar的语法约定去配置出一个符合我们需求的fullcalendar实例.除非对于极少的特

FullCalendar日历插件

使用FullCalendar做个自己的日程管理(一)- 基础篇 使用FullCalendar做一个自己的日程管理(二)- 事件篇 使用FullCalendar做一个自己的日程管理(三)- 持久化篇