Question

我试图显示时间从上午9:30开始到下午6:30结束，时间间隔为30分钟。This question on SO应该对我来说已经足够了但是当我尝试时时间间隔从我的完整日历中删除.. 这是我的fullcalendar代码

 

var dateByColumn = 2;

$(document).ready(function() {

    $('#calendar').fullCalendar({
        //weekends: false,
        //selectable: true,
        hiddenDays: [ 0, 6 ],
        theme: true,
        header: {
            left: 'prev,next',
            center: 'title',
            right: ''
        },
        defaultView: 'agendaWeek',


        viewRender: function(view, $element)
        {
            $element.find('.fc-event-container').each(function() {


                var $this = $(this);
                var now = new Date("2016-09-09T09:30:00+05:00");
                if(!$this.hasClass('fc-helper-container'))
                {

                    //2 : moday, 3:Tue, 4:Wed, 5:Thu, 6:Fri

                    for(var i = 0;i<16;i++)
                    {
                        var thisDate = $(".fc-day-header:nth-child("+dateByColumn+")").attr('data-date');
                        var hours = now.getHours();
                        hours = ('0' + hours).slice(-2);
                        var min = (now.getMinutes() == 0)?"00":now.getMinutes();
                        var sec = (now.getSeconds() == 0)?"00":now.getSeconds();
                        var time = hours+":"+min+":"+sec;
                        var id = thisDate+"T"+time;
                        $(this).append('<div class="book" data-date="'+thisDate+'" data-time="'+time+'" id="'+id+'"><a> Book </a></div>');
                        now.setMinutes(now.getMinutes() + 30);
                    }
                    dateByColumn++;
                    if(dateByColumn >= 7){
                        dateByColumn = 2;
                    }


                }


            });



        },

        minTime: '09:30:00',
        maxTime: '17:30:00',
        slotDuration: "00:30:01",
        editable: false ,
        allDaySlot: false,
        eventLimit: true, // allow "more" link when too many events
        events: {
            url: 'JSON/events_json.php'
        }



    });
    $('body').on('click','.book',function (){
        var id = this.id;
        var end = new Date(id);
        end = end.setMinutes(end.getMinutes() + 30);
        var eventData = {
            title: "Taken",
            start: this.id,
            end: end
        };
        $('#calendar').fullCalendar('renderEvent', eventData, true);});});

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Full Calendar</title>
        <link rel='stylesheet' href='http://localhost/fullcalendar/fullcalendar.css' />
        <link rel="stylesheet" href="http://localhost/fullcalendar/lib/cupertino/jquery-ui.min.css">

        <script src='http://localhost/fullcalendar/lib/jquery.min.js'></script>
        <script src='http://localhost/fullcalendar/lib/moment.min.js'></script>
        <script src='http://localhost/fullcalendar/fullcalendar.js'></script>
        <script src='http://localhost/fullcalendar/lib/jquery-ui.min.js'></script>

    </head>
    <body>
        <div id='calendar'></div>
    </body>
</html>

Answer 1

这是我如何做到的，这只是一个解决方案，而不是实际的解决方案，但它适用于我..

$('tr.fc-minor').each(function(){ // takes the date-time attr for this class
    var time = $(this).attr('data-time'); // your input string
    var a = time.split(':'); // split it at the colons
    var seconds = a[0]+":"+a[1];

    console.log(seconds);
    $(this).find('.fc-time').html(seconds);
});

fullcalendar slotDuration

1 个答案: