JQuery完整日历，如何更改视图
Posted
技术标签:
【中文标题】JQuery完整日历，如何更改视图【英文标题】：JQuery full calendar, how to change view 【发布时间】：2011-08-03 23:32:53 【问题描述】：我在我的应用程序中使用 JQuery Full Calendar，但我需要稍微不同的视图， 也就是说 - 在月视图中不显示任务，只是将事件关联到与没有事件的日期不同的颜色。然后，当用户在月视图中单击这一天时 - 打开这一天的日视图，显示所有事件。
可以做这样的调整吗？ 非常感谢。
【问题讨论】：
【参考方案1】：我已经通过使用两个提要来做到这一点
我的服务器返回 feedBasic 和 feedComplex
feedBasic 只会在当月显示一个事件，无论其中有多少其他相同事件 - 点击它，它将切换到月视图并加载完整的提要。
也许这段代码可以帮助你。它是代码分配，但它处理 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>
关于应该发生的事情的视频。 以您需要的方式插入 http://www.youtube.com/watch?v=UKUu9KJxunI
【讨论】：
我已将其添加为我的最爱，我认为该代码中有很多我可以在我的全日历实现中使用。特别是您的按钮，即 BRS/Google 等。我可以使用它来切换用户在单击按钮时加载详细或简单的数据集。而且你真的帮我解决了一个大问题。我不知道如何根据月/日/周是否加载来加载不同的数据提要详细信息/简单。我需要viewDisplay: function(view) alert(view.name); 一直在文档中！
我只是想澄清一下，当您第一次加载到日历中，然后在月视图或基本日视图之间单击时，您会看到重复记录吗？我已经完全实现了您的代码（关于if (view.name != lastView ) 等），但无法解决这个问题【参考方案2】：
http://webdesignandseo.net/jquery/datepicker/
如果您愿意，您实际上可以在普通的 jQuery DatePicker 中执行此操作（前往 March 查看事件并单击以获得警报）。我不太了解完整日历插件的工作原理，但文档中可能会有一些帮助：
http://arshaw.com/fullcalendar/docs/
【讨论】：
【参考方案3】：这是一个解决方案，在视图之间移动时不会产生重复。它根据您加载的视图加载两组不同的数据源。我用 ppumkins 帮助他。注意addEventSource 和removeEventSource 调用的顺序。对我来说，我需要在removeEventSource 之前加载addEventSource，否则在第一次查看点击时会出现重复项
http://dev2.mycmo.com.au/fullcalendar/calendar_problem_demo.php
【讨论】：
以上是关于JQuery完整日历，如何更改视图的主要内容，如果未能解决你的问题，请参考以下文章
如何在完整日历 Jquery 的周视图和日视图中隐藏开始时间（.fc-time）？