Полный календарь JQuery, как изменить вид

Question

Я использую полный календарь JQuery в своем приложении, но мне нужно немного другое представление, то есть - в представлении месяца не отображаются задачи, только цветные дни, у которых события связаны с другим цветом, чем дни без событий.Затем, когда пользователь щелкает этот день в представлении месяца - открывается представление дня для этого дня со всеми событиями.

Можно ли выполнить такую ​​настройку?Спасибо, любезно.

Answer 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

Answer 2

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

На самом деле вы можете сделать это в обычном jQuery DatePicker, если хотите вместо этого (перейдите в март, чтобы просмотреть события и нажать для предупреждения).Я не знаю много о том, как работает плагин полного календаря, но в документации может быть что-то, что поможет:

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

Answer 3

вот решение, которое работает без дубликатов, генерируемых при перемещении между представлениями. он загружает два разных набора источников данных в зависимости от того, какое представление вы загружаете. Я использовал Ppumkins помочь с его. обратите внимание на порядок вызовов addEventSource и removeEventSource. Для меня мне нужно было загрузить addEventSource до removeEventSource, в противном случае дубликаты появятся при первом просмотре.

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