2017-04-21 5 views
0

fullCalendarを、それぞれの日のセルに特別な日付の名前を表示するように拡張したいとします。例えば、ユーザが特別な日付(バックエンドで)2017-12-25を定義し、それをChristmasと呼ぶ場合、Calendarに入ることによって、彼はそのセルの上にChristmasという単語を表示します(左上に言うように)。jQuery fullCalendar - buildCellHTML関数を拡張しますか?

のでfullCalendar元に探して、私はそれがこの機能を使用してこれらの細胞を構築することがわかります。

function buildCellHTML(date) { 
     var contentClass = tm + "-widget-content"; 
     var month = t.start.getMonth(); 
     var today = clearTime(new Date()); 
     var html = ''; 
     var classNames = [ 
      'fc-day', 
      'fc-' + dayIDs[date.getDay()], 
      contentClass 
     ]; 

     if (date.getMonth() != month) { 
      classNames.push('fc-other-month'); 
     } 
     if (+date == +today) { 
      classNames.push(
       'fc-today', 
       tm + '-state-highlight' 
      ); 
     } 
     else if (date < today) { 
      classNames.push('fc-past'); 
     } 
     else { 
      classNames.push('fc-future'); 
     } 

     html += 
      "<td" + 
      " class='" + classNames.join(' ') + "'" + 
      " data-date='" + formatDate(date, 'yyyy-MM-dd') + "'" + 
      ">" + 
      "<div>"; 

     if (showNumbers) { 
      html += "<div class='fc-day-number'>" + date.getDate() + "</div>"; 
     } 

     html += 
      "<div class='fc-day-content'>" + 
      "<div style='position:relative'>&nbsp;</div>" + 
      "</div>" + 
      "</div>" + 
      "</td>"; 

     return html; 
    } 

今、私が直接この行を追加することでfullCalendarライブラリを変更するかどう:

html += "<div>Placeholder</div>"

直前:

if (showNumbers) { html += "<div class='fc-day-number'>" + date.getDate() + "</div>"; }

私は基本的に必要なものを追加しますが、もちろんライブラリを直接変更したくないので、私はそれを拡張したいと思います。ドキュメンテーションを見ると、私は日中のコンテンツをどのように伸ばすことができないのか分かりません。

この関数は他の関数の内部関数なので、アクセスできません(またはできますか?)。しかし、fullCalendarでもっと経験を積んだ人なら、この拡張を行う方法を明らかにすることができますか?

P.S.注:私は、イベントではなく、すべての日のセルについて話しています(特定のイベントが付いています)。その日にイベントがあるかどうかに関わらず、その日が特別な日であるかどうかをチェックするだけです(バックエンドの実際の特別な日付の実装はここでは関係ありません)。

P.S.私が使用しているfullCalendarのバージョンは1.6.4

+0

あなたはこれを過度に考えているかもしれません。あなたのカレンダー( "https://fullcalendar.io/docs/display/dayRender/")で "dayRender"コールバックを実装しないと、必要なことを実行できませんか? JS配列にあらかじめロードされている「特別な」日付セットがある場合は、レンダリングされた各日をリストと照らし合わせてチェックして、余分な情報が必要かどうかを調べることができます。また、fullCalendarのバージョンを更新することを検討してください - 1.xは今サポートを中断しています。 3.3.1が最新です! – ADyson

+0

私はeventRenderコールバックを使用して、eventRenderでアクセスできる要素を介してhtmlをイベントに追加しています。 dayRenderコールバックがあります。おそらくあなたはそのコールバックと同様の何かをすることができますか? –

+0

@ADysonはそのようなものを試してみるかもしれませんが、レンダリングされた日をどこで取得すればいいのでしょうか?私が見る限り、いくつかのイベントレンダリング機能が定義されていますが、私はイベントではなく、日々を捉える必要があります。たぶん、もっと明確にするためにいくつかの例を書いてもいいですか?バージョンに関しては、残念ながら私はそのバージョンに拘束されています。これはfullCalendarを使用する別のシステムの一部です(切り替えた場合、他のシステムとの互換性が損なわれる可能性があります)。 – Andrius

答えて

0

AdysonとM.Dのようなセルの内容を変更することができました。私はthis._super()を使用

instance.web_calendar.CalendarView.include({ 
    get_fc_init_options: function(){ 
     fc_options = this._super() 
     return $.extend({}, fc_options, { 
      dayRender: function(date, cell){ 
       cell.children('div') 
        .prepend('<div style="float:left; padding: 0 2px">placeholder</div>') 
      } 
     }); 
    }, 
}) 

注:だから私は思いついた正確なスニペットは、この(プレースホルダはちょうどそれが変更されている示すことである)です。これは、他のOOP言語のように継承を模倣するためにOdooに実装されています。

P.S.これはmonthカレンダービューでのみ有効です。 weekまたはdayビューに切り替えると、効果はありません。

関連する問題