fullcalendar - Angular-Ui-Calendar: 1 つのカレンダーで 2 つのアジェンダWeekView を表示する方法

Question

1 つのカレンダーに 2 つのアジェンダウィークビューを追加しているときに問題に直面しています。カレンダーの設定を見てください。

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

ここでアジェンダウィークを 2 回呼び出しています。「週」というカレンダーの 2 つのタブが表示されますが、いずれかをクリックすると両方のビューがアクティブになり、週のタブのテキストを変更することもできません。そこで、何か提案をお願いします。

Answer 1

これで、単一のカレンダーでビューを複製したり、独自のカスタム ビューを作成したりできます。これが解決策です。fullcalendar.js ファイルを変更する必要があります。

1. 私の質問によると、最初にカスタムビュー名を追加します。私の質問によると、アジェンダビューを複製したかったので、ビュー名は「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. ビュー名を使用して、既存のアジェンダウィーク関数を複製します。

   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',
   },