Jquery FullCalendar 2周视图Next prev按钮 [英] Jquery FullCalendar 2 week view Next prev buttons

问题描述

我已实施了2周的视图，概述了此处，我在想如果有人可以告诉我如何/在哪里更改上一个/下一个按钮以将日历仅移动2周而不是下个月？不知道在哪里更新fullcalendar.js。

解决方案

想象一下。问题是，我使用的解决方案是基于月视图，因为它可能应该基于星期视图。

首先，确保所有信息适用于该视图列在虚假列表中

  //时间格式
 titleFormat：{
月：'MMMM yyyy'，
 twoweek：MMM d [yyyy] {'&＃8212;'[MMM] d yyyy}，
 week：MMM d [yyyy] {'&＃8212; '[MMM] d yyyy}，
 day：'dddd，MMM d，yyyy'
}，
 columnFormat：{
 month：'ddd'，
 twoweek：'ddd'，
 week：'ddd M / d'，
 day：'dddd M / d'
}，
  pre> 
 
 
。 
 
 
  buttonText：{
上一个： '& nbsp;&＃9668;& nbsp;'，
下一个：'& nbsp;&＃9658;& nbsp;'，
 prevYear：'& nbsp;& amp ; lt;<& nbsp;'，
 nextYear：'& nbsp;& gt;& gt;& nbsp;'，
 today：'today'，
月： month'，
 twoweek：'2 week'，
 week：'week'，
 day：'day'，
 resourceDay：'designers'
}，
  
这里是我的2周视图代码
  fcViews.twoweek = TwoWeeksView; 
 
函数TwoWeeksView（元素，日历）{
 var t = this; 
 
 //导出
 t.render = render; 
 
 
 //进口
 BasicView.call（t，element，calendar，'twoweek'）; 
 var opt = t.opt; 
 var renderBasic = t.renderBasic; 
 var formatDates = calendar.formatDates; 
 
 
 
函数渲染（日期，delta）{
 if（delta）{
 addDays（date，delta * 7）; 
} 
 var start = addDays（cloneDate（date）， - （（date.getDay（） -  opt（'firstDay'）+ 7）％7））; 
 var end = addDays（cloneDate（start），7 * 2）; 
 var visStart = cloneDate（start）; 
 var visEnd = cloneDate（end）; 
 var weekends = opt（'weekends'）; 
 if（！weekends）{
 skipWeekend（visStart）; 
 skipWeekend（visEnd，-1，true）; 
 
 $ b t.title = formatDates（
 visStart，
 addDays（cloneDate（visEnd），-1），
 opt（'titleFormat'） 
）; 
 t.start = start; 
 t.end = end; 
 t.visStart = visStart; 
 t.visEnd = visEnd; 
 renderBasic（2，2，周末？7：5，真）; 
} 
  
}  
 
 
这里的关键区别在于最后一行：renderBasic（2,2，周末？7：5，真）;如果你不更新关于默认值的视图的信息，那么
 
 
 ，formatdates中的参数是未定义的，并且存在问题。周视图和月视图之间有一些区别，使周视图的两周视图变得更好。它变成了两者之间的混合。希望这有助于任何正在寻找完整的2周视图修正的人。
 
 
 
调用如下： 
 
 <$ p $ fullCalendar（{
 header：{
 left：'prev，next'，
 center：'title'，
 right：'twoweek'
}，
 defaultView：'twoweek'，
 weekMode：'fixed'
}）; 
  

I have implemented the 2 week view outlined here and I was wondering if someone can tell me how/where to change the prev/next buttons to move the calendar only 2 weeks instead of to the next month? Not sure where to update the fullcalendar.js.

解决方案

Figured it out. The problem was that the solution i used was based off the month view when it probably should have been based off of the week view.

first, make sure all the information for the view is listed in the defualts

// time formats
titleFormat: {
    month: 'MMMM yyyy',
    twoweek: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}",
    week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}",
    day: 'dddd, MMM d, yyyy'
},
columnFormat: {
    month: 'ddd',
    twoweek: 'ddd',
    week: 'ddd M/d',
    day: 'dddd M/d'
},

.

buttonText: {
    prev: ' ◄ ',
    next: ' ► ',
    prevYear: ' << ',
    nextYear: ' >> ',
    today: 'today',
    month: 'month',
    twoweek: '2 week',
    week: 'week',
    day: 'day',
    resourceDay: 'designers'
},

and here is my code for the 2 week view

fcViews.twoweek = TwoWeeksView;

function TwoWeeksView(element, calendar) {
var t = this;

// exports
t.render = render;


// imports
BasicView.call(t, element, calendar, 'twoweek');
var opt = t.opt;
var renderBasic = t.renderBasic;
var formatDates = calendar.formatDates;



function render(date, delta) {
    if (delta) {
        addDays(date, delta*7);
    }
    var start = addDays(cloneDate(date), -((date.getDay() - opt('firstDay') + 7) % 7));
    var end = addDays(cloneDate(start), 7*2);
    var visStart = cloneDate(start);
    var visEnd = cloneDate(end);
    var weekends = opt('weekends');
    if (!weekends) {
        skipWeekend(visStart);
        skipWeekend(visEnd, -1, true);
    }

    t.title = formatDates(
        visStart, 
        addDays(cloneDate(visEnd), -1), 
        opt('titleFormat')
    );
    t.start = start;
    t.end = end;
    t.visStart = visStart;
    t.visEnd = visEnd;
    renderBasic(2, 2, weekends ? 7 : 5, true);
}

}

the key difference here is the last line: renderBasic(2,2,weekends ? 7 : 5, true);

if you dont update the information about the view in defaults, a parameter in formatdates is undefined and there are issues. There are some differences between the week view and the month view that make basing the two week view of the week view instead better. It becomes somewhat of a mix between the two. Hope this helps anyone who is looking for the full 2 week view fix.

call like this:

 $('#calendar').fullCalendar({
        header: {
            left:'prev, next',
            center: 'title',
            right: 'twoweek'
        },
        defaultView: 'twoweek',
        weekMode:'fixed'
  });

这篇关于Jquery FullCalendar 2周视图Next prev按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！