【Python】FullCalendarとBootstrapで詳細な予定を登録できるようにする

2018年6月24日Javascript,Python,開発

おはようございます。

前回に引き続き、
FullCalendarとMySQLとの連携ですが
今回は Bootstrap を使って入力ダイアログを表示し、少し詳細な予定を登録できるようにしていきます。

プログラムは前回のを流用します。

スポンサーリンク

データベース変更

新たに、予定の詳細用にカラムを追加します。

画面の修正

変更点

1. 予定の入力フォームを Bootstrapのダイアログで作成
2. 日付、時刻の入力にBootstrap DateTimePicker、moment.jsを利用
3. Javascriptを外部ファイルにする

Bootstrap、DateTimePicker用のライブラリをCDNから読み込み、
(普段は非表示の)予定入力モーダルダイアログを追加。

index.html

入力フォーム用にスタイル定義を追加。
style.css

プログラムの修正

クライアント側プログラム(JavaScript)

ちょっと日付まわりとか色々とごにょごにょしていますが、そのうち綺麗に整理します。

script.js

サーバー側(Python)

追加したカラムもクライアントから連携して登録するように修正。
また、クライアントにJSONを返すようにして、画面の情報も更新します。

Main.py

MySQLUtil.py

カラム追加したので、その修正も行う。

起動してみる

初期表示
初期表示
入力ダイアログ
入力ダイアログ

日付をクリック、またはドラッグすると予定入力用のダイアログフォームが表示されます。

予定登録
予定登録

予定を入力して登録ボタンをクリックします。

登録完了
登録完了

登録完了メッセージが表示されればOKです。

カレンダーに反映される
カレンダーに反映される

ダイアログを閉じると、カレンダーに登録された予定が反映されています。

まとめ

細かいところは全然なので最終的にブラッシュアップが必要ですが、とりあえず使える感じにはなってきてますね。

少し長くなってしまったので、
既に登録されている予定の更新や削除はまた次回に。

ではでは。

 

スポンサーリンク


関連するコンテンツ