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

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文件。

1. 首先添加您的自定义视图名称，根据我的问题，我想复制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.

   }，
2. 现在使用您的视图名称复制现有的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);
   }
   
   
   }
   
   ;;

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

   // time formats
   titleFormat: {
   month: 'MMMM yyyy',
   week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}",
   duplicateAgendaWeek: "MMM d[ yyyy]{ '—'[ 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'
   },

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

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