1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
| <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script> <script> $(document).ready(function () { var calendar = $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, events: [ {% for i in events %} //这里对数据库内容作了循环展示 { title : '{{ i.event_name }}', start : new Date(2020 ,{{ i.start_date|date:" m-1, d" }}), // 这里格式是new Date(y, m, d),所以用这样的写法,Django前端大法好!!! end : new Date(2020 ,{{ i.start_date|date:" m-1, d" }}), // 这里格式是new Date(y, m, d),所以用这样的写法,Django前端大法好!!! backgroundColor: '{% if i.event_type == "进行中" %} #00c0ef {% elif i.event_type == "有风险" %} #f56954 {% elif i.event_type == "已结束" %} #c9cc06 {% elif i.event_type == "未开始" %} #000000 {% elif i.event_type == "已验收" %} #00a65a {% endif %}', //获取事件状态加以判断,赋予不同的颜色 borderColor : '{% if i.event_type == "进行中" %} #00c0ef {% elif i.event_type == "有风险" %} #f56954 {% elif i.event_type == "已结束" %} #c9cc06 {% elif i.event_type == "未开始" %} #000000 {% elif i.event_type == "已验收" %} #00a65a {% endif %}', url : 'http://127.0.0.1:8000/naxx/event_detail/?id={{ i.id }}', // 这样可以点击任务,进行进一步的查看、修改或者删除 allDay : true //由于我这个任务不需要精确到具体分钟,所以直接选择一整天 }, {% endfor %} ], selectable: true, selectHelper: true, editable: true, eventLimit: true, select: function (start, end, allDay) { var title = prompt("请输入任务名称:"); if (title) { var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss"); // 任务起始时间,可以精确到秒 var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss"); // 任务结束时间 $.ajax({ type: "GET", url: '/add_event', //这里使用ajax将前端值传送到views.py data: {'title': title, 'start': start, 'end': end}, dataType: "json", success: function (data) { calendar.fullCalendar('refetchEvents'); alert("添加任务成功!!!"); location.reload(); // 刷新一下页面 }, failure: function (data) { alert('添加失败,请检查问题!!!'); } }); } }, }); }); </script> </head> <body> <br/> <h2 align="center"><a href="#">title</a></h2> <br/> <div class="container"> <div id="calendar"></div> </div> </body> </html>
|