FullCalendar和jquery-confirm应用

Posted 2021-01-01 baird

官网：
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)
‘ + row.ODD_NUMBER + ‘
‘ + row.ODD_TITLE + ‘

‘ + data,
4                 ‘start‘: str_date,                                     //开始时间
5                 ‘url‘: ‘/mobj/contact_info/detail-‘ + str(row.id),    //跳转地址
6                 ‘color‘:‘#FF6600‘                 //指定背景色
7             }