full calendar 에서 이벤트를 드래그로 삽입/삭제 하는 기법

Posted by RAY.D
2015. 4. 28. 09:25 Web/fullCalendar
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.






예제 :


https://dl.dropboxusercontent.com/u/33338943/fc/index.html



view-source:https://dl.dropboxusercontent.com/u/33338943/fc/index.html




소스


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link href='fullcalendar/fullcalendar.cssrel='stylesheet' />
<link href='fullcalendar/fullcalendar.print.cssrel='stylesheetmedia='print' />
<link href='css.cssrel='stylesheet' />
<script src='jquery/jquery.min.js'></script>
<script src='jquery/jquery-ui.custom.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script src='js.js'></script>
</head>


<body>
<div class="fr-content">
<div id="cal-scroll">
<div id='calendar'></div>
</div>
<br>


<table id='external-events'>
<tr>
<th colspan="8">Boxes</th>
<th style="cursor:pointer;colspan="2id="forTest">Test</th>
</tr>

<tr>
<td name="roleclass="role">Box Set 1</td>
<td ><div nowrap class="task-box"><div title="1 MDreq-md="1class="external-event">Box 1.1</div><div class="req-md">1</div></div></td>
<td ><div nowrap class="task-box"><div title="3 MDreq-md="3class="external-event">Box 1.2</div><div class="req-md">3</div></div></td>
<td ><div nowrap class="task-box"><div title="6 MDreq-md="6class="external-event">Box 1.3</div><div class="req-md">6</div></div></td>
<td ><div nowrap class="task-box"><div title="4 MDreq-md="4class="external-event">Box 1.4</div><div class="req-md">4</div></div></td>
<td ><div nowrap class="task-box"><div title="8 MDreq-md="8class="external-event">Box 1.5</div><div class="req-md">8</div></div></td>
<td ><div nowrap class="task-box"><div title="5 MDreq-md="5class="external-event">Box 1.6</div><div class="req-md">5</div></div></td>
<td ><div nowrap class="task-box"><div title="11 MDreq-md="11class="external-event">Box 1.7</div><div class="req-md">11</div></div></td>
<td ><div nowrap class="task-box"><div title="6 MDreq-md="6class="external-event">Box 1.8</div><div class="req-md">6</div></div></td>
<td ><div nowrap class="task-box"><div title="9 MDreq-md="9class="external-event">Box 1.9</div><div class="req-md">9</div></div></td>
<td ><div nowrap class="task-box"><div title="2 MDreq-md="2class="external-event">Box 1.10</div><div class="req-md">2</div></div></td>
</tr>
<tr>
<td name="roleclass="role">Box Set 2</td>
<td ><div nowrap class="task-box"><div title="10 MDreq-md="10class="external-event">Box 2.1</div><div class="req-md">10</div></div></td>
<td ><div nowrap class="task-box"><div title="5 MDreq-md="5class="external-event">Box 2.2</div><div class="req-md">5</div></div></td>
<td ><div nowrap class="task-box"><div title="3 MDreq-md="3class="external-event">Box 2.3</div><div class="req-md">3</div></div></td>
<td ><div nowrap class="task-box"><div title="4 MDreq-md="4class="external-event">Box 2.4</div><div class="req-md">4</div></div></td>
<td ><div nowrap class="task-box"><div title="11 MDreq-md="11class="external-event">Box 2.5</div><div class="req-md">11</div></div></td>
<td ><div nowrap class="task-box"><div title="4 MDreq-md="4class="external-event">Box 2.6</div><div class="req-md">4</div></div></td>
<td ><div nowrap class="task-box"><div title="11 MDreq-md="11class="external-event">Box 2.7</div><div class="req-md">11</div></div></td>
<td ><div nowrap class="task-box"><div title="7 MDreq-md="7class="external-event">Box 2.8</div><div class="req-md">7</div></div></td>
<td ><div nowrap class="task-box"><div title="8 MDreq-md="8class="external-event">Box 2.9</div><div class="req-md">8</div></div></td>
<td ><div nowrap class="task-box"><div title="12 MDreq-md="12class="external-event">Box 2.10</div><div class="req-md">12</div></div></td>
</tr>
<tr>
<td name="roleclass="role">Box Set 3</td>
<td ><div nowrap class="task-box"><div title="2 MDreq-md="2class="external-event">Box 3.1</div><div class="req-md">2</div></div></td>
<td ><div nowrap class="task-box"><div title="8 MDreq-md="8class="external-event">Box 3.2</div><div class="req-md">8</div></div></td>
<td ><div nowrap class="task-box"><div title="10 MDreq-md="10class="external-event">Box 3.3</div><div class="req-md">10</div></div></td>
<td ><div nowrap class="task-box"><div title="11 MDreq-md="11class="external-event">Box 3.4</div><div class="req-md">11</div></div></td>
<td ><div nowrap class="task-box"><div title="19 MDreq-md="19class="external-event">Box 3.5</div><div class="req-md">19</div></div></td>
<td ><div nowrap class="task-box"><div title="3 MDreq-md="3class="external-event">Box 3.6</div><div class="req-md">3</div></div></td>
<td ><div nowrap class="task-box"><div title="4 MDreq-md="4class="external-event">Box 3.7</div><div class="req-md">4</div></div></td>
<td ><div nowrap class="task-box"><div title="14 MDreq-md="14class="external-event">Box 3.8</div><div class="req-md">14</div></div></td>
<td ><div nowrap class="task-box"><div title="5 MDreq-md="5class="external-event">Box 3.9</div><div class="req-md">5</div></div></td>
<td ><div nowrap class="task-box"><div title="11 MDreq-md="11class="external-event">Box 3.10</div><div class="req-md">11</div></div></td>
</tr>
<tr>
<td name="roleclass="role">Box Set 4</td>
<td ><div nowrap class="task-box"><div title="11 MDreq-md="11class="external-event">Box 4.1</div><div class="req-md">11</div></div></td>
<td ><div nowrap class="task-box"><div title="12 MDreq-md="12class="external-event">Box 4.2</div><div class="req-md">12</div></div></td>
<td ><div nowrap class="task-box"><div title="13 MDreq-md="13class="external-event">Box 4.3</div><div class="req-md">13</div></div></td>
<td ><div nowrap class="task-box"><div title="14 MDreq-md="14class="external-event">Box 4.4</div><div class="req-md">14</div></div></td>
<td ><div nowrap class="task-box"><div title="15 MDreq-md="15class="external-event">Box 4.5</div><div class="req-md">15</div></div></td>
<td ><div nowrap class="task-box"><div title="16 MDreq-md="16class="external-event">Box 4.6</div><div class="req-md">16</div></div></td>
<td ><div nowrap class="task-box"><div title="17 MDreq-md="17class="external-event">Box 4.7</div><div class="req-md">17</div></div></td>
<td ><div nowrap class="task-box"><div title="18 MDreq-md="18class="external-event">Box 4.8</div><div class="req-md">18</div></div></td>
<td ><div nowrap class="task-box"><div title="19 MDreq-md="19class="external-event">Box 4.9</div><div class="req-md">19</div></div></td>
<td ><div nowrap class="task-box"><div title="20 MDreq-md="20class="external-event">Box 4.10</div><div class="req-md">20</div></div></td>
</tr>

</table>

<div id="message"> </div>
</div>
</body>
</html>