fullcalendar,我想要每天计算事件

时间:2016-09-30 05:04:24

标签: javascript jquery json fullcalendar

我使用fullcalendar,我想在该日期添加当时工作的总时间。我怎么能这样做?

enter image description here

<script>    
    $(document).ready(function() {      
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        $('#calendar').fullCalendar({
          header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay',},
    editable: false,
    draggable: false,
            events: [
                {
                    id:1,
                    title: 'All Day Event',
                    start: new Date(y, m, 1),
                    worktime:'5'            
                },
                {
                    id:2,
                    title: 'Long Event',
                    start: new Date(y, m, 1),
                    end: new Date(y, m, d-2),
                    worktime:'20'
                },              
            ]
        });     
    });
</script>

2 个答案:

答案 0 :(得分:1)

@Mohammad Rivai Sali,你可以尝试回调&#34; eventAfterRender&#34;如下所示:

eventAfterRender: function (event, $element, view) {
    var $container = $element.parents('.fc-content-skeleton:first').find('.fc-event-container:last');
    var $totalRow = $container.find('.fc-day-grid-event.total');
    if ($totalRow.length == 0) {
        $totalRow = $('<a class="fc-day-grid-event total fc-h-event fc-event fc-start fc-end"><div class="fc-content"><span>Total: </span><span class="total-time"></span></div></a>')
            .appendTo($container);
    }
    var $total = $totalRow.find('.total-time');
    var total = parseFloat($totalRow.find('.total-time').text());
    total = isNaN(total) ? parseFloat(event.worktime) : total + parseFloat(event.worktime);
    $total.text(total);
}

答案 1 :(得分:-1)

    $(document).ready(function () {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay',
            },
            editable: false,
            draggable: false,
            events: [

                {
                    id: 1,
                    title: 'All Day Event',
                    start: new Date(y, m, 1),
                    worktime: '5'
                },
                {
                    id: 2,
                    title: 'Long Event',
                    start: new Date(y, m, 1),
                    end: new Date(y, m, d - 2),
                    worktime: '20'
                },
            ],
            eventRender: function (event, element) {
                if(event.worktime)
                {
                    $(element).find('.fc-content:first').append($('<span> ' + event.worktime + ' hrs</span>'));
                }
            }
        });

    });