2011-04-12 9 views
7

Estoy usando JQuery Calendario completo en mi aplicación, pero necesito una vista ligeramente diferente, que es - en la vista de mes no mostrar tareas, solo días de color que tienen eventos asociados a diferentes color que días sin eventos. Luego, cuando el usuario haga clic en este día en la vista de mes, se abre una vista de día para este día que muestra todos los eventos.Calendario completo de JQuery, cómo cambiar la vista

¿Es posible realizar dicho ajuste? Gracias amablemente.

Respuesta

7

he hecho esto mediante el uso de dos alimentaciones

Mi servidor devuelve feedBasic y feedComplex

feedBasic solo mostrará un evento en el mes sin importar cuántos otros del mismo evento estén allí: haga clic en él y cambiará a la vista de mes y cargará el feed completo.

Tal vez este código puede ayudar. Es asignado de código pero maneja 4 feeds + calendarios de google. Tiene algunos errores, pero es la funcionalidad principal que funciona.

$(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> 

Un video de lo que se supone que debe suceder. Enchúfalo de la manera que necesita http://www.youtube.com/watch?v=UKUu9KJxunI

+0

He añadido esto como una de las favoritas, creo que hay una gran cantidad de código que pueda utilizar en mi aplicación de fullcalendar . Especialmente sus botones, es decir, BRS/Google, etc. Puedo usar esto para alternar entre los usuarios que cargan conjuntos de datos detallados o simples al hacer clic en un botón. También realmente me ayudaste con un gran problema. No pude averiguar cómo cargar un detalle de feed de datos diferente/simple dependiendo de si se cargó mes/día/semana. Necesitaba 'viewDisplay: function (view) { \t alert (view.name); \t} '¡Estaba en la documentación todo el tiempo! – wired00

+0

solo quería aclarar, cuando carga por primera vez en el calendario, luego hace clic entre mes o vista básica de día, ¿ve registros duplicados? He implementado exactamente su código (con respecto a 'if (view.name! = LastView)' etc) pero no puedo evitar este problema – wired00

0

aquí hay una solución que funciona sin duplicados generados al pasar de una vista a otra. carga dos conjuntos diferentes de fuentes de datos según la vista que cargue. Utilicé la ayuda de ppumkins con la suya. tenga en cuenta el orden de las llamadas addEventSource y removeEventSource. Para mí que necesitaba para cargar addEventSource antes removeEventSource lo contrario duplicados van a aparecer en la primera vista, haga clic

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

Cuestiones relacionadas