带农历的FullCalendar日历使用解析

no_bao

浏览: 309903 次
性别:
来自: 济南

最近访客更多访客>>

kiss_girl

webbabyking02

21jhf

xfworld

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery
JavaScript

FullCalendar jQuery日历

演示代码见附件，
1、使用josn获取日历对象
2、日历带有农历
3、后台可以获取开始时间和结束时间
4、日期事件里面可以添加图标
等等
。。。。
代码访问fullCalendar.jsp

---------------------------代码讲解，主调用fullCalendar.jsp--------

<%@page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<link rel='stylesheet' type='text/css' href='<%=request.getContextPath() %>/dutyCalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='<%=request.getContextPath() %>/dutyCalendarr/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='<%=request.getContextPath() %>/dutyCalendar/jquery-1.5.2.min.js'></script>
<script type='text/javascript' src='<%=request.getContextPath() %>/dutyCalendar/jquery-ui-1.8.11.custom.min.js'></script>
<script type='text/javascript' src='<%=request.getContextPath() %>/dutyCalendar/fullcalendar.js'></script>

<script type='text/javascript'>

$(document).ready(function() {

var date = new Date();

var d = date.getDate();

var m = date.getMonth();

var y = date.getFullYear();
        var tt="";
var calendar = $('#calendar').fullCalendar({
    dayClick: function() {
        alert('a day has been clicked!');
    },
    eventClick: function(event) {
// opens events in a popup window
//window.open('http://www.baidu.com', 'gcalevent', 'width=700,height=600');
alert(event.url)
return false;
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'

},

editable: false,
events: 'cc.html' 

});
        eventRender: function(calEvent, element) {
            element.qtip({
                content: calEvent.description,
                position: {
                      corner: {
                         target: 'topLeft',
                         tooltip: 'bottomRight'
                      }
                },
                style: {
                  name: 'dark'
               }
            });
        };
$('#my-prev-button').click(function() {
   // var d = $('#calendar').fullCalendar('getDate');
           // alert("当前翻页时间 " + d.pattern("yyyy-MM-dd"));

           // function( true, calendar );
            alert("选择到2011-03-03");
    $('#calendar').fullCalendar( 'gotoDate', 2011 , 2, 3);
});

});


       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;
}
</script>
<style type='text/css'>

body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}

#calendar {
width: 900px;
margin: 0 auto;
}

.OneClass{
width:12px;
height:12px;
vertical-align:middle;
cursor:help;
background:url(<%=request.getContextPath()%>/images/help2.gif) no-repeat;
}

</style>
</head>
<body>
<div id='calendar'></div>

</body>
</html>

FullCalendar-1.5.2.rar (75.9 KB)
下载次数: 296

分享到：

Oracle中使用sys_connect_by_path函数实现 ... | 有关freemarker的语法，循环，逻辑

2011-12-24 12:03
浏览 6305
评论(2)
分类:Web前端
查看更多

2 楼 no_bao 2012-10-13

icezhanghui 写道

这个没有显示节气，而且添加的日程不能拖拽。

可以配置成拖拽日历，可以参考官方api
http://arshaw.com/fullcalendar/

1 楼 icezhanghui 2012-10-10

这个没有显示节气，而且添加的日程不能拖拽。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论