Question

我在单个日历中添加两个agendaWeekView时遇到问题。请看一下日历配置。

header:{
        left: 'prev,next',
        center: 'title',
        right: 'agendaWeek agendaWeek'
    },

在这里我两次调用agendaWeek，在日历中出现两个名为“Week”的标签，但是当我点击其中任何一个时，两个视图都被激活，我也无法更改周标签的文本。所以请给出一些建议。

Answer 1

从它的外观来看，你没有用引号关闭正确的标题变量。

也许这会奏效。

header:{
    left: 'prev,next',
    center: 'title',
    right: 'agendaWeek agendaWeek'
},

虽然不确定。如果您可以发布一个小提琴，那么我们可以轻松诊断。

Answer 2

现在我们可以在单个calenndar中复制视图或创建自己的自定义视图。这是解决方案。我们需要更改fullcalendar.js文件。

首先添加您的自定义视图名称，根据我的问题，我想复制agendaView，这就是为什么我的视图名称将是“duplicateAgendaWeek”。将名称设置为默认值。

buttonText: {
prev: "<span class='fc-text-arrow'>&lsaquo;</span>",
next: "<span class='fc-text-arrow'>&rsaquo;</span>",
prevYear: "<span class='fc-text-arrow'>&laquo;</span>",
nextYear: "<span class='fc-text-arrow'>&raquo;</span>",
today: 'today',
month: 'month',
week: 'Weekly',
day: 'Daily',
duplicateAgendaWeek: 'Duplicate Week' // here is the name of my view.

}，

现在使用您的视图名称复制现有的AgendaWeek功能。

fcViews.duplicateAgendaWeek= DuplicateAgendaWeekView;

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


// exports
t.render = render;


// imports
AgendaView.call(t, element, calendar, 'duplicateAgendaWeek');
var opt = t.opt;
var renderAgenda = t.renderAgenda;
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);
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;
renderAgenda(weekends ? 7 : 5);
}


}

;;

现在最后一个需要为我们的自定义视图设置格式。

// time formats
titleFormat: {
month: 'MMMM yyyy',
week: "MMM d[ yyyy]{ '&#8212;'[ MMM] d yyyy}",
duplicateAgendaWeek: "MMM d[ yyyy]{ '&#8212;'[ MMM] d yyyy}", // set your view format here
day: 'dddd, MMM d, yyyy'
},
columnFormat: {
month: 'ddd',
week: 'ddd M/d',
duplicateAgendaWeek: 'ddd M/d',// set your view format here
day: 'dddd M/d'
},

现在只需从控制器中调用视图名称。

  header:{
    left: 'prev,next',
    center: 'title',
    right: 'agendaDay agendaWeek duplicateAgendaWeek',
},

Angular-Ui-Calendar：如何在单个日历中显示两个agendaWeekView

2 个答案: