Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
4113 efrain 1 
<!DOCTYPE html>
2 
<html>
3 
<head>
4 
<meta charset='utf-8' />
5 
<link href='../fullcalendar.min.css' rel='stylesheet' />
6 
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
7 
<script src='../lib/moment.min.js'></script>
8 
<script src='../lib/jquery.min.js'></script>
9 
<script src='../lib/jquery-ui.min.js'></script>
10 
<script src='../fullcalendar.min.js'></script>
11 
<script>
12 
 
13 
  $(document).ready(function() {
14 
 
15 
 
16 
    /* initialize the external events
17 
    -----------------------------------------------------------------*/
18 
 
19 
    $('#external-events .fc-event').each(function() {
20 
 
21 
      // store data so the calendar knows to render an event upon drop
22 
      $(this).data('event', {
23 
        title: $.trim($(this).text()), // use the element's text as the event title
24 
        stick: true // maintain when user navigates (see docs on the renderEvent method)
25 
      });
26 
 
27 
      // make the event draggable using jQuery UI
28 
      $(this).draggable({
29 
        zIndex: 999,
30 
        revert: true,      // will cause the event to go back to its
31 
        revertDuration: 0  //  original position after the drag
32 
      });
33 
 
34 
    });
35 
 
36 
 
37 
    /* initialize the calendar
38 
    -----------------------------------------------------------------*/
39 
 
40 
    $('#calendar').fullCalendar({
41 
      header: {
42 
        left: 'prev,next today',
43 
        center: 'title',
44 
        right: 'month,agendaWeek,agendaDay'
45 
      },
46 
      editable: true,
47 
      droppable: true, // this allows things to be dropped onto the calendar
48 
      drop: function() {
49 
        // is the "remove after drop" checkbox checked?
50 
        if ($('#drop-remove').is(':checked')) {
51 
          // if so, remove the element from the "Draggable Events" list
52 
          $(this).remove();
53 
        }
54 
      }
55 
    });
56 
 
57 
 
58 
  });
59 
 
60 
</script>
61 
<style>
62 
 
63 
  body {
64 
    margin-top: 40px;
65 
    text-align: center;
66 
    font-size: 14px;
67 
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
68 
  }
69 
 
70 
  #wrap {
71 
    width: 1100px;
72 
    margin: 0 auto;
73 
  }
74 
 
75 
  #external-events {
76 
    float: left;
77 
    width: 150px;
78 
    padding: 0 10px;
79 
    border: 1px solid #ccc;
80 
    background: #eee;
81 
    text-align: left;
82 
  }
83 
 
84 
  #external-events h4 {
85 
    font-size: 16px;
86 
    margin-top: 0;
87 
    padding-top: 1em;
88 
  }
89 
 
90 
  #external-events .fc-event {
91 
    margin: 10px 0;
92 
    cursor: pointer;
93 
  }
94 
 
95 
  #external-events p {
96 
    margin: 1.5em 0;
97 
    font-size: 11px;
98 
    color: #666;
99 
  }
100 
 
101 
  #external-events p input {
102 
    margin: 0;
103 
    vertical-align: middle;
104 
  }
105 
 
106 
  #calendar {
107 
    float: right;
108 
    width: 900px;
109 
  }
110 
 
111 
</style>
112 
</head>
113 
<body>
114 
  <div id='wrap'>
115 
 
116 
    <div id='external-events'>
117 
      <h4>Draggable Events</h4>
118 
      <div class='fc-event'>My Event 1</div>
119 
      <div class='fc-event'>My Event 2</div>
120 
      <div class='fc-event'>My Event 3</div>
121 
      <div class='fc-event'>My Event 4</div>
122 
      <div class='fc-event'>My Event 5</div>
123 
      <p>
124 
        <input type='checkbox' id='drop-remove' />
125 
        <label for='drop-remove'>remove after drop</label>
126 
      </p>
127 
    </div>
128 
 
129 
    <div id='calendar'></div>
130 
 
131 
    <div style='clear:both'></div>
132 
 
133 
  </div>
134 
</body>
135 
</html>