質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

6418閲覧

fullCalendar.jsを使ってカレンダーを3ヶ月分だけ表示したい

nakataka

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2016/05/10 10:55

fullCalendar.jsを使用してカレンダーを表示したいと思っています。
http://fullcalendar.io/

月表示にして、3ヶ月分だけ表示できるようにしたいです。
prevやnextボタンはずっと表示されているので、3ヶ月目では表示されないようにしたいです。
そういったオプションが見当たらないのですが、指定する方法はあるでしょうか。

もしくは他にオススメのプラグインがあったら教えていただけたら幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

現在から1か月しか進めない(戻れない)ようにする処理を書いてみました。
つまり表示できるのは3か月分のみ。
こんな感じですかね?

ボタンを消したい場合はaddClassやremoveClassをコメントアウトして、
hideやshowをコメントから戻せばできるはず。試してはないです。

HTML

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2<html lang="ja"> 3<head><title>sample</title> 4<meta http-equiv="Content-Style-Type" content="text/css"> 5<meta http-equiv="Content-Script-Type" content="text/javascript"> 6 7<link rel='stylesheet' type='text/css' href='fullcalendar.css'> 8 9 10<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 11<script type="text/javascript" src="moment.min.js"></script> 12<script type="text/javascript" src="fullcalendar.js"></script> 13<script type="text/javascript"> 14 15 16$(document).ready(function() { 17 18 $('#calendar').fullCalendar({ 19 viewRender: function(view, element) { 20 var todayMonth = moment().format("M"); 21 var dispMonth = moment(view.intervalStart._d).format("M"); 22 if(todayMonth - dispMonth >= 1){ 23 //$('.fc-prev-button').hide(); 24 $('.fc-prev-button').addClass('fc-state-disabled'); 25 }else if(dispMonth - todayMonth >= 1){ 26 //$('.fc-next-button').hide(); 27 $('.fc-next-button').addClass('fc-state-disabled'); 28 }else{ 29 //$('.fc-prev-button').show(); 30 //$('.fc-next-button').show(); 31 $('.fc-prev-button').removeClass('fc-state-disabled'); 32 $('.fc-next-button').removeClass('fc-state-disabled'); 33 } 34 }, 35 }) 36 37 38}); 39</script> 40</head> 41<body> 42 43<div id="calendar"> 44</div> 45 46</body> 47</html>

投稿2016/05/10 14:59

kentei_syunrai

総合スコア946

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nakataka

2016/05/11 02:24

kentei_syunraiさん、ありがとうございます! 私の質問の書き方が悪くて申し訳ありません。 3ヶ月と書いたのは”現在から3ヶ月”にしたかったので いただいたソースを参考にifの条件を下記のようにしてみたらできました。 viewRender: function(view, element) { var todayMonth = moment().format("M"); var dispMonth = moment(view.intervalStart._d).format("M"); if(dispMonth - todayMonth <= 0){ //$('.fc-prev-button').hide(); $('.fc-prev-button').addClass('fc-state-disabled'); }else if(dispMonth - todayMonth >= 2){ //$('.fc-next-button').hide(); $('.fc-next-button').addClass('fc-state-disabled'); }else{ //$('.fc-prev-button').show(); //$('.fc-next-button').show(); $('.fc-prev-button').removeClass('fc-state-disabled'); $('.fc-next-button').removeClass('fc-state-disabled'); } }, 本当に助かりました。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問