FullCalendar和jquery-confirm應用

標籤：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 events54                 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 false87                 }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應用