JQuery完整日历，如何更改视图

我在我的应用程序中使用JQuery完整日历，但我需要稍微不同的视图，即 – 在月视图中不显示任务，只是颜色日具有与不同颜色相关的事件而不是没有事件的日期。 然后，当用户在月视图中单击此日期时 – 将打开此日的日视图，显示所有事件。

有可能做出这样的调整吗？ 非常感谢你。

Answer 1

我通过使用两个feed来完成此操作

我的服务器返回feedBasic和feedComplex

feedBasic只会显示一个月内的一个事件，无论其中有多少其他相同的事件在那里 – 单击它，它将更改为月视图并加载完整的源。

也许这段代码可以帮到你。 这是分配代码，但它处理4个Feed +谷歌日历。 有一些错误，但其核心function有效。

$(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: + '
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(''); //HDID FILTER if ('<%=activeEnabled %>' == 'True') { $('.fc-header-left').append('hdid'); $("#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('brs'); $("#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('google'); $("#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 });  

应该发生什么的video。 以您需要的方式插入http://www.youtube.com/watch?v=UKUu9KJxunI

Answer 2

http://webdesignandseo.net/jquery/datepicker/

实际上，您可以在普通的jQuery DatePicker中执行此操作（例如，转到March查看事件并单击以获取警报）。 我不太了解完整日历插件的工作原理，但文档中可能会有一些内容可以帮助：

http://arshaw.com/fullcalendar/docs/

Answer 3

这是一个解决方案，在视图之间移动时不会产生重复。 它根据您加载的视图加载两组不同的数据源。 我用ppumkins帮助他。 请注意addEventSource和removeEventSource调用的顺序。 对我来说，我需要在removeEventSource之前加载addEventSource ，否则重复项将出现在第一个视图点击上

http://dev2.mycmo.com.au/fullcalendar/calendar_problem_demo.php