質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

5542閲覧

fullcalendarで日付クリックイベントとドラッグアンドドロップを併用したい

mori_reta

総合スコア10

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/01/17 06:55

fullcalendarのv3.9.0を利用してスケジュールカレンダーを作成しようとしています。
日付をクリックした際に予定入力ができるプログラムと、外部イベントをドラッグアンドドロップするプログラムの両立ができず困っています。

html

1<html> 2 <head> 3 <meta http-equiv="content-type" content="text/html;charset=UTF-8"> 4 <link rel="stylesheet" href="fullcalendar.min.css" media="all"/> 5 <link rel="stylesheet" href="style.css" media="all"/> 6 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 7 <script type="text/javascript" src="moment.min.js"></script> 8 <script type="text/javascript" src="fullcalendar.min.js"></script> 9 <script type="text/javascript" src="ja.js"></script> 10<script src='https://code.jquery.com/ui/1.11.3/jquery-ui.min.js'></script> 11 12 13 14<script> 15 // ページ読み込み時の処理 16 $(document).ready(function () { 17 18 // カレンダーの設定 19 $('#calendar').fullCalendar({ 20 height: 550, 21 lang: "ja", 22 selectable: true, 23 selectHelper: true, 24 select: function(start, end) { 25 var title = prompt("予定タイトル:"); 26 var eventData; 27 if (title) { 28 eventData = { 29 title: title, 30 start: start, 31 end: end 32 }; 33 $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 34 } 35 $('#calendar').fullCalendar('unselect'); 36 }, 37 editable: true, 38 eventLimit: true, 39 }); 40 }); 41</script> 42 43 44 45 46<script> 47 48 $(function() { 49 50 // 外部イベントを初期化します 51 // ----------------------------------------------------------------- 52 53 $('#external-events .fc-event').each(function() { 54 55 // カレンダーがドロップ時にイベントをレンダリングできるようにデータを保存します 56 $(this).data('event', { 57 title: $.trim($(this).text()), // イベントタイトルとして要素のテキストを使用 58 stick: true //ユーザがナビゲートする時に維持する(renderEventメソッドのドキュメントを参照) 59 }); 60 61 // jQuery UIを使用してイベントをドラッグ可能にします 62 $(this).draggable({ 63 zIndex: 999, 64 revert: true, // イベントをもとの状態に戻します 65 revertDuration: 0 // ドラッグ後の元の位置 66 }); 67 68 }); 69 70 // カレンダーを初期化します 71 // ----------------------------------------------------------------- 72 73 $('#calendar').fullCalendar({ 74 header: { 75 left: 'prev,next today', 76 center: 'title', 77 right: 'month,agendaWeek,agendaDay' 78 }, 79 editable: true, 80 droppable: true, // これにより、モノをカレンダーにドロップできます 81 drop: function() { 82 // 「ドロップ後に削除」チェックボックスがオンになっていますか? 83 if ($('#drop-remove').is(':checked')) { 84 // その場合、「ドラッグ可能なイベント」リストから要素を削除します 85 $(this).remove(); 86 } 87 } 88 }); 89 90}); 91 92</script> 93 94 95 96 97<style> 98 99 html, body { 100 margin: 0; 101 padding: 0; 102 font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; 103 font-size: 14px; 104} 105 106#external-events { 107 position: fixed; 108 z-index: 2; 109 top: 20px; 110 left: 20px; 111 width: 150px; 112 padding: 0 10px; 113 border: 1px solid #ccc; 114 background: #eee; 115} 116 117#external-events .fc-event { 118 margin: 1em 0; 119 cursor: move; 120} 121 122#calendar-container { 123 position: relative; 124 z-index: 1; 125 margin-left: 200px; 126} 127 128#calendar { 129 max-width: 900px; 130 margin: 20px auto; 131} 132 133</style> 134 135 </head> 136 <body> 137 138 139 140 141<div id='external-events'> 142 <p> 143 <strong>Draggable Events</strong> 144 </p> 145 <div class='fc-event'>My Event 1</div> 146 <div class='fc-event'>My Event 2</div> 147 <div class='fc-event'>My Event 3</div> 148 <div class='fc-event'>My Event 4</div> 149 <div class='fc-event'>My Event 5</div> 150 <p> 151 <input type='checkbox' id='drop-remove' /> 152 <label for='drop-remove'>remove after drop</label> 153 </p> 154</div> 155 156<div id='calendar-container'> 157 <div id='calendar'></div> 158</div> 159 160 161 </body> 162</html> 163

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

ほかの方に回答をいただきました。本当にありがとうございます。

html

1<script> 2 // ページ読み込み時の処理 3$(document).ready(function () { 4 5 // 外部イベントを初期化します 6 // ----------------------------------------------------------------- 7 $('#external-events .fc-event').each(function() { 8 // カレンダーがドロップ時にイベントをレンダリングできるようにデータを保存します 9 $(this).data('event', { 10 title: $.trim($(this).text()), // イベントタイトルとして要素のテキストを使用 11 stick: true //ユーザがナビゲートする時に維持する(renderEventメソッドのドキュメントを参照) 12 }); 13 14 // jQuery UIを使用してイベントをドラッグ可能にします 15 $(this).draggable({ 16 zIndex: 999, 17 revert: true, // イベントをもとの状態に戻します 18 revertDuration: 0 // ドラッグ後の元の位置 19 }); 20 }); 21 22 // カレンダーの設定 23 $('#calendar').fullCalendar({ 24 header: { 25 left: 'prev,next today', 26 center: 'title', 27 right: 'month,agendaWeek,agendaDay' 28 }, 29 height: 550, 30 lang: "ja", 31 selectable: true, 32 selectHelper: true, 33 select: function(start, end) { 34 var title = prompt("予定タイトル:"); 35 var eventData; 36 if (title) { 37 eventData = { 38 title: title, 39 start: start, 40 end: end 41 }; 42 $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 43 } 44 $('#calendar').fullCalendar('unselect'); 45 }, 46 droppable: true, // これにより、モノをカレンダーにドロップできます 47 drop: function() { 48 // 「ドロップ後に削除」チェックボックスがオンになっていますか? 49 if ($('#drop-remove').is(':checked')) { 50 // その場合、「ドラッグ可能なイベント」リストから要素を削除します 51 $(this).remove(); 52 } 53 }, 54 editable: true, 55 eventLimit: true, 56 }); 57 58}); 59</script> 60

投稿2020/01/20 01:52

mori_reta

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問