bootstrapラベルページをfullcalendarカレンダープラグインと組み合わせて使用すると、隠しページが表示され、カレンダーが表示されない解決策が表示されます.
9300 ワード
昨日プロジェクトをするとき、フロントエンドはカレンダーを使う必要があり、カレンダープラグインfullcalendarを使って、機能が強いです.同時にフロントで使用されているbootstrapのラベルページ形式で複数のカレンダーが表示されますが、統合するとデフォルトで表示されている最初のページのカレンダーしか表示されず、他のラベルページを開くとカレンダーはヘッダのみ表示され、カレンダー情報は表示されません.その後、公式文書の学習を通じて、原因を見つけた.
本来fullcalendarは隠し要素でカレンダーをレンダリングすることはサポートされていないので、他の隠しラベルページではカレンダーをロードできません.では、解決策はありますが、他のラベルページに表示されているときにカレンダーをもう一度ロードすればいいです.
fullcalendarには、$('.selector')という属性メソッドがあります.fullCalendar("render"):このメソッドはカレンダー全体をすぐにレンダリングするために使用され、1つの可視要素でfullCalendarを呼び出すと自動的に呼び出され、1つの非表示要素で呼び出す場合は、できるだけ早く手動で呼び出して要素を可視化してレンダリングする必要がある.
では、ラベルページを表示するときにこのメソッドを呼び出すだけです.
解決後のページは次のとおりです.
bootstrapラベルページには属性shownがあります.bs.tabは、表示が完了した後に行う操作です.ここでカレンダーをロードしながら判断を増やし、一度だけロードすることができます.
注:cssスタイルを導入する場合、
本来fullcalendarは隠し要素でカレンダーをレンダリングすることはサポートされていないので、他の隠しラベルページではカレンダーをロードできません.では、解決策はありますが、他のラベルページに表示されているときにカレンダーをもう一度ロードすればいいです.
fullcalendarには、$('.selector')という属性メソッドがあります.fullCalendar("render"):このメソッドはカレンダー全体をすぐにレンダリングするために使用され、1つの可視要素でfullCalendarを呼び出すと自動的に呼び出され、1つの非表示要素で呼び出す場合は、できるだけ早く手動で呼び出して要素を可視化してレンダリングする必要がある.
では、ラベルページを表示するときにこのメソッドを呼び出すだけです.
解決後のページは次のとおりです.
$(document).ready(function() {
$("#firstClassCabin_calendar").fullCalendar({
header : {
left : 'prev,next ,today',
center : '',
right : 'title'
},
eventLimit:true,
views : { //
month : {// ，eventLimit true
eventLimit : 2
},
},
aspectRatio : 1.8,
lang : 'zh-cn',// ， lang-all.js
firstDay : 0,// ，0： ，1：
defaultDate : '2016-01-12',//
eventClick : function(event,element) {
var title = prompt('Event Title:');
if (title) {
event.title = title;
$('#firstClassCabin_calendar').fullCalendar('updateEvent',event);
}
},
eventRender : function(event,element) {
var html = "<table><tr><td> ￥：</td><td>1000</td></tr>"+
"<tr><td> ￥：</td><td>1000</td></tr>"+
"<tr><td> ￥：</td><td>1000</td></tr></table>";
element.html(html);
},
eventBackgroundColor:"#fff",
events : [
{
title : 'Meeting',
start : '2016-01-12T14:30:00'
},
{
title : 'Happy Hour',
start : '2016-01-12T17:30:00'
},
{
title : 'Dinner',
start : '2016-01-12T20:00:00'
},
{
title : 'Birthday Party',
start : '2016-01-13T07:00:00'
},
{
title : 'Click for Google',
url : 'http://google.com/',
start : '2016-01-28'
} ]
});
$("#businessCabin_calendar").fullCalendar({
header : {
left : 'prev,next ,today',
center : '',
right : 'title'
},
aspectRatio : 1.8,
lang : 'zh-cn',// ， lang-all.js
firstDay : 0,// ，0： ，1：
defaultDate : '2016-01-12',//
editable : true,
eventLimit : true, // allow "more" link when too many events
color : 'yellow', // an option!
textColor : 'black', // an option!
allDaySlot : true,
views : { //
month : {// ，eventLimit true
eventLimit : 2
},
agendaFourDay : {
type : 'agenda',
duration : {
days : 1
},
buttonText : '4 day'
}
},
eventClick : function(event,
element) {
var title = prompt('Event Title:');
if (title) {
$('#businessCabin_calendar').fullCalendar('updateEvent',event);
}
},
eventRender : function(event,element) {
var html = "<table><tr><td> ￥：</td><td>1000</td></tr>"+
"<tr><td> ￥：</td><td>1000</td></tr>"+
"<tr><td> ￥：</td><td>1000</td></tr></table>";
element.html(html);
},
events : [
{
title : 'All Day Event',
start : '2016-01-01'
},
{
title : 'Long Event',
start : '2016-01-07',
end : '2016-01-10'
},
{
title : 'Click for Google',
url : 'http://google.com/',
start : '2016-01-28'
} ]
});
$("#touristClass_calendar").fullCalendar({
header : {
left : 'prev,next ,today',
center : '',
right : 'title'
},
aspectRatio : 1.8,
lang : 'zh-cn',// ， lang-all.js
firstDay : 0,// ，0： ，1：
defaultDate : '2016-01-12',//
eventLimit : true, // allow "more" link when too many events
views : { //
month : {// ，eventLimit true
eventLimit : 2
}
},
eventClick : function(event,element) {
// change the border color just for fun
var title = prompt('Event Title:');
if (title) {
event.title = title;
$('#touristClass_calendar').fullCalendar('updateEvent',event);
}
},
eventRender : function(event,element) {
var html = "<table><tr><td> ￥：</td><td>1000</td></tr>"+
"<tr><td> ￥：</td><td>1000</td></tr>"+
"<tr><td> ￥：</td><td>1000</td></tr></table>";
element.html(html);
},
events : [
{
id : 999,
title : 'Repeating Event',
start : '2016-01-16T16:00:00'
},
{
title : 'Conference',
start : '2016-01-11',
end : '2016-01-13'
},
{
title : 'Meeting',
start : '2016-01-12T10:30:00',
end : '2016-01-12T12:30:00'
},
{
title : 'Lunch',
start : '2016-01-12T12:00:00'
},
{
title : 'Meeting',
start : '2016-01-12T14:30:00'
},
{
title : 'Happy Hour',
start : '2016-01-12T17:30:00'
}]
});
// div ，
var businessCabinIsloaded = false;
$("#businessCabina").on('shown.bs.tab',function(e) {
if(!businessCabinIsloaded){
console.log(" 111");
$("#businessCabin_calendar").fullCalendar('render');
businessCabinIsloaded = true;
}
});
var touristClassIsloaded = false;
$("#touristClassa").on('shown.bs.tab',function(e) {
if(!touristClassIsloaded){
console.log(" 222");
$("#touristClass_calendar").fullCalendar('render');
}
});
});
bootstrapラベルページには属性shownがあります.bs.tabは、表示が完了した後に行う操作です.ここでカレンダーをロードしながら判断を増やし、一度だけロードすることができます.
注:cssスタイルを導入する場合、