优美时间控件 fullcalendar

最新推荐文章于 2022-07-08 00:02:33 发布

supingemail

最新推荐文章于 2022-07-08 00:02:33 发布

阅读量443

点赞数

分类专栏： JS 文章标签： fullcalendar

本文链接：https://blog.csdn.net/supingemail/article/details/48313035

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

好记忆不如按烂笔头... ...

官网

http://fullcalendar.io/ 有你所需要的全部资料.

样例

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords">
<title>日程安排</title>

<link rel="stylesheet" type="text/css" href="css/fullcalendar.css">
<style type="text/css">
#calendar{width:960px; margin:20px auto 10px auto}
</style>
<script src='js/jquery-1.9.1.min.js'></script>
<script src='js/jquery-ui-1.10.2.custom.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script type="text/javascript">

$(function() {
       var date = new Date();
       var d = date.getDate();
       var m = date.getMonth();
       var y = date.getFullYear();

       $('#calendar').fullCalendar({
           header: {
               left: 'prev,next today',
               center: 'title',
               right: 'month,agendaWeek,agendaDay'
           },
           monthNames: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
            monthNamesShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            today: ["今天"],
            firstDay: 1,
            buttonText: {
                today: '今日',
                month: '月',
                week: '周',
                day: '日',
                prev: '上一月',
                next: '下一月'
            },
           firstDay:1,
           editable: true,
           timeFormat: 'H:mm',
           axisFormat: 'H:mm',
           events: [
               {
               id : 1,
               title : '取消',
               url : 'class_detail.htm?params=78476',
               start: '2015-09-01'
               },
               {
               id : 2,
               title : '完成',
               url : 'class_detail.htm?params=78477',
               start: '2015-09-04'
               },
               {
               id : 3,
               title : '等待上课',
               url : 'class_detail.htm?params=78478',
               start: '2015-09-08'
               },
               {
               id : 4,
               title : '等待上课',
               url : 'class_detail.htm?params=78479',
               start: '2015-09-11'
               },
               {
               id : 5,
               title : '等待上课',
               url : 'class_detail.htm?params=78480',
               start: '2015-09-15'
               },
               {
               id : 6,
               title : '等待上课',
               url : 'class_detail.htm?params=78481',
               start: '2015-09-18'
               },
               {
               id : 7,
               title : '等待上课',
               url : 'class_detail.htm?params=78482',
               start: '2015-09-22'
               },
               {
               id : 8,
               title : '等待上课',
               url : 'class_detail.htm?params=78483',
               start: '2015-09-25'
               },
               {
               id : 9,
               title : '等待上课',
               url : 'class_detail.htm?params=78484',
               start: '2015-09-29'
               }
           ]
       });

   });
</script>
</head>

<body>
<div id="main" style="width:1060px">
   <div id='calendar'></div>
</div>

</body>
</html>

events : 是数据来源，可以写死，也可以动态的添加，这样方便操作。

附上demo(ajax跨域请求并在其上显示数据) ：

http://download.csdn.net/detail/supingemail/9091295

supingemail

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
优美时间控件 fullcalendar

好记忆不如按烂笔头... ...官网 http://fullcalendar.io/ 有你所需要的全部资料.样例日程安排#calendar{width:960px; margin:20px auto 10px auto}$(function() { var date = new Date()
复制链接

扫一扫

专栏目录