JQuery完整的日历，如何改变视图 [英] JQuery full calendar, how to change view
本文介绍了JQuery完整的日历，如何改变视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在我的应用程序中使用了JQuery Full Calendar，但我需要稍微不同的视图，
- 在月视图中不显示任务，只是颜色日期与不同颜色关联的事件事件。然后当用户在月视图中点击这一天时 - 打开这一天的日视图显示所有事件。
是否可以进行此类调整？
Thank you kindly。
解决方案
我通过使用两个Feed来完成这项工作
我的服务器返回feedBasic和feedComplex
feedBasic只会在该月显示一个事件，无论其中还有多少其他相同事件在其中 - Click就会变成月视图并加载完整的Feed。
也许这段代码可以帮到你。它是代码分配，但它处理4饲料+谷歌日历。
$（document）.ready（function（）{$ b $）有一些错误，但它的核心功能可用。 b
var lastView;
$ b $（'＃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，
// load：function（bool）{if（bool ）$（'＃loadImg'）。show（）; else $（'＃loadingImg'）。hide（）; alert（$（'＃calendar'）。fullCalendar（'clientEvents'））}，
loading：function（bool）{if（bool）$（'＃loadImg'）。show（）; else $（'＃loadingImg'）。hide（）;}，
/ /查看更改 - 也添加INI TIAL SOURCES PER DAY VIEW
viewDisplay：function（view）{
if（lastView == undefined）{lastView ='firstRun'; }
$ b $ 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'）;如果（view.name =='basicDay'）
{
if（'<％= brsEnabled％>'=='True'）{
$ b （'#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;
$ b $ //点击
eventClick函数（event.url！= undefined）{if（event.url.indexOf（google）> 0）{return false;}从以下链接到所有的OCCASIONS
if如果（event.newsEvent ==True）
{
//某些其他特定函数
}
else
{
var view = $（'＃calendar'）。fullCalendar（'getView'）;
if（view.name =='month'）
{
$（'＃calendar'）。fullCalendar（'changeView'，'basicDay'）;
$（'＃calendar'）。fullCalendar（'gotoDate'，event.start）;
}
if（view.name =='basicDay'）
{
//手柄点击事件在当天查看扩展DIV与额外的信息
$ b // HOVER
// eventMouseover：function（event，jsEvent，view）{if（event.PopUp ==' '）{$（this）.CreateBubblePopup（{innerHtml：+'< br /> Click for more infromation。'，themePath：'images / bubblepopup-theme'，themeName：'black'}）; }}，
//点击
// dayClick：function（event，jsEvent，view）{alert（Day Clicked .. Booking？）}，
//所有合并的初始Feeds
eventSources：[<％= myGoogleCalendars％> ]
}）;
//附加加载图像
$（'。fc-header-title'）。append（'< img id =loadingImgstyle =width：16px; height： 11px; float：none; margin-top：-25px;src =images / loadingSmall.gif/>'）;
$ b $ // 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 =filterHDIDclass =fc-button-content> hdid< / span>< span class =fc-button-effect>< 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'）;
}
$（'。data-fixtures'）.css（'display'，'inline'）
$（this）.parents（'span '）.addClass（'fc-state-active'）;
if（'<％= previousEnabled％>'=='True'）{$（'。data-previous'）.css（'显示'，'内联'）
}
}}）;
$ b $ // 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- >< span class =fc-button-inner>< span id =filterBRSclass =fc-button-content> brs< / span>< span class =fc-按钮效应><跨度>< /跨度>< /跨度>< /跨度>< /跨度>'）;
$（＃filterBRS）。click（function（）{if（$（this）.parents（'span'）。hasClass（'fc-state-active'））
{
$（'。data-brs'）。css（'display'，'none'）
//$('#calendar').fullCalendar('removeEventSource'，'/diaryFeed.aspx?style= （'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（'<％= google> 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 =filterGCALclass =fc-button-content> google< / span>< span class =fc-button-effect ><跨度>< /跨度>< /跨度>< /跨度>< /跨度>'）;
$（＃filterGCAL）。click（function（）{if（$（this）.parents（'span'）。hasClass（'fc-state-active'））
{
$（'＃calendar'）。fullCalendar（'removeEventSource'，<％= myGoogleCalendars％>）; $（this）.parents（'span'）。removeClass（'fc-state-active'）; $ （$'$ calendar'）。fullCalendar（'addEventSource'，<％= myGoogleCalendars％>）; $（this）.parents（'b
$' span'）。addClass（'fc-state-active'）;
}}）;
}
//更多
}）;
< / script>
应该发生的视频。
以您需要的
http://www.youtube。 com / watch？v = UKUu9KJxunI
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.
Is it possible to make such adjustment? Thank you kindly.
解决方案
I have done this by using two feeds
My server returns feedBasic and 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.
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.
$(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
这篇关于JQuery完整的日历，如何改变视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
