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='../fullcalendar.min.js'></script>
10 
<script>
11 
 
12 
  $(document).ready(function() {
13 
 
14 
    $('#calendar').fullCalendar({
15 
      header: {
16 
        left: 'prev,next today',
17 
        center: 'title',
18 
        right: 'month,agendaWeek,agendaDay,listWeek'
19 
      },
20 
      defaultDate: '2020-05-12',
21 
      navLinks: true, // can click day/week names to navigate views
22 
      editable: true,
23 
      selectable: true,
24 
      eventLimit: true, // allow "more" link when too many events
25 
      events: {
26 
        url: 'php/get-events.php',
27 
        error: function() {
28 
          $('#script-warning').show();
29 
        }
30 
      },
31 
      loading: function(bool) {
32 
        $('#loading').toggle(bool);
33 
      },
34 
      eventRender: function(event, el) {
35 
        // render the timezone offset below the event title
36 
        if (event.start.hasZone()) {
37 
          el.find('.fc-title').after(
38 
            $('<div class="tzo"/>').text(event.start.format('Z'))
39 
          );
40 
        }
41 
      },
42 
      dayClick: function(date) {
43 
        console.log('dayClick', date.format());
44 
      },
45 
      select: function(startDate, endDate) {
46 
        console.log('select', startDate.format(), endDate.format());
47 
      }
48 
    });
49 
 
50 
    // load the list of available timezones, build the <select> options
51 
    $.getJSON('php/get-timezones.php', function(timezones) {
52 
      $.each(timezones, function(i, timezone) {
53 
        if (timezone != 'UTC') { // UTC is already in the list
54 
          $('#timezone-selector').append(
55 
            $("<option/>").text(timezone).attr('value', timezone)
56 
          );
57 
        }
58 
      });
59 
    });
60 
 
61 
    // when the timezone selector changes, dynamically change the calendar option
62 
    $('#timezone-selector').on('change', function() {
63 
      $('#calendar').fullCalendar('option', 'timezone', this.value || false);
64 
    });
65 
  });
66 
 
67 
</script>
68 
<style>
69 
 
70 
  body {
71 
    margin: 0;
72 
    padding: 0;
73 
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
74 
    font-size: 14px;
75 
  }
76 
 
77 
  #top {
78 
    background: #eee;
79 
    border-bottom: 1px solid #ddd;
80 
    padding: 0 10px;
81 
    line-height: 40px;
82 
    font-size: 12px;
83 
  }
84 
  .left { float: left }
85 
  .right { float: right }
86 
  .clear { clear: both }
87 
 
88 
  #script-warning, #loading { display: none }
89 
  #script-warning { font-weight: bold; color: red }
90 
 
91 
  #calendar {
92 
    max-width: 900px;
93 
    margin: 40px auto;
94 
    padding: 0 10px;
95 
  }
96 
 
97 
  .tzo {
98 
    color: #000;
99 
  }
100 
 
101 
</style>
102 
</head>
103 
<body>
104 
 
105 
  <div id='top'>
106 
 
107 
    <div class='left'>
108 
      Timezone:
109 
      <select id='timezone-selector'>
110 
        <option value='' selected>none</option>
111 
        <option value='local'>local</option>
112 
        <option value='UTC'>UTC</option>
113 
      </select>
114 
    </div>
115 
 
116 
    <div class='right'>
117 
      <span id='loading'>loading...</span>
118 
      <span id='script-warning'><code>php/get-events.php</code> must be running.</span>
119 
    </div>
120 
 
121 
    <div class='clear'></div>
122 
 
123 
  </div>
124 
 
125 
  <div id='calendar'></div>
126 
 
127 
</body>
128 
</html>