Subversion-Projekte lars-tiefland.cienc

Revision

Blame | Letzte Änderung | Log anzeigen | RSS feed 

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/jquery-ui.custom.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script>

        $(document).ready(function() {


                /* initialize the external events
                -----------------------------------------------------------------*/

                $('#external-events .fc-event').each(function() {

                        // store data so the calendar knows to render an event upon drop
                        $(this).data('event', {
                                title: $.trim($(this).text()), // use the element's text as the event title
                                stick: true // maintain when user navigates (see docs on the renderEvent method)
                        });

                        // make the event draggable using jQuery UI
                        $(this).draggable({
                                zIndex: 999,
                                revert: true,      // will cause the event to go back to its
                                revertDuration: 0  //  original position after the drag
                        });

                });


                /* initialize the calendar
                -----------------------------------------------------------------*/

                $('#calendar').fullCalendar({
                        header: {
                                left: 'prev,next today',
                                center: 'title',
                                right: 'month,agendaWeek,agendaDay'
                        },
                        editable: true,
                        droppable: true, // this allows things to be dropped onto the calendar
                        drop: function() {
                                // is the "remove after drop" checkbox checked?
                                if ($('#drop-remove').is(':checked')) {
                                        // if so, remove the element from the "Draggable Events" list
                                        $(this).remove();
                                }
                        }
                });


        });

</script>
<style>

        body {
                margin-top: 40px;
                text-align: center;
                font-size: 14px;
                font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }
                
        #wrap {
                width: 1100px;
                margin: 0 auto;
        }
                
        #external-events {
                float: left;
                width: 150px;
                padding: 0 10px;
                border: 1px solid #ccc;
                background: #eee;
                text-align: left;
        }
                
        #external-events h4 {
                font-size: 16px;
                margin-top: 0;
                padding-top: 1em;
        }
                
        #external-events .fc-event {
                margin: 10px 0;
                cursor: pointer;
        }
                
        #external-events p {
                margin: 1.5em 0;
                font-size: 11px;
                color: #666;
        }
                
        #external-events p input {
                margin: 0;
                vertical-align: middle;
        }

        #calendar {
                float: right;
                width: 900px;
        }

</style>
</head>
<body>
        <div id='wrap'>

                <div id='external-events'>
                        <h4>Draggable Events</h4>
                        <div class='fc-event'>My Event 1</div>
                        <div class='fc-event'>My Event 2</div>
                        <div class='fc-event'>My Event 3</div>
                        <div class='fc-event'>My Event 4</div>
                        <div class='fc-event'>My Event 5</div>
                        <p>
                                <input type='checkbox' id='drop-remove' />
                                <label for='drop-remove'>remove after drop</label>
                        </p>
                </div>

                <div id='calendar'></div>

                <div style='clear:both'></div>

        </div>
</body>
</html>