官网：
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应用
原文地址：https://www.cnblogs.com/baird/p/9542484.html