在Fullcalendar中删除当天未使用的小时数

时间:2015-08-18 09:56:03

标签: javascript jquery json fullcalendar

我正在尝试配置Fullcalendar来管理夜间活动。所以我有一天开始尝试,第二天早上结束。 所以目前我有这个配置:

{
    header: {
        left: '',
        center: 'title',
        right: ''
    },
    defaultView: 'timelineTwoDays',
    views: {
        timelineTwoDays: {
            type: 'timeline',
            duration: { days:1, hours:7, minutes:00 }
        }
    },
    scrollTime: '17:00'
}

这不是最佳解决方案,因为隐藏了指定scrollTime之前的小时数,但我想完全删除它们。 minTime不是一个选项,因为它也会删除午夜后的小时数。

1 个答案:

答案 0 :(得分:1)

理想情况下,您应该将其设为feature request。但这是一种hacky方法。

捏造时段标签

viewRender上,抓住插槽标签并为其添加偏移量:

viewRender: function (view, element) {
    if (view.name.indexOf("timeline") > -1) { //if it's a timeline view
        $(element).find(".fc-chrono .fc-cell-text").each(
            function (i, cell) {
                var old = moment($(cell).text(), "ha"); //grab and parse old time label
                $(cell).text(old.add(OFFSET, 'h').format("ha")); //add an offset
            }
        );
    }
},

并设置minTime。请记住,有一个偏移量。

minTime: "15:00:00", //is actually 15h + offset

JSFiddle

问题

当然这会引起一些问题。

  • 它只会更改标签。 FC仍然认为标有5am的地方是午夜。
  • 服务器同步问题。您必须存储偏移日期或将它们从服务器转换为服务器。
  • 日标签可能不是您想要的。他们会在同一天显示10pm - 4am之类的内容。

助手功能

这样的东西会很有用。将事件转换为偏移事件,然后再转回。

var offset = {
    _offset: 6, //in hours
    _apply: function(moments,op){ //sub/add offset from moment array, with null checks
        for(var i = 0; i < moments.length; i++){
            if(moment.isMoment(moments[i]))
                moments[i][op](this._offset,'h');
        }
    },
    get: function(){
        return this._offset;
    },
    //Add the offset to the event or moment
    //Real time/display time -> offset timeline time
    add: function(event){
        this._apply([event,event.start,event.end],'subtract');
        return event;
    },
    //Remove the offset to the event or moment
    //Offset timeline time -> real time/display time
    remove: function(event){
        this._apply([event,event.start,event.end],'add');
        return event;
    }
};

Complete JSfiddle