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

Posted 2021-04-07

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

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

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

答案

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

也许这会奏效。

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

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

另一答案

现在我们可以在单个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', },