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