码迷,mamicode.com
首页 > Web开发 > 详细

FullCalendar和jquery-confirm应用

时间:2018-08-27 18:43:49      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:modern   单据   ext   dde   exp   end   tps   开始   value   

官网:
https://fullcalendar.io/docs
http://craftpip.github.io/jquery-confirm/

重点:
1、event的数据源,可以是json
2、可在toolbar自定义按钮,用customButtons实现功能
3、eventClick,返回flase时,原事件不执行

template:

 1 {% extends mobj/blank.html %}
 2 
 3 {% block custom_style %}
 4     <link href="/static/css/jquery/jquery-confirm.css" rel="stylesheet" type="text/css">
 5     <link href="/static/css/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css"/>
 6     <link href="/static/css/fullcalendar/fullcalendar.print.css" rel="stylesheet" type="text/css" media=print>
 7 {% endblock %}
 8 
 9 {% block content %}
10     <div class="row">
11         <div>
12             <div id=calendar style="background-color: white"></div>
13         </div>
14 
15         <form name="downloadMilestones" method="post" action="/mobj/downloadmilestones/">
16                 {% csrf_token %}
17                 <input type="submit" value="下载文件" hidden>
18         </form>
19 
20     </div>
21 {% endblock %}
22 
23 {% block custom_script %}
24     <script src="/static/js/fullcalendar/moment.js" type="text/javascript"></script>
25     <script src="/static/global/plugins/jquery.min.js" type="text/javascript"></script>
26     <script src="/static/js/jquery-confirm.js" type="text/javascript"></script>
27     <script src="/static/js/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
28     <script>
29         jQuery.curCSS = function(element, prop, val) {
30             return jQuery(element).css(prop, val);
31         };
32     </script>
33 
34     <script>
35         $(function() {
36             $(#calendar).fullCalendar({
37                 themeSystem: jquery-ui,
38                 defaultView: basicWeek,
39                 header: {
40                     left: prev,next today,
41                     center: title,
42                     right: export,basicWeek,basicDay
43                 },
44                 customButtons: {
45                     export: {
46                       text: export,
47                       click: function() {
48                             downloadMilestones.submit()
49                       }
50                     }
51                  },
52                 height:650,
53                 eventLimit:false,        //allow "more" link when too many events
54                 eventSources:[
55                     {
56                         url: /mobj/calendarfeed,
57                         color: lightblue,
58                         textColor: black
59                     },
60                 ],
61                 eventClick: function(event) {
62                     $.confirm({
63                         theme: modern,
64                         closeIcon: false,
65                         title: 选择文字复制,点击按钮跳转,
66                         content: event.title,
67                         buttons: {
68                             USOP: {
69                                 text: USOP,
70                                 btnClass: btn-green,
71                                 action: function () {
72                                     openIE(event.odd);
73                                 }
74                             },
75                             EDIT: {
76                                 text: 单据编辑,
77                                 action: function () {
78                                     window.open(event.url);
79                                 }
80                             },
81                             CANCEL: {
82                                 text: 取消
83                             }
84                         }
85                     });
86                     return false
87                 }
88 
89             });
90 
91         });
92     </script>
93 {% endblock %}

 

view片段:

1 tmp = {
2                 odd:row.ODD_NUMBER,          //自定义参数,calendar对此不做处理
3                 title: row.OPERATOR_B + (B)\n + row.ODD_NUMBER + \n + row.ODD_TITLE + \n\n + data,
4                 start: str_date,                                     //开始时间
5                 url: /mobj/contact_info/detail- + str(row.id),    //跳转地址
6                 color:#FF6600                 //指定背景色
7             }

 

FullCalendar和jquery-confirm应用

标签:modern   单据   ext   dde   exp   end   tps   开始   value   

原文地址:https://www.cnblogs.com/baird/p/9542484.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!