#jquery #web-applications #fullcalendar
#jquery #веб-приложения #полный календарь
Вопрос:
Я использую полный календарь jQuery в своем приложении, но мне нужен немного другой вид, то есть в режиме просмотра месяца не отображаются задачи, только цветные дни, с событиями которых связаны цвета, отличные от дней без событий. Затем, когда пользователь нажимает на этот день в режиме просмотра месяца — открывается дневной просмотр за этот день, показывающий все события.
Возможно ли произвести такую настройку? Большое вам спасибо.
Ответ №1:
Я сделал это, используя два канала
Мой сервер возвращает feedBasic и feedComplex
feedBasic будет показывать только одно событие за месяц, независимо от того, сколько там других таких же событий — Щелкните по нему, и оно переключится на просмотр за месяц и загрузит полную ленту.
Возможно, этот код сможет вам помочь. В нем много кода, но он обрабатывает 4 ленты календари Google. Имеет несколько ошибок, но его основная функциональность работает.
$(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
Комментарии:
1. я добавил это как избранное, я думаю, что в этом коде есть многое, что я могу использовать в своей реализации fullcalendar. Особенно ваши кнопки ie, BRS / Google и т.д. Я могу использовать это, чтобы переключать пользователя, загружающего подробные или простые наборы данных, одним нажатием кнопки. Также вы действительно помогли мне с большой проблемой. Я не мог понять, как загрузить другую подробную / простую ленту данных в зависимости от того, загружен ли месяц / день / неделя. мне нужно было,
viewDisplay: function(view) { alert(view.name); }чтобы это все время было прямо в документации!2. я просто хотел уточнить, когда вы сначала загружаете календарь, а затем переключаетесь между просмотром месяца или базового дня, вы видите повторяющиеся записи? Я реализовал именно ваш код (относительно
if (view.name != lastView )и т.д.), Но не могу обойти эту проблему
Ответ №2:
http://webdesignandseo.net/jquery/datepicker/
На самом деле вы можете сделать это в обычном jQuery DatePicker, если хотите этого (перейдите в March, чтобы просмотреть события, и нажмите для оповещения). Я мало что знаю о том, как работает плагин полного календаря, но в документации может быть что-то, что поможет:
Ответ №3:
вот решение, которое работает без дубликатов, генерируемых при перемещении между представлениями. он загружает два разных набора источников данных в зависимости от того, какое представление вы загружаете. Я воспользовался помощью ppumkins с его. обратите внимание на порядок вызовов addEventSource и removeEventSource . Для меня мне нужно было загрузить addEventSource раньше removeEventSource , иначе дубликаты появятся при первом просмотре
http://dev2.mycmo.com.au/fullcalendar/calendar_problem_demo.php