あなたはfullcalendar、またはカレンダー、カレンダー機能とスケジューリング機能を実現したい場合。：あなただけのいくつかの簡単な手順必要
：公式サイトリンクハングここを
FullCalendar
ダウンロードするFullCalendar公式サイトのリンクを
ダウンロードし、簡単な構成
フォームの最初の明確などのようなあなたが式をしたい1、：fullcalendarカレンダーは、様々な形態を提供しています：
あなたができます私は主にここで使用される私の2つの実装について話を内部参照するには、公式サイトのホームページのデモ、：
（1）カレンダーモード（のみfullcalendarで達成）
（2）fullcalendar除くタイムラインモードでは（また、他のプラグインを使用する予定の公式サイトと呼ばれます
あなた自身のプロジェクトをインポートするfullcalendarダウンロードした後、それだけで非常に簡単な構成を使用することができますが必要です。
これらは、ページに組み込まれているプラグインを実行するために必要ないくつかの基本的な構成を、あります
<リンクのrel = 'スタイルシート'のhref = 'fullcalendar / fullcalendar.css' /> <スクリプトSRC = 'のlib / jquery.min.js'> </ SCRIPT> <スクリプトSRC = 'のlib / moment.min.js'> </スクリプト> <スクリプトSRC = 'fullcalendar / fullcalendar.js'> </ SCRIPT>
これは、JSのjqueryのの瞬間ことに留意する必要があるとJSのfullcalendar前に導入されなければなりません。あなたはカレンダーのタイムラインモードをしたい、とスケジュールをダウンロードした場合は、ページのJSとCSSで導入スケジュールする必要が
fullcalendarを導入するだけではなくても、スケジュールを紹介しています。
<リンクのhref = 'fullcalendar.css'のrel = 'スタイルシート' /> <リンクのhref = 'scheduler.css'のrel = 'スタイルシート' /> <スクリプトSRC = 'moment.js'> </ SCRIPT> <スクリプトSRC = 'jquery.js'> </ SCRIPT> <スクリプトSRC = 'fullcalendar.js'> </ SCRIPT> <スクリプトSRC = 'scheduler.js'> </ SCRIPT>
div div要素を定義するには、このページには、私はdiv要素を作成したカレンダーなどのプラグインとしてレンダリングされます後
<DIV ID = 'カレンダー'> </ div>
そこで、今回は、それはJSで設定することができます
$（ '＃カレンダー' ）.fullCalendar（{ [既定： '月' 、 高さ： '自動' 、 ヘッダ：偽、 displayEventTime：真、 displayEventEnd：真、 weekMode： "液体" 、 アスペクト比： 2 、 allDaySlot：偽、 TIMEFORMAT ： 'HH：MM' 、 ロケール： 'ZH-CN' 、 }）
特定の公式ドキュメントを設定するための独自のニーズに応じて、これらの設定の一部は、
スケジュールfullcalendarは無料で提供しますが、プラグ上の透かしがあるであろうことに留意すべきです。設定でこれを追加することができます透かしを削除するには
schedulerLicenseKey： 'CC-帰属 - 非営利 - NoDerivatives'、
その上の設定場所することができます。
この後には実行しているのカレンダーを取得することができます
数ヶ月または数年または数週間を決定することが示されている[既定。fullcalendarの場合は、次の値があります。
月
basicWeek
basicDay
agendaWeek
agendaDay
listYear
listMonth
listWeek
listDay
また、あなたは次のビューを使用することができ、一日の時間を分離するために時間でスケジュールをダウンロードする場合：
timelineDay
timelineWeek
timelineMonth
timelineYear
もちろん、あなたはまた、特定のドキュメントのカスタムビューを参照するビューをカスタマイズすることができ
、私はここでの例書きます
ビュー：{ agendaFourDay：{ タイプ： 'タイムライン' 、 時間：{日： 4 }、 buttonText： 4 '日' }、 }、
ここで私は、このモードでは、そのことを示す、4日間の私のカレンダー表示スパンを4日間の間隔を設定します。agendaFourDay、うまく：次に、[既定に設定します。完全な書き込みは、そのようなものです。
$（ '＃カレンダー' ）.fullCalendar（{ [既定： 'agendaFourDay' 、 高さ： '自動' 、 ヘッダ：偽、 displayEventTime：真、 displayEventEnd：真、 weekMode： "液体" 、 アスペクト比： 2 、 allDaySlot：偽、 TIMEFORMAT ： 'HH：MM' 、 ロケール： 'ZH-CN' 、 ビュー：{ agendaFourDay：{ タイプ： 'タイムライン' 、 時間：{日： 4 }、 buttonText： '4日の } } }）
構成の書き込み開始に加えて、あなたがコントロールするカスタムボタンを表示できるように、JSでの表示を変更することができますFullCalendar方法が提供されます
$（ '＃カレンダー'）fullCalendar（ "changeView"、 "basicDay"）。
これはbasicDayに変更ビュータイプを置きます。
もちろん、上記の構成は、JSの変形が可能です。コードに反映されている
上記の形式の例は、下にあります。
$（ '＃カレンダー'）。FullCalendar（ 'オプション'、 '高さ'、 '600' ）
$（ '#calendar'）。FullCalendar（ 'オプション'、 '属性'、「属性値「）
カレンダーの高さは600PXとして定義されたコードを変更します。
（メソッド）のドキュメントを参照するには、多くの方法があります
プラグインの基本構成を完了するために、以下で。
第二に、プラグインのデータを転送するには、
ここで私はのカレンダーにデータを渡す方法です
関数drawCalendar（データ）{ $（ '#calendar'）fullCalendar（ 'removeEvents' ）; VaRのイベント= []; 用（VAR I = 0、LEN = data.length; iがLEN <; iは++ ）{ VARの TIMEDATE = データ[I]; // 非整天时间、则显示时分数据如果 するvar isallDay = 真; もし（！TIMEDATE [ "終了"] = NULL！&& TIMEDATE [ "スタート"] = NULL ）{ 場合（モーメント（TIMEDATE [ "開始"（」 " "Tの交換"。））フォーマット（" HH： "（ "（置き換える[終了]" " "T"を。ミリメートル"！）==" 0時TIMEDATE）||瞬間"）形式（" HH：; } } VARのアイテム= { タイトル：TIMEDATE [ "タイトル" ]、 開始：TIMEDATEは[。 "開始"]置き換える（」」、 "T" ）、 クラス名： "イベント・バー" 、 終日：isallDay、 エンド：TIMEDATE [ ==] "終了" はnullを？""：TIMEDATE "は交換してください。[" END]（」」、 "T" ） のbackgroundColor：getCalendarColor（TIMEDATE [ "ユーザ" ]）、 ユーザー：TIMEDATE [ "ユーザ" ]、 のstartTime：TIMEDATE [ "のstartTime" ]、 endTimeは：TIMEDATE [ "endTimeは" ] }。 events.push（アイテム） } $（'#calendar'）fullCalendar（ 'のaddEventSource'。 、イベント）; }
間で
。$（ '＃カレンダー'）fullCalendar（ 'removeEvents'）;
初のオリジナルコントロールイベントを削除するために使用されます。
イベントは知りませんが、イベントは一つ一つの内側の図であり、項目（プロパティの下に、イベントはバーの色を設定するだけでなく、開始時刻と終了時刻を設定し、英語の意味で同じことを行うのはあまりいませんが、ここで説明し、イベントの配列がありますあなたは）コメントで私に尋ねることができます
VARのアイテム= { タイトル：TIMEDATE [ "タイトル" ]、 開始：TIMEDATEは[。 "開始"]置き換える（」 " "T" ）、 クラス名： "イベント・バー" 、 終日：isallDay、 エンド：TIMEDATE [ "終了「] == nullの？""：TIMEDATE "は交換してください。[" END]（」」、 "T" ） のbackgroundColor：getCalendarColor（TIMEDATE [ "ユーザ" ]）、 ユーザー：TIMEDATE [ "ユーザ" ]、 のstartTime：TIMEDATE [ "のstartTime" ]、 endTimeは：TIMEDATE [ "endTimeは" ] }。
イベントの配列を押してください。
それから
$（ '＃カレンダー'）fullCalendar（ 'のaddEventSource'、イベント）。
制御の方法は、あなたがマップ上のイベントを表示することができ、イベントに押し込まれるイベントの配列を提供します。
オリジナルリンクします。https：//blog.csdn.net/ParadiserD/article/details/78752735