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

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

行動規範の内容に同意します

回答1件

自己解決

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

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