如何在jquery完整日历中列出即将发布的最新活动?

时间:2014-08-05 12:51:32

标签: jquery twitter-bootstrap calendar fullcalendar

我有一些完整的日历和一些活动。当用户徘徊到特定事件时,它将显示有关事件的弹出窗口,其中包含在event.json中给出的标题和消息。我想要实现的是,在div中显示日历底部的最新即将发生的事件(5-6)。

这是代码

<html>
<head> 
<link rel="stylesheet" type="text/css" href="fullcalendar.css">
<link rel="stylesheet" type="text/css" href="bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" href="cal.css">
</head>
<body>
<div id='calendar'></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="fullcalendar.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="ctrl.js"></script>
</body>
</html>

脚本:

$(window).load(function() {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "kupArj.json",
        success: function(data) {

            eventData = data;
            eventDataFn(eventData);
        }
    });

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

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


        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);

        // 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
        -----------------------------------------------------------------*/
    function eventDataFn(eventData) {

        $('#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 !!!
            eventRender: function(event, element) {
                element.popover({
                    title: event.title,
                    placement: 'auto',
                    html: true,
                    trigger: 'hover',
                    animation: 'true',
                    content: event.msg
                });
                $('body').on('click', function(e) {
                    if (!element.is(e.target) && element.has(e.target).length === 0 && $('.popover').has(e.target).length === 0)
                        element.popover('hide');
                });
            },
            events: eventData
        });
    }


}); 

0 个答案:

没有答案