2017-04-17 85 views
0

样品查看:设计自定义视图年12个月插槽

SampleView

我想创建一个自定义的一年视图来显示每月插槽的时间表。我可以使用fullcalendar调度使用自定义视图,并这样定义:

views: { 
    timelineCustom: { 
    type: 'timeline', 
    buttonText: 'Year View',    
    duration: {year:1}, 
    slotDuration: {month:1} 
    } 
} 

但是,没有办法建立与月开始的财年视图在4月1日和结束在3月31日,明年。而且,即使事件仅从该月的下半月开始,时间线栏也将涵盖整个月的时段。

+0

可以在“时间”对象或“视图”对象,可以控制一个3级的时间表(年/月/日)放在什么PARAMS? –

+0

我找到了使用最新的fullCalendar的解决方案 - 请参阅下面的答案。 – ADyson

+0

@JoeyYao:你能创建这种类型的调度器吗? –

回答

0

您的第一个问题 - 在四月份开始查看并在下一年的三月份结束,可以使用新的“visibleRange”选项解决。这使您可以提供与“currentDate”相关的视图的开始/结束日期(即fullCalendar最终被视为被选中的日期)。您还必须设置“dateIncrement”选项,以确保Next/Previous将当前日期增加1年。

N.B.这需要fullCalendar 3.3.0和Scheduler 1.6.0或更高版本。

timelineCustom: { 
    type: 'timeline', 
    buttonText: 'Year View', 
    dateIncrement: { years: 1 }, 
    slotDuration: { months: 1 }, 
    visibleRange: function(currentDate) { 
     return { 
      start: currentDate.clone().startOf('year').add({ months: 3}), 
      end: currentDate.clone().endOf("year").add({ months: 4}) 
     }; 
    } 
} 

更多细节

然而,你的问题,即时间轴条涵盖尽管事件只开始在每月的第二个半整整一个月插槽见https://fullcalendar.io/docs/current_date/visibleRange/https://fullcalendar.io/docs/current_date/dateIncrement/,是不是真的可以解决你想要的方式。 “插槽”的整点是在特定视图中可以显示事件的最短时间。如果你希望它比这更微妙,你将不得不定义更短的时隙。同样的事情发生在fullCalendar的默认“月”(非时间轴)视图 - 所有事件都会覆盖一整天,即使它们是计时的,但您可以在描述中看到时间。我在你的例子中看到你已经得到了描述中显示的那些事件的日期,所以对你的用户应该是合理的。

我建议您的用户点击月视图以更准确地显示插槽持续时间,以获得更详细的细分。无论是或者你必须妥协并将slotDuration设置为更小的东西。

+1

是的,我意识到,如果我需要一个特定的日期范围,我必须使用“天”的插槽。而你的解决方案真的帮助我解决了第一个问题。我在“visibleRange结束”编辑了一下,使其工作(end:currentDate.clone()。endOf(“year”).add({months:4}))。非常感谢! –

+0

太棒了,很高兴它有帮助。感谢您在结束日期时指出错误 - 修改了答案以反映这一点。 – ADyson