【Python】FullCalendar を使ったWEBページを作ってみる

公開日:2018-12-21
最終更新:2018-12-21
※この記事は外部サイト(https://www.doraxdora.com/blog/2018/06/18/...)からのクロス投稿です

おはようございます。

ちょっと前に、JQueryプラグインの「FullCalendar.js」を使って
カレンダーを表示するサンプルを作ってみましたが、
今回は PythonでWEBサーバーを立てて、実際にサーバーとやりとりするサンプルを作ってみました。

FullCalendarの記事はこちら。

【JavaScript】JQueryプラグインの「FullCalendar」を使ってカレンダーをサクッと表示してみる

プロジェクトの作成

PyCharmを利用していきます。 プロジェクトの作成方法は次の記事を参考にしていただければ。

【Python】PyCharmのインストールからHello Worldまで

プロジェクトの構成は次の通り。

CalendarSample
│ Main.py

├─static
│ ├─css
│ │ fullcalendar.min.css
│ │ fullcalendar.print.min.css
│ │ style.css
│ │
│ ├─js
│ │ fullcalendar.min.js
│ │ moment.min.js
│ │
│ └─lang
│ ja.js

└─templates
index.html

プログラム

画面

index.html

  
<!DOCTYPE html>  
<html>  
    <head>  
        <title>カレンダーサンプル</title>  
        <link rel="stylesheet" href="{{ static_url('css/fullcalendar.min.css') }}"/>  
        <link rel="stylesheet" href="{{ static_url('css/style.css') }}"/>  
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
        <script type="text/javascript" src="{{ static_url('js/moment.min.js') }}"></script>  
        <script type="text/javascript" src="{{ static_url('js/fullcalendar.min.js') }}"></script>  
        <script type="text/javascript" src="{{ static_url('lang/ja.js') }}"></script>  
        <script>  
            // ページ読み込み時の処理  
            $(document).ready(function () {  

            // カレンダーの設定  
            $('#calendar').fullCalendar({  
                height: 550,  
                lang: "ja",  
                header: {  
                    left: 'prev,next today',  
                    center: 'title',  
                    right: 'month,basicWeek,basicDay'  
                },  
                selectable: true,  
                selectHelper: true,  
                navLinks: true,  
                events: {  
                    url: 'http://localhost:8080/getCalendar',  
                    error: function() {  
                        $('#script-warning').show();  
                    }  
                },  
                select: function(start, end) {  
                    var title = prompt("予定タイトル:");  
                    var eventData;  
                    if (title) {  
                            eventData = {  
                            title: title,  
                            start: start,  
                            end: end  
                        };  
                        $('#calendar').fullCalendar('renderEvent', eventData, true);  
                    }  
                    $('#calendar').fullCalendar('unselect');  
                    },  
                    editable: true,  
                    eventLimit: true,  
                });  
            });  
        </script>  
    </head>  
    <body>  
        <div id='calendar'></div>  
    </body>  
</html>

style.css

body {  
    margin: 40px 10px;  
    padding: 0;  
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;  
    font-size: 14px;  
}  
#calendar {  
    max-width: 900px;  
    margin: 0 auto;  
}          

html > body {  
    font-family: 'Noto Sans Japanese','Segoe UI','Verdana','Helvetica','Arial', sans-serif;  
}  
.fc-left h2 {  
    font-weight: normal;  
}  
.fc-widget-header th {  
    background-color: #f8dbc6;  
}  
th.fc-day-header, th.fc-widget-header {  
    color: #550000;  
    font-size: 14px;  
    font-weight: normal;  
}  
.fc-sun > span {  
    color: #cd384b;  
}  
.fc-sat > span {  
    color: #415ea6;  
}  
td.fc-sun {  
    background-color: #fae6e3;  
}  
td.fc-sat {  
    background-color: #dceef7;  
}  
.fc-unthemed .fc-content,   
.fc-unthemed .fc-divider,   
.fc-unthemed .fc-list-heading td,   
.fc-unthemed .fc-list-view,   
.fc-unthemed .fc-popover,   
.fc-unthemed .fc-row,   
.fc-unthemed tbody,   
.fc-unthemed td,   
.fc-unthemed th,   
.fc-unthemed thead {  
    border-color: #d1ccd9;  
}  

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {  
    float: left;  
}  

サーバー側

とりあえずデータはべた書きですが。

Main.py

import json  
import logging  
import os  
import tornado.ioloop  

from tornado.web import RequestHandler  
from tornado.options import options  

class MainHandler(tornado.web.RequestHandler):  
    def get(self):  
        self.render("index.html")  


class GetCalendar(RequestHandler):  
    """  
    カレンダー取得  
    """  

    def initialize(self):  
        logging.info("GetCalendar [initialize]")  

    def get(self):  
        logging.info("GetCalendar [get]")  
        data = [  
            {  
                "title": "All Day Event",  
                "start": "2018-06-01"  
            },  
            {  
                "title": "Long Event",  
                "start": "2018-06-07",  
                "end": "2018-06-10"  
            },  
            {  
                "id": "999",  
                "title": "Repeating Event",  
                "start": "2018-06-09T16:00:00-05:00"  
            },  
            {  
                "id": "999",  
                "title": "Repeating Event",  
                "start": "2018-06-16T16:00:00-05:00"  
            },  
            {  
                "title": "Conference",  
                "start": "2018-06-11",  
                "end": "2018-06-13"  
            },  
            {  
                "title": "Meeting",  
                "start": "2018-06-12T10:30:00-05:00",  
                "end": "2018-06-12T12:30:00-05:00"  
            },  
            {  
                "title": "Lunch",  
                "start": "2018-06-12T12:00:00-05:00"  
            },  
            {  
                "title": "Meeting",  
                "start": "2018-06-12T14:30:00-05:00"  
            },  
            {  
                "title": "Happy Hour",  
                "start": "2018-06-12T17:30:00-05:00"  
            },  
            {  
                "title": "Dinner",  
                "start": "2018-06-12T20:00:00"  
            },  
            {  
                "title": "Birthday Party",  
                "start": "2018-06-13T07:00:00-05:00"  
            },  
            {  
                "title": "Click for Google",  
                "url": "http://google.com/",  
                "start": "2018-06-28"  
            }  
        ]  

        self.write(json.dumps(data))  

app = tornado.web.Application([  
    (r"/", MainHandler),  
    (r"/getCalendar", GetCalendar),  
],  
    template_path=os.path.join(os.getcwd(), "templates"),  
    static_path=os.path.join(os.getcwd(), "static"),  
)  

if __name__ == "__main__":  
    options.parse_command_line()  
    app.listen(8080)  
    logging.info("server started")  
    tornado.ioloop.IOLoop.instance().start()  

起動してみる

前回のサンプルは月間のみでしたが、週表示、日表示もついでにやってみました。

まとめ

ひとまずこれでサーバー側とのやり取りができるようになりました。 次回は実際にデータベースを用いてデータの登録までやりたいと思います。

ではでは。

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
@doraxdoraの技術ブログ 主に Java, C#, Python, Javascript の記事を載せていく予定。

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする