web-dev-qa-db-ja.com

月表示のみで表示されるFullCalendarイベント

FullCalendar http://fullcalendar.io/ を使用して、Webページにいくつかのイベントを表示しています。

カレンダーはこのように作成されます

$('#calendar').fullCalendar({
        header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
        },
        allDayDefault: false,
        selectable: true,
        selectHelper: true,
        editable: true,
        eventLimit: true, // allow "more" link when too many events
   });

イベントは、次のようなrenderEvent操作（jsonフィードではない）を介して作成されます

$('#calendar').fullCalendar('renderEvent', newEvent, 'stick');

newEventはこのように作成されます

newEvent = {
                title : 'mytitle',
                start : startDate,
                allDay: false,
                id: eventId,
                description: 'my test event'
            };

問題は、イベントが月ビューでは正しく表示されるが、週ビューまたは日ビューでは表示されないことです。

[〜＃〜]更新[〜＃〜]

私はこの日付形式を使用しています：2015-02-01T01：00：00

javascriptjqueryfullcalendar
19
lowcoupling

コードを再現するプランカー を作成しました。あなたのコードで私が見る唯一の問題は、イベントの作成で予想されるコンマです。

そこで、新しいモーメントオブジェクトを使用してイベントを作成します。これは今を意味します。

  var startDate = moment();
  var eventId = 123;
  var newEvent = {
                title : 'mytitle',
                start : startDate,
                allDay: false,
                id: eventId,   //Is this comma that was missing in your code
                description: 'my test event'
            };

そして、私はあなたがしているのと同じコードでそれを追加します：

$('#calendar').fullCalendar('renderEvent', newEvent, 'stick');

プランカーをチェックインできるので、すべてが正常に機能しているので、提供するコードで発生する可能性がある唯一の問題は次のとおりです。

  • 不足しているコンマ。
  • eventId変数が間違っています
  • startDate変数が間違っています

さらに、 render event のドキュメントを見ると、「stick」変数が適切に使用されていません。ブール値である必要があります。チェックインできるように バージョン2.3.1の9229行目 式として比較されるため、コードは機能しているため、任意の文字列（空ではない）がtrueになります。あなたはこの答えでこれについてもっと情報を持つことができます： https://stackoverflow.com/a/4923684/268616

したがって、3番目のパラメータスティックを次のように設定した場合：

  • true
  • 'スティック'
  • 'ノンスティック'
  • 「false」
  • 'なんでも'

...常にスティッキーとして解決され、stickySourceに追加されます。ただし、@ slicedtoadがコメントしているように、将来のバージョンで問題が発生しないように変更する必要があります。

9
Mario Levrero

コードに問題はありません。しかし、あなたは非標準的な方法でいくつかのことをしています。それらを修正してみてください。問題が解決する場合があります。

イベントの追加に使用している方法は適切ではありません。 FullCalendarの用語では、renderはカレンダーにデータを表示するプロセスを意味します。したがって、renderEventを実行すると、画面にイベントをdisplayするように指示するだけです。そして、stickはそれを持続させます（一種）。

代わりに、 addEventSource を使用する必要があります。任意のイベントソース（ローカルまたはリモート）を追加するために使用できます。また、eventSourceは、JSONフィードから1つのイベントのローカル配列まで何でもかまいません。

これは機能するはずです：

$('#calendar').fullCalendar('addEventSource',[{
    title : 'mytitle',
    start : startDate,
    allDay: false,
    id: eventId,
    description: 'my test event'
}]);

それはあなたにセッション全体にわたって続くイベントを与えます。また、他のすべてのフルカレンダーオプションやコールバックとうまく連携できるという利点もあります。

7
slicedtoad

私は fiddle を作成しましたが、私の側からいくつかの変更を加えてコードを使用しました。正常に動作しています。それがあなたのために働くことを願っています。ご意見をお待ちしております。

コード

[〜＃〜] html [〜＃〜]

<body>
    <div id='calendar'></div>
</body>

[〜＃〜]スクリプト[〜＃〜]

<script type='text/javascript'>
$(document).ready(function(){
    fullCalObj = $('#calendar').fullCalendar({
         header: {
             left: 'prev,next today',
             center: 'title',
             right: 'month,agendaWeek,agendaDay'
         },
         allDayDefault: false,
         selectable: true,
         selectHelper: true,
         editable: true,
         eventLimit: true, // allow "more" link when too many events
     });

    var newEvent = {
        title : 'mytitle',
        start : '2015-04-22',
        allDay: false,
        id: 1,
        description: 'my test event'
    };

    fullCalObj.fullCalendar('renderEvent', newEvent, 'stick');
});
</script>
3
Sunil Sharma