FullCalendar每月的第一个小时视图

时间:2015-01-29 16:00:00

标签: javascript jquery fullcalendar

所以我遇到了以下问题: 正如您在屏幕截图中看到的,我添加了2个相差1分钟的事件。这两个事件都是在相同的日期/时间开始,但是一个结束于上午08:59而另一个结束于上午09:00(同一天),月视图如何呈现为这样?

enter image description here

我怀疑这是我应该在月视图中设置的first_our_of_day参数,但我在文档中没有看到这样的内容。

编辑:

这是我的代码:

var calendar;
$(document).ready(function() {

    calendar = $('#calendar').fullCalendar({
        // eventLimit: true,
        axisFormat: 'h:mm T',
        header:{
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        eventClick: function(calEvent, jsEvent, view) {
            event_id = calEvent.id;
            show_ticket_details(event_id);
        },
        dayClick: function(date, jsEvent, view) {
            today = new Date();
            selected_date = new Date(date.format() + "GMT -0500");
            selected_date.setHours(0,0,0,0);
            today.setHours(0,0,0,0);
            if (selected_date.getTime() >= today.getTime()) {
                new_ticket(date.format());
            }else{

            }
        },
        eventRender: function(event,element){
            title = "";
            var start_date = new Date(event.start);
            var start_hour = start_date.getHours() % 12 || 12;
            var start_minute = (start_date.getMinutes()<10?'0':'') + start_date.getMinutes()
            var start_ampm = (start_hour >= 12) ? "PM" : "AM";
            var start_date = start_hour + ":" + start_minute + "" + start_ampm;

            title = start_date;


            if (event.end != "") {
                var end_date = new Date(event.end);
                var end_hour = end_date.getHours() % 12 || 12;
                var end_minute = (end_date.getMinutes()<10?'0':'') + end_date.getMinutes()
                var end_ampm = (end_hour >= 12) ? "PM" : "AM";
                var end_date = end_hour + ":" + end_minute + "" + end_ampm;
                title = title + " - " + end_date;
            };
            element.find('.fc-content').parent().html(title + " - " + event.title);
        }
    });

            add_event(333,"February 02, 2015 00:00 -0500","February 06, 2015 09:00 -0500","Prueba concepto","#5cb85c")
            add_event(334,"February 02, 2015 00:00 -0500","February 06, 2015 08:59 -0500","Prueba concepto 2","#5cb85c")
});

function add_event(id,start,end,title,backgroundColor){
    var eventObject = new Object();
    eventObject.className = 'calendar_event'
    eventObject.id = id;
    eventObject.start = start;
    eventObject.end = end;
    eventObject.title = title;
    eventObject.backgroundColor = backgroundColor;
    eventObject.borderColor = "white";
    eventObject.allDay = false;
    $('#calendar').fullCalendar('renderEvent',eventObject,true);
}

function new_ticket(date){
    $.get('/tickets/new',{date: date},function(data){
        $("#modal_form_container").html(data);
        $("#modal_form").modal('show');
    });
}

function show_ticket_details(ticket_id){
    $.get('/tickets/' + ticket_id,function(data){
        $("#modal_form_container").html(data);
        $("#modal_form").modal('show');
    });
}

编辑2:这是我的周视图,正如您所看到的,它在此视图中正常工作。

enter image description here

1 个答案:

答案 0 :(得分:2)

查看完整的日历代码,我发现了这个属性:

nextDayThreshold: '09:00:00', // 9am

你可能想要修改这个。

http://fullcalendar.io/docs/event_rendering/nextDayThreshold/

  

当一个事件的结束时间跨越另一天时,它必须达到的最短时间才能呈现,就好像它在那一天那样。   ......   仅影响全天出现的定时事件。全天细胞出现在月视图中......