JQuery calendrier complet, comment changer vue

Question

J'utilise JQuery Full Calendar dans mon application, mais j'ai besoin d'une vue légèrement différente, qui est - dans la vue mensuelle ne montrent pas les tâches, juste jours de couleur qui ont des événements associés à différents couleur que les jours sans événements. Ensuite, lorsque l'utilisateur clique sur ce jour dans la vue mensuelle, une vue quotidienne de ce jour est ouverte et affiche tous les événements.

Est-il possible de faire un tel ajustement? Merci beaucoup.

Answer 1

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

Vous pouvez réellement faire dans la DatePicker normale jQuery si vous voulez que la place (aller à Mars pour voir les événements et cliquez pour une alerte). Je ne sais pas beaucoup sur le fonctionnement du plugin Calendrier complet, mais il pourrait y avoir quelque chose dans la documentation qui aidera:

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

Answer 2

Je l'ai fait en utilisant deux alimentations

Mon serveur renvoie feedBasic feedComplex

feedBasic affiche uniquement un événement du mois, quel que soit le nombre d'événements du même événement. Cliquez dessus et il passera à l'affichage du mois et chargera le flux complet.

Peut-être que ce code peut vous aider. Il s'agit d'attribuer du code mais il gère 4 flux + calendriers google. A quelques bugs mais c'est la fonctionnalité de base qui fonctionne.

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

Une vidéo de ce qui est supposé se produire. Branchez-le comme vous le souhaitez http://www.youtube.com/watch?v=UKUu9KJxunI

Answer 3

Voici une solution qui fonctionne sans doublons générés lors du déplacement entre les vues. Il charge deux ensembles de sources de données différents en fonction de la vue que vous chargez. J'ai utilisé l'aide de ppumkins avec le sien. notez l'ordre des appels addEventSource et removeEventSource. Pour moi, je devais charger addEventSource avant removeEventSource autrement les doublons apparaîtront sur la première vue cliquez

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