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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

4488閲覧

fullcalendarでスケジュール管理ツールを自作しています。

miyake

総合スコア19

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/02/24 06:26

プログラミング初心者です。
今fullcalendarを使って複数人のスケジュール管理をするツールを自作しています。
そこで、月表示の際にeventLimitを指定して予定の多い日は他〇件と表示させているのですが、初期表示の際にも他〇件と表示されてしまいます。
月表示で予定が入りきらなくなって初めて他〇件と表示させたいのですがどうしたらいいでしょうか?
文章だと状況は把握しづらいと思うので、ソースを張っておきます。
何かいい方法があれば教えてください。よろしくお願いします。

<html> <head> <title>スケジュール管理</title> <meta http-equiv="Content-Type"content="text/html;charset=UTF-8">
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/gcal.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/lang/ja.js"></script> </head> <body><br> <div align="center"> <label><input type="checkbox" name="schedule_1" value="schedule_1" data-target=".schedule_1"> <font size="5">人名</font></label> <label><input type="checkbox" name="schedule_2" value="schedule_2" data-target=".schedule_2"> <font size="5"color="blue">人名</font></label> <label><input type="checkbox" name="schedule_3" value="schedule_3" data-target=".schedule_3"> <font size="5"color="red">人名</font></label> <label><input type="checkbox" name="schedule_4" value="schedule_4" data-target=".schedule_4"> <font size="5"color="lightgreen">人名</font><br><br></label> <label><input type="checkbox" name="all" id="all"> <font size="5">一括表示</font><br><br></label> <!--<button class="checkAll">一括表示</button><br><br>--> </div> <div id="calendar"></div> <style> .fc-month-view .fc-widget-content{ height: 162px; } </style> <script> $(function(){ $(document).ready(function(){ $('input[type="checkbox"]').not('#all').change(function(){ if ($(this).prop('checked')) { $('#calendar').fullCalendar('addEventSource', eventSources[$(this).data('target')]); } else { $('#calendar').fullCalendar('removeEventSource', eventSources[$(this).data('target')]); } }); function display(){ $('input[type="checkbox"]').each( function(){ if(!$(this).prop('checked')){ //console.log("非表示"); $($(this).data('target')).hide(); }else{ $($(this).data('target')).show(); } } ); } $('input[type="checkbox"]').change(function(){ display(); //console.log(1); }); $('#all').on('change',function(){ $('input[type=checkbox]').prop('checked',this.checked); display(); //console.log(1); }); $('#calendar').fullCalendar({ googleCalendarApiKey: 'AIzaSyCXqbbuhIj9n55zd_iXlfya7aUpCe8ikw0', defaultView: 'agendaDay', axisFormat: 'H:mm', timeFormat: 'H:mm', views: { month: { eventLimit: 6 } }, header: { // title, prev, next, prevYear, nextYear, today left: 'prev,next today', center: 'title', right: 'agendaDay agendaWeek month', }, eventClick: function(event){ window.open(event.url,'gcalevent','width=700,height=600'); return false; }, eventAfterAllRender: function(){ display(); }, eventSources: [ { url: 'GoogleカレンダーのID', className: "schedule_1", color: "black", }, { url: 'GoogleカレンダーのID', className: "schedule_2", color: "blue" }, { url: 'GoogleカレンダーのID', className: "schedule_3", color: "red" }, { url: 'GoogleカレンダーのID', className: "schedule_4", color: "lightgreen" }, ], }); }); }); </script> </body>
</html>

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

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

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

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

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

ogaaaan

2016/02/24 06:46

『初期表示の際にも他〇件と表示されてしまいます。 』とかいてますが、『他〇件』と表示させるロジックが見当たらないのです。
miyake

2016/02/24 06:57

ご指摘ありがとうございます。 「他〇件」と表示させるロジックは、 $('#calendar').fullCalendar({ googleCalendarApiKey: 'AIzaSyCXqbbuhIj9n55zd_iXlfya7aUpCe8ikw0', defaultView: 'agendaDay', axisFormat: 'H:mm', timeFormat: 'H:mm', views: { month: { eventLimit: 6 } }, のeventLimit: 6の部分です。 これがcheckboxにcheckがなくイベントが表示されていないときは表示させないようにしたいです。
ogaaaan

2016/02/24 07:04

fullcalenderは何度か使ったこと歩けど、Googleカレンダーと連携したことはないので筋違いならすいません。 この『6』はパラメータですよね。『他○件』という文字列はGoogle側が返すんですかね。だとしたらコールバック的な処理を追加すればいいのかなぁ。 あんまヒントになってなくてすいません。
miyake

2016/02/24 07:50

ありがとうございます! 使えそうなコールバック関数しらべてみます!
ogaaaan

2016/02/24 09:00

らじゃっす!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問