我使用JQuery完整的日历在我的应用程序,但我需要稍微不同的看法, 那就是 - 在月视图不显示任务,只是颜色天具有相关联的不同事件颜色比没有事件的日子。然后,当用户在月视图中点击这一天时 - 将打开显示所有事件的今日日视图。JQuery的完整的日历,如何更改视图
是否有可能做出这样的调整? 谢谢你。
我使用JQuery完整的日历在我的应用程序,但我需要稍微不同的看法, 那就是 - 在月视图不显示任务,只是颜色天具有相关联的不同事件颜色比没有事件的日子。然后,当用户在月视图中点击这一天时 - 将打开显示所有事件的今日日视图。JQuery的完整的日历,如何更改视图
是否有可能做出这样的调整? 谢谢你。
http://webdesignandseo.net/jquery/datepicker/
实际上,你可以做到这一点在正常的jQuery的DatePicker如果你想,与其(去三月看事件并单击警报)。我不知道很多关于如何完整的日历插件的作品,但有可能是在文档中的东西,这将有助于:
我已经通过使用两个饲料
我的服务器返回的做到了这一点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
这里是一个解决方案,在视图之间移动时不会生成重复项。它根据加载的视图加载两组不同的数据源。我用ppumkins帮助他。请注意0和removeEventSource
调用的顺序。对我来说,我需要removeEventSource
之前加载addEventSource
否则重复将出现在第一视图中单击
http://dev2.mycmo.com.au/fullcalendar/calendar_problem_demo.php
我加为收藏我觉得有很多的代码,我可以在我的实现fullcalendar的使用。特别是你的按钮,即BRS /谷歌等我可以用它来切换用户加载详细或简单的数据集点击一个按钮。你真的帮助我解决了一个大问题。我无法弄清楚如何加载不同的数据提要细节/简单取决于是否加载月/日/周。我需要'viewDisplay:功能(视图){ \t警报(view.name); \t}'这是文档的整个时间没错的! – wired00 2011-04-21 15:36:48
我只是想澄清,当你第一次加载到日历,然后要么一个月basicDay视图之间单击,你会看到重复的记录?我已经实现了你的代码(关于'if(view.name!= lastView)'等),但无法解决这个问题 – wired00 2011-04-21 22:33:24