Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
776 lars 1 
<!DOCTYPE html>
2 
<html>
3 
 
4 
    <head>
5 
        <meta charset='utf-8' />
6 
        <link href='../fullcalendar.css' rel='stylesheet' />
7 
        <link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
8 
        <script src='../lib/moment.min.js'></script>
9 
        <script src='../lib/jquery.min.js'></script>
10 
        <script src='../fullcalendar.min.js'></script>
11 
        <script>
12 
            $(document).ready(function()
13 
            {
14 
                var currentTimezone = false;
15 
                // load the list of available timezones
16 
                $.getJSON('php/get-timezones.php', function(timezones)
17 
                {
18 
                    $.each(timezones, function(i, timezone)
19 
                    {
20 
                        if (timezone != 'UTC')
21 
                        { // UTC is already in the list
22 
                            $('#timezone-selector').append($("<option/>").text(timezone).attr('value', timezone));
23 
                        }
24 
                    });
25 
                });
26 
                // when the timezone selector changes, rerender the calendar
27 
                $('#timezone-selector').on('change', function()
28 
                {
29 
                    currentTimezone = this.value || false;
30 
                    $('#calendar').fullCalendar('destroy');
31 
                    renderCalendar();
32 
                });
33 
 
34 
                function renderCalendar()
35 
                {
36 
                    $('#calendar').fullCalendar(
37 
                    {
38 
                        header:
39 
                        {
40 
                            left: 'prev,next today',
41 
                            center: 'title',
42 
                            right: 'month,agendaWeek,agendaDay'
43 
                        },
44 
                        defaultDate: '2015-02-12',
45 
                        timezone: currentTimezone,
46 
                        editable: true,
47 
                        eventLimit: true, // allow "more" link when too many events
48 
                        events:
49 
                        {
50 
                            url: 'php/get-events.php',
51 
                            error: function()
52 
                            {
53 
                                $('#script-warning').show();
54 
                            }
55 
                        },
56 
                        loading: function(bool)
57 
                        {
58 
                            $('#loading').toggle(bool);
59 
                        },
60 
                        eventRender: function(event, el)
61 
                        {
62 
                            // render the timezone offset below the event title
63 
                            if (event.start.hasZone())
64 
                            {
65 
                                el.find('.fc-title').after($('<div class="tzo"/>').text(event.start.format('Z')));
66 
                            }
67 
                        }
68 
                    });
69 
                }
70 
                renderCalendar();
71 
            });
72 
        </script>
73 
        <style>
74 
            body {
75 
                margin: 0;
76 
                padding: 0;
77 
                font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
78 
                font-size: 14px;
79 
            }
80 
 
81 
            #top {
82 
                background: #eee;
83 
                border-bottom: 1px solid #ddd;
84 
                padding: 0 10px;
85 
                line-height: 40px;
86 
                font-size: 12px;
87 
            }
88 
 
89 
            .left {
90 
                float: left
91 
            }
92 
 
93 
            .right {
94 
                float: right
95 
            }
96 
 
97 
            .clear {
98 
                clear: both
99 
            }
100 
 
101 
            #script-warning,
102 
            #loading {
103 
                display: none
104 
            }
105 
 
106 
            #script-warning {
107 
                font-weight: bold;
108 
                color: red
109 
            }
110 
 
111 
            #calendar {
112 
                max-width: 900px;
113 
                margin: 40px auto;
114 
                padding: 0 10px;
115 
            }
116 
 
117 
            .tzo {
118 
                color: #000;
119 
            }
120 
        </style>
121 
    </head>
122 
 
123 
    <body>
124 
        <div id='top'>
125 
            <div class='left'> Timezone:
126 
                <select id='timezone-selector'>
127 
                    <option value='' selected>none</option>
128 
                    <option value='local'>local</option>
129 
                    <option value='UTC'>UTC</option>
130 
                </select>
131 
            </div>
132 
            <div class='right'>
133 
                <span id='loading'>loading...</span>
134 
                <span id='script-warning'><code>php/get-events.php</code> must be running.</span>
135 
            </div>
136 
            <div class='clear'></div>
137 
        </div>
138 
        <div id='calendar'></div>
139 
    </body>
140 
 
141 
</html>