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