Djangoでfullcalendar.jsを使いTodoアプリを作る
- 作成日時:
- 最終更新日時:
- Categories: サーバーサイド
- Tags: Django JavaScript
fullcalendar.jsを早速実践運用してみた。 まだまだ足りない箇所は有るかもしれないが、ここから徐々に発展させ、ゆくゆくはReactと組み合わせてSPAを作りたいところだ。 詳細はソースコードを見ていただきたい。これまでのDjangoとほとんど変わりはないので、記事内ではfullcalendar.jsの部分だけまとめる。 テンプレート index.html {% load static %} <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>To ...DjangoMessageFrameworkにJavaScriptとCSSを当てる【ボタンを押して消せるようにする】
- 作成日時:
- 最終更新日時:
- Categories: サーバーサイド
- Tags: Django JavaScript CSS ウェブデザイン
DjangoMessageFrameworkは投稿完了した旨やエラーの理由をクライアント側に表示することができるが、表示させっぱなしになるので少々鬱陶しく感じることもある。 そこで5秒経ったら自動的に消すように仕立てたり、バツボタンを押して消せるように仕立てた。 さらに、fontawesomeを使用している。 ソースコード テンプレート <div class="notify_message_area"> {% for message in messages %} <div class="notify_message notify_message_{{ message.tags }}"> <div class="notify_message_content">{{ message }}</div> <div class="notify_message_delete"><i class="fas fa-times"></i></div> </div> {% endfor %} </div> JavaScript(jQuery) //Django ...【JavaScriptカレンダー】fullcalendarを使ってみる【ライブラリ】
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: JavaScriptライブラリ JavaScript ウェブデザイン 追記予定
JavaScriptを使ってカレンダーを表示する。 基本のカレンダー表示 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.6/index.global.min.js"></script> <script> //ページが読まれたときに下記を実行 document.addEventListener('DOMContentLoaded', function() { //カレンダーの要素を取得 const calendarEl = document.getElementById('calendar'); // オブジェクトを作成 FullCalendar.Calendar() を実行。引数として要素と表示するカレンダーの設定 const calendar = new FullCalendar.Calendar(calendarEl, { initialView: 'dayGridMonth', events: [ { title : 'イベント1', start : '2023-05-01' }, { title : 'イベント2', start : '2023-05-05', end : '2023-05-07' }, { title : 'イベント3', start : '2023-04-09T12:30:00', allDay : false // will make the time show } ] }); //カレンダー ...【Django】Stripeでサブスクリプション決済を行う
【django】summernoteを使用してwysiwygエディタを表示させる【マークダウンよりも簡単】
inputタグのtype='file'で画像のサムネイルを表示させる
fontawesomeを使用しているので、アイコンの表示は別途CDNをインストールしておいてほしい。 ソースコード HTML <label class="image_input_area"> <input class="image_input" type="file" name="icon" accept="image/*"> <div class="image_input_icon"><i class="fas fa-image"></i></div> <img class="image_input_preview" src="" alt=""> </label> CSS .image_input_area { display:inline-block; border:dashed 0.2rem var(--gray); width:5rem; height:5rem; position:relative; cursor:pointer; } .image_input{ display:none; } .image_input_preview{ width:100%; height:100%;position:absolute; } .image_input_icon{ width:100%; height:100%;position:absolute; } .image_input_icon i{ font-size:2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } JavaScript(jQuery) $(".image_input").change(function() { const label = $(this).parent("label"); const file = $(this).prop("files")[0]; // 画像以外は処理を停止 if (! file.type.match("image.*")) { $(this).val(""); return; } // 画像表示 const reader = new FileReader(); reader.onload = function() { label.children(".image_input_preview").prop("src", reader.result ); } reader.readAsDataURL(file); }); 【別解】JavaScript(バニラ) window.addEventListener("load" , function (){ document.addEventListener("change", (event) => { // type="file ...frappe-ganttを使ってJavaScriptでガントチャートを表現する
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: JavaScript WEBデザイン JavaScriptライブラリ
chart.jsにはガントチャートは存在しないため、frappe-gantt.jsを使う ソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.6.1/frappe-gantt.css" integrity="sha512-57KPd8WI3U+HC1LxsxWPL2NKbW82g0BH+0PuktNNSgY1E50mnIc0F0cmWxdnvrWx09l8+PU2Kj+Vz33I+0WApw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/frappe-gantt/0.6.1/frappe-gantt.min.js" integrity="sha512-HyGTvFEibBWxuZkDsE2wmy0VQ0JRirYgGieHp0pUmmwyrcFkAbn55kZrSXzCgKga04SIti5jZQVjbTSzFpzMlg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <style> .gantt .bar-label{ font-weight:bold; } .gantt .bar-progress { fill: orange; } .gantt .today-highlight { fill: #00ffcc; } </style> </head> <body> <svg id="gantt"></svg> <script> const tasks = [ { id: '1', name: 'frappe-ganttの実装テスト', description: 'ここに説明文を書く', start: '2023-03-31', end: '2023-04-03', progress: 100, }, { id: '2', name: 'frappe-ganttの実装', description: 'ここに説明文を書く', start: '2023-04-01', end: '2023-04-05', progress: 20, }, ] const gantt = new Gantt("#gantt", ...【Django】管理サイトで任意のJavaScript、CSSを発動させる【管理サイトのカスタム】
前提 前もって、プロジェクト直下のtemplatesが作られており、settings.pyのTEMPLATESでもそれが読まれている状況であるとする。 TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / "templates" ], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] 作業 templatesの中にadminディレクトリを作る。 mkdir templates/admin/ templates/admin/base.htmlを作る。内容は下記。 {% extends 'admin/base.html' %} {% block extrastyle %}{{ block.super }} <style> body{ background:orange; } </style> <script>console.log("test;");</script> {% endblock %} これで管理サイトの全ページでC ...【LPIC】fileコマンドでMIMEタイプを調べておく