2017-08-02 9 views
-1

私のアプリケーションではfullcalendarオブジェクトを使用しています。カレンダーイベントをカレンダーに動的に更新していて、完全にレンダリングしています。しかし、コールバック関数でイベントをクリックすると、すでに完了していてもローカルタイムゾーンを追加することによって、日付&の時刻が表示されます。Fullcalendar onEventClickの日付が間違って表示されています

以下はカレンダーイベント&オンイベントイベント機能のコールバック出力のイメージです。ここ

は、サンプルコード

HTML

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

JS

$(document).ready(function() { 


    var onEventClick = function (calEvent,jsEvent,view){ 
    console.log(calEvent); 
} 

    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 
     defaultDate: new Date(), 
     defaultView: 'month', 
     editable: true, 
     events: [ 
      { 
       title: 'Long Event', 
       end: moment("2017-08-04T23:30:00.000Z"), 
       start: moment("2017-08-04T22:30:00.000Z"), 
     dow:[1,3,5] 
      } 
     ], 
    eventClick: onEventClick, 
    }); 

}); 

JSFiddle Link

は、いずれかが指摘することができています何が間違っていたか

+1

スクリーンショットの代わりにコードを投稿してください。 –

+0

サンプルコードを追加しました。コンソールログには、すでに追加されていてもローカルタイムゾーンを追加します。 – Salesman

+0

@Salesman、答えを確認し、私に教えてください、このソリューションはあなたに役立つかどうか? –

答えて

0

あなたの解決策はここにあります:Click here

イベントに2つの値を追加します.1つはstart_date、もう1つはend_dateです。この2つのオブジェクトをコンソールで確認してください。今、あなたの新しいコードは次のとおりです。

$(document).ready(function() { 
 
\t \t 
 
    
 
\t \t var onEventClick = function (calEvent,jsEvent,view){ 
 
    \t console.log(calEvent); 
 
    } 
 
    
 
\t \t $('#calendar').fullCalendar({ 
 
\t \t \t header: { 
 
\t \t \t \t left: 'prev,next today', 
 
\t \t \t \t center: 'title', 
 
\t \t \t \t right: 'month,agendaWeek,agendaDay' 
 
\t \t \t }, 
 
\t \t \t defaultDate: new Date(), 
 
\t \t \t defaultView: 'month', 
 
\t \t \t editable: true, 
 
\t \t \t events: [ 
 
\t \t \t \t { 
 
\t \t \t \t \t title: 'Long Event', 
 
\t \t \t \t \t end: moment("2017-08-04T23:30:00.000Z"), 
 
\t \t \t \t \t start: moment("2017-08-04T22:30:00.000Z"), 
 
      start_date:moment("2017-08-04T22:30:00.000Z"), 
 
      end_date:moment("2017-08-04T23:30:00.000Z"), 
 
      dow:[1,3,5] 
 
\t \t \t \t } 
 
\t \t \t ], 
 
     eventClick: onEventClick, 
 
\t \t }); 
 
    
 
\t });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.css" rel="stylesheet"/> 
 
<script src="https://fullcalendar.io/js/fullcalendar-2.2.5/lib/moment.min.js"></script> 
 
<script src="https://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.min.js"></script> 
 

 

 

 

 

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

あなたはstart_dateend_dateオブジェクト内の元の日付があります。

この回答が役に立ちますようお願いいたします。

+0

ありがとうございました問題を解決しました。しかし、なぜ私たちはstart_date、end_dateを取る必要がありますか?私たちは開始、終わりのparamsだけでこれを達成できませんか? – Salesman

関連する問題