web-dev-qa-db-ja.com

初めて初期化されたときに特定の開始日に完全なカレンダーを設定する方法は？

カレンダーを表示する関数を呼び出すときに、最初の月を任意の月に設定したいと思います。

たとえば、ユーザーが別の場所で最後の6月（2011年6月）の日付を選択し、fullcalendarが4月前の月表示（2010年4月）で表示されるようにしたいとします。そして、はい、これは理にかなっているのではなく、単にケースを作ることです;-)）

私はその後表示機能を呼び出す前に「gotodate」を呼び出そうとしましたが、これは機能していないようです

$('#calendar').fullCalendar( 'gotoDate', currentdate);
$('#calendar').fullCalendar({
    header: {left: 'prevYear,prev,today,next,nextYear',
         center: 'title', right: 'month,basicWeek,basicDay' etc...}

最終的に誰かがこれを適切に行う方法の例を提供できますか？

javascriptjqueryfullcalendar
48
Stefan

あなたはそれを後方に持っています。最初にカレンダーを表示してから、gotoDateを呼び出します。

$('#calendar').fullCalendar({
  // Options
});

$('#calendar').fullCalendar('gotoDate', currentDate);
49
Brandon

Fullcalendarで使用される初期日付値を指定するには、初期化時にオプション 'year'、 'month'、および 'date'を使用する必要があります。

_$('#calendar').fullCalendar({
 year: 2012,
 month: 4,
 date: 25
});  // This will initialize for May 25th, 2012.
_

_fullcalendar.js_ファイルの関数setYMD(date,y,m,d)を参照してください。 JavaScriptのsetMonth、setDate、およびsetFullYear関数が使用されるため、月の値は0から始まる必要があることに注意してください（Janは0）。

[〜＃〜] update [〜＃〜]：他の人がコメントで指摘しているように、今は正しい方法です（この編集を書いている時点でV3） defaultDateプロパティを次の値に初期化することです

「2014-02-01」などのISO8601日付文字列を含む、モーメントコンストラクターが受け入れるもの

moment.jsを使用しているため。 ドキュメントはこちら 。

更新された例：

_$('#calendar').fullCalendar({
    defaultDate: "2012-05-25"
});  // This will initialize for May 25th, 2012.
_
82
Jammerms

MachineAddictのコメントによると、バージョン2以降、year, month and dayは defaultDate に置き換えられました。これは Moment であり、次のようなコンストラクターをサポートします。 ISO 8601日付文字列またはUnixエポックとして。

例えば指定された日付でカレンダーを初期化するには：

$('#calendar').fullCalendar({
    defaultDate: moment('2014-09-01'),
    ...
});
29
StuartLC

Dateオブジェクトを渡すことができます：
現在の日付：

$('#calendar').fullCalendar({
    defaultDate: new Date()
});

特定の日付「2016-05-20」の場合：

$('#calendar').fullCalendar({
    defaultDate: new Date(2016, 4, 20)
});
5
CIRCLE

gotoDateコールバックでviewRenderを呼び出すことで幸運に恵まれました：

$('#calendar').fullCalendar({
  firstDay: 0,
  defaultView: 'basicWeek',
  header: {
    left: '',
    center: 'basicDay,basicWeek,month',
    right:  'today prev,next'
  },
  viewRender: function(view, element) {
    $('#calendar').fullCalendar( 'gotoDate', 2014, 4, 24 );
  }
});

コールバックの外部でgotoDateを呼び出すと、競合状態のために予期した結果が得られませんでした。

3
Eric Parshall

バージョン2.1.1では、これは機能します。

$('#calendar').fullCalendar({
// your calendar settings...
});

$('#calendar').fullCalendar('gotoDate', '2014-05-01');

時刻/日付形式に関するドキュメント： http://fullcalendar.io/docs/utilities/Moment/ バージョン2のアップグレードに関するドキュメント： https://github.com/arshaw/fullcalendar/wiki/Upgrading-to-v2

2
BAAC

カレンダーを2回ロードしたくなく、defaultDateが実装されているバージョンがない場合は、次の手順を実行します。

次の方法を変更します。

function Calendar(element, options, eventSources) { ... var date = new Date(); ... }

に：

function Calendar(element, options, eventSources) { ... var date = options.defaultDate ? options.defaultDate : new Date(); ... }

0
Jan Hoeppner