JQuery 全日历，如何更改视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5637248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery full calendar, how to change view
提问by Srecko Katanec
I am using JQuery Full Calendar in my application, but I need slightly different view, that is - in month view don't show tasks, just color days which have events associated to different color than days with no events. Then when user clicks this day in month view - a day view for this day is opened showing all the events.
我在我的应用程序中使用 JQuery 完整日历，但我需要略有不同的视图，即 - 在月视图中不显示任务，只为具有与不同颜色相关联的事件的天着色而不是没有事件的天。然后，当用户在月视图中单击这一天时 - 将打开这一天的日视图，显示所有事件。
Is it possible to make such adjustment? Thank you kindly.
是否可以进行这样的调整？非常感谢你。
回答by Piotr Kula
I have done this by using two feeds
我通过使用两个提要来做到这一点
My server returns feedBasic and feedComplex
我的服务器返回 feedBasic 和 feedComplex
feedBasic will only show one event on the month no matter how many other of the same event are in there- Click on it and it will change to the month view and load the full feed.
feedBasic 将只显示当月的一个事件，无论那里有多少其他相同的事件 - 单击它，它将更改为月视图并加载完整的提要。
Maybe this code can help you. It is allot of code but it handles 4 feeds + google calendars. Has a few bugs but its the core functionality that works.
也许这段代码可以帮助你。它分配了大量代码，但它处理 4 个提要 + 谷歌日历。有一些错误，但它的核心功能有效。
$(document).ready(function () {
var lastView;
$('#calendar').fullCalendar({
header: {
left: 'today',
center: 'prev,title,next',
right: 'month,basicDay'
},
slotMinutes: 30,
firstHour: 5,
editable: false,
timeFormat: 'H:mm',
firstday: 0, //Sunday0 Monday1..etc
allDayDefault : true,
//loading: function(bool) { if (bool) $('#loadingImg').show(); else $('#loadingImg').hide(); alert( $('#calendar').fullCalendar('clientEvents') ) },
loading: function(bool) { if (bool) $('#loadingImg').show(); else $('#loadingImg').hide(); },
//VIEW CHANGE - ALSO ADDS INITIAL SOURCES PER DAY VIEW
viewDisplay: function(view) {
if (lastView == undefined) { lastView = 'firstRun'; }
if (view.name != lastView )
{
if (view.name == 'month')
{
if ( '<%=brsEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=brsComplex' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=brsBasic' ); }
if ( '<%=activeEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=fixturesComplex' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=fixturesBasic' ); }
if ( '<%=previousEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=previousComplex' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=previousBasic' ); }
if ( '<%=newsEventEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=newsEvents' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=newsEvents' ); }
}
if (view.name == 'basicDay')
{
if ( '<%=brsEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=brsBasic' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=brsComplex' ); }
if ( '<%=activeEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=fixturesBasic' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=fixturesComplex' ); }
if ( '<%=previousEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=previousBasic' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=previousComplex' ); }
if ( '<%=newsEventEnabled %>' == 'True' ) { $('#calendar').fullCalendar( 'removeEventSource', '/diaryFeed.aspx?style=newsEvents' ); $('#calendar').fullCalendar( 'addEventSource', '/diaryFeed.aspx?style=newsEvents' ); }
}
lastView = view.name;
}
},
//EVENT CLICK
eventClick: function( event, jsEvent, view )
{
//STOP GOOGLE LINK FROM FOLLOWING THROUGH ON ALL OCCASIONS
if (event.url != undefined) { if (event.url.indexOf("google") > 0) { return false; } }
if (event.newsEvent == "True")
{
//SOME OTHER SPECIFIC FUNCTION
}
else
{
var view = $('#calendar').fullCalendar('getView');
if (view.name == 'month')
{
$('#calendar').fullCalendar('changeView', 'basicDay');
$('#calendar').fullCalendar( 'gotoDate', event.start );
}
if (view.name == 'basicDay')
{
//HANDLES CLICK OF EVENT IN DAY VIEW TO EXPAND DIV WITH EXTRA INFORMATION
}
}
},
//HOVER
//eventMouseover: function( event, jsEvent, view ) { if (event.PopUp == 'yes') { $(this).CreateBubblePopup({ innerHtml: + '<br/>Click for more infromation.' , themePath: 'images/bubblepopup-theme', themeName: 'black' }); } } ,
//DAY CLICK
//dayClick: function( event, jsEvent, view ) { alert("Day Clicked.. Booking?") } ,
//ALL COMBINED INITIAL FEEDS
eventSources: [ <%=myGoogleCalendars %> ]
});
//ATTACHING A LOADING IMAGE
$('.fc-header-title').append('<img id="loadingImg" style="width:16px; height:11px; float:none; margin-top: -25px;" src="images/loadingSmall.gif" />');
//HDID FILTER
if ('<%=activeEnabled %>' == 'True') {
$('.fc-header-left').append('<span class="fc-button fc-button-today fc-state-default fc-corner-left fc-corner-right fc-state-active"><span class="fc-button-inner"><span id="filterHDID" class="fc-button-content">hdid</span><span class="fc-button-effect"><span></span></span></span></span>');
$("#filterHDID").click(function() { if ($(this).parents('span').hasClass('fc-state-active'))
{
$('.data-fixtures').css('display', 'none')
$(this).parents('span').removeClass('fc-state-active');
if ('<%=previousEnabled %>' == 'True') { $('.data-previous').css('display', 'none');
}
}
else
{
$('.data-fixtures').css('display', 'inline')
$(this).parents('span').addClass('fc-state-active');
if ( '<%=previousEnabled %>' == 'True') { $('.data-previous').css('display', 'inline')
}
} });
}
//BRS FILTER
if ( '<%=brsEnabled %>' == 'True' ) {
$('.fc-header-left').append('<span class="fc-button fc-button-today fc-state-default fc-corner-left fc-corner-right fc-state-active"><span class="fc-button-inner"><span id="filterBRS" class="fc-button-content">brs</span><span class="fc-button-effect"><span></span></span></span></span>');
$("#filterBRS").click(function() { if ($(this).parents('span').hasClass('fc-state-active'))
{
$('.data-brs').css('display', 'none')
//$('#calendar').fullCalendar('removeEventSource', '/diaryFeed.aspx?style=brs');
$(this).parents('span').removeClass('fc-state-active');
}
else
{
$('.data-brs').css('display', 'inline')
//$('#calendar').fullCalendar('addEventSource', '/diaryFeed.aspx?style=brs');
$(this).parents('span').addClass('fc-state-active');
} });
}
//GOOGLE FEED FILTER
if ( '<%=googleEnabled %>' == 'True') {
$('.fc-header-left').append('<span class="fc-button fc-button-today fc-state-default fc-corner-left fc-corner-right fc-state-active"><span class="fc-button-inner"><span id="filterGCAL" class="fc-button-content">google</span><span class="fc-button-effect"><span></span></span></span></span>');
$("#filterGCAL").click(function() { if ($(this).parents('span').hasClass('fc-state-active'))
{
$('#calendar').fullCalendar('removeEventSource', <%=myGoogleCalendars%>); $(this).parents('span').removeClass('fc-state-active');
}
else
{
$('#calendar').fullCalendar('addEventSource', <%= myGoogleCalendars%>); $(this).parents('span').addClass('fc-state-active');
} });
}
//MORE
});
</script>
A video of what is supposed to happen. Plug it in the way you need http://www.youtube.com/watch?v=UKUu9KJxunI
一段关于应该发生什么的视频。以您需要的方式插入 http://www.youtube.com/watch?v=UKUu9KJxunI
回答by Alex
http://webdesignandseo.net/jquery/datepicker/
http://webdesignandseo.net/jquery/datepicker/
You can actually do this in the normal jQuery DatePicker if you wanted that instead (go to March to see events and click for an alert). I don't know much about how the Full Calendar Plugin works but there might be something in the documentation that will help:
如果您愿意，您实际上可以在普通的 jQuery DatePicker 中执行此操作（转到三月查看事件并单击以获取警报）。我不太了解完整日历插件的工作原理，但文档中可能会有帮助：
回答by wired00
here is a solution which works with no duplicates generated when moving between views. it loads two different sets of data sources depending on which view you load. I used ppumkins help with his. note the order of the addEventSourceand removeEventSourcecalls. For me i needed to load addEventSourcebefore removeEventSourceotherwise duplicates will appear on first view click
这是一个解决方案，在视图之间移动时不会生成重复项。它根据您加载的视图加载两组不同的数据源。我用ppumkins帮助他。注意addEventSource和removeEventSource调用的顺序。对我来说，我需要在第一次查看点击时出现重复addEventSource之前加载removeEventSource
http://dev2.mycmo.com.au/fullcalendar/calendar_problem_demo.php
http://dev2.mycmo.com.au/fullcalendar/calendar_problem_demo.php
