輕量級辦公平台開發實錄(11)：FullCalendar
來自專欄 SandBox
5 人贊了文章
FullCalendar是一個基於jquery的日曆插件，可用來管理日程安排，記錄工作日誌，它的功能很強大，本節主要是來介紹下FullCalendar的基本使用，更多用法可參考官方文檔：https://fullcalendar.io/docs
本節使用sandboxOA v4.0版本：增加了 django admin配置，增加了dailreport app, 修改了資料庫連接設置，使用sqlite3文件資料庫（解決部分網友不熟悉mysql數據安裝配置的苦惱）1、克隆新版本到本地
進入要存放項目的目錄，右鍵滑鼠，選擇 "Git Bash Here" ，打開git命令窗口，在Git Bash命令窗口輸入：
$ git clone git@github.com:RobbieHan/sandboxOA.git
本節課程使用v4.0來創建dev分支,進入項目文件目錄，運行 Git Bash：
$ git checkout -B dev v4.0
本地運行環境配置、使用pycharm運行項目請參考前面幾節文章。
2、新建日程管理模板
使用pycharm打開項目，在sandboxOA/templates/目錄下創建新的目錄dailyreport（在pycharm下右鍵sandboxOA/templates/選擇【New】→【Directory】在彈窗中輸入dailyreport選擇【ok】完成）, 在新建的目錄下創建HTML文件：myreport.html， 清空myreport.html 裡面的內容， 新增模板目錄結構如下：
/sandboxOA/ # 項目根目錄 |-- templates # html模板文件存放目錄 |-- dailyreport -- myreport.html # 清空文件內容
打開sandboxOA/templates/dailyreport/myreport.html，配置模板繼承和模板內容：
{% extends "base-left.html" %}{% load staticfiles %}{% block css %}{% endblock %}{% block content %} <section class="content-header margin-bottom"> <ol class="breadcrumb"> <li><a href="">辦公平台</a></li> <li><a href="#">我的日報</a></li> </ol> </section> <!-- Main content --> <section class="content"> </section> <!-- /.content -->{% endblock %}{% block javascripts %}{% endblock %}
模板標籤說明： - {% extends %}: 關鍵標籤，用來指定繼承的模板，myreport.html 繼承了 base-left.html模板。 - {% block %}: django提供了強大的模板繼承功能，在理解{% block %} 標籤前，先來回顧下我們的模板繼承關係：
base-static.html → head-footer.html → base-left.html → myreport.html
我們在base-left.html 模板中寫入了一個{% block content %}{% endblock %}, 相當於挖了一個坑，這個坑可以被子模版內容填充，所以我們在myreport.html文件中{% block content %}{% endblock %}裡面寫入的內容都將會被填充到父模對應的坑中。
base-static.html包含了一些基礎的樣式文件和js文件，同時還挖了兩個坑，用來填充其他樣式文件和js腳本，比如在myreport.html模板中我們需要使用到FullCalendar的樣式文件，就可以寫在{% block css %}{% endblock %}中。3、創建我的日報視圖
打開sandboxOA/apps/dailyreport/views.py,寫入如下內容：
from django.shortcuts import renderfrom django.views.generic.base import Viewfrom system.mixin import LoginRequiredMixinclass MyReportView(LoginRequiredMixin, View): def get(self, request): return render(request, dailyreport/myreport.html)
4、添加url
打開sandboxOA/sandboxOA/urls.py文件，添加如下內容：
......from dailyreport import viewsurlpatterns = [ ...... url(r^myreport/$, views.MyReportView.as_view(), name=myreport),]
到這裡，使用pycharm運行項目後，就可以使用http://127.0.0.1:8000/myreport/來訪問我的日報頁面了，不過現在頁面還是空的。
5、使用FullCalendar
編輯sandboxOA/template/dailyreport/myreport.html文件：
{% extends "base-left.html" %}{% load staticfiles %}{% block css %} <link href="{% static plugins/fullcalendar/fullcalendar.min.css %}" rel="stylesheet"/>{% endblock %}{% block content %} <section class="content-header margin-bottom"> <ol class="breadcrumb"> <li><a href="">辦公平台</a></li> <li><a href="#">我的日報</a></li> </ol> </section> <!-- Main content --> <section class="content"> <div class="box box-primary"> <div class="box-body no-padding"> <!-- THE CALENDAR --> <div id="calendar"> </div> </div> <!-- /.box-body --> </div> </section> <!-- /.content -->{% endblock %}{% block javascripts %} <script src="{% static plugins/daterangepicker/moment.min.js %}"></script> <script src="{% static plugins/fullcalendar/fullcalendar.min.js %}"></script> <script type="text/javascript"> $(function () { //初始化FullCalendar $(#calendar).fullCalendar({ }); }); </script>{% endblock %}
內容說明： - {% block css %} {% endblock %} 標籤中引入了fullcalendar樣式文件 - {% block content %}{% endblock %} 標籤中寫入了頁面內容 - {% block javascripts %} {% endblock %}標籤中引入了fullcalendar的js文件，並作了初始化配置，同時還引入了moment.min.js一個JavaScript 日期處理類庫 打開http://127.0.0.1:8000/myreport 就可以看到日曆表，效果如下：
6、FullCalendar初始化配置
初始化配置內容包括，日期顯示的漢化，日期顯示格式設置，日曆頭部按鈕設置。
修改myreport.html文件 fullCalendar初始化的js配置：
<script type="text/javascript"> $(function () { //初始化FullCalendar $(#calendar).fullCalendar({ buttonText: { today: 今天, month: 月, week: 周, day: 日, }, allDayText: "全天", timeFormat: HH:mm, views: { month: {titleFormat: YYYY年MMMM月}, week: {titleFormat: YYYY年MMMM月}, day: {titleFormat: YYYY年MMMM月D日}, }, monthNames: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], monthNamesShort: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], dayNames: ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], dayNamesShort: ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], //defaultView: agendaWeek, contentHeight: 650, header: { //日曆頭部左邊：初始化切換按鈕 left: prev,next today, //日曆頭部中間：顯示當前日期信息 center: title, //日曆頭部右邊：初始化視圖 right: month,agendaWeek,agendaDay }, //設置是否顯示周六和周日，設為false則不顯示 weekends: true, }); }); </script>
初始化配置後刷新myreport頁面查看效果：
日曆內容已經成功漢化，同時新增了月，周，日視圖和時間後退 前進按鈕。
7、FullCalendar添加自定義按鈕
我們想在日曆表上添加一個按鈕，用來添加日程數據，這裡就需要使用到FullCalendar的customButtons，修改myreport.html文件中FullCalendar的初始化配置文件：
<script type="text/javascript"> $(function () { //初始化FullCalendar $(#calendar).fullCalendar({ .... // 新增內容：自定義按鈕 customButtons: { reportAddButton: { text: 添加, click: function(){ alert(這是一個自定義按鈕); } }, }, header: { //日曆頭部左邊：初始化切換按鈕 left: prev,next today reportAddButton, //日曆頭部中間：顯示當前日期信息 center: title, //日曆頭部右邊：初始化視圖 right: month,agendaWeek,agendaDay }, //設置是否顯示周六和周日，設為false則不顯示 weekends: true, }); }); </script>
我們使用customButtons創建了一個自定義按鈕reportAddButton, 同時將reportAddButton添加到日曆表格頭部的左側窗口，頁面顯示效果：
我們在添加自定義按鈕的時候定義了click 觸發alert事件彈窗：
8、在日曆上添加日程數據
FullCalendar可以直接添加數據，可以接收json數據，修改myreport.html文件中FullCalendar的初始化配置文件，保留原有的內容，添加下面的events內容：
<script type="text/javascript"> $(function () { //初始化FullCalendar $(#calendar).fullCalendar({ ....... //新增的events events: [ { title: 測試用的日程數據, start: 2018-09-08 }, { title: 新的工作計劃, start: 2018-09-10 }, ] }); }); </script>
日程數據的顯示效果：
謝謝您的閱讀，今天就到這裡，下一節將會結合django實現日程數據的添加和展示。
非常歡迎感興趣的朋友，到我的Github或知乎上做客，閑暇之餘給個贊或Star，贈人玫瑰手留余香^_^
知乎專欄SandBox：https://zhuanlan.zhihu.com/sandbox 輕量級辦公管理系統項目開源地址：https://github.com/RobbieHan/gistandard （乙方流程版） 輕量級辦公管理系統：https://github.com/RobbieHan/sandboxOA （定製版，本記錄同步項目）QQ技術交流區：83792608推薦閱讀：
※Pandas基礎（三）
※leetcode上的python練習（5）
※如何 Docker 化 Python Django 應用程序
※Zmail--讓郵件變得簡單(python)
※Numpy基礎實用技巧概覽