JQuery的完整的日历，如何更改视图

Question

我使用JQuery完整的日历在我的应用程序，但我需要稍微不同的看法， 那就是 - 在月视图不显示任务，只是颜色天具有相关联的不同事件颜色比没有事件的日子。然后，当用户在月视图中点击这一天时 - 将打开显示所有事件的今日日视图。

是否有可能做出这样的调整？ 谢谢你。

Answer 1

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

实际上，你可以做到这一点在正常的jQuery的DatePicker如果你想，与其（去三月看事件并单击警报）。我不知道很多关于如何完整的日历插件的作品，但有可能是在文档中的东西，这将有助于：

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

Answer 2

我已经通过使用两个饲料

我的服务器返回的做到了这一点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

Answer 3

这里是一个解决方案，在视图之间移动时不会生成重复项。它根据加载的视图加载两组不同的数据源。我用ppumkins帮助他。请注意0​​和removeEventSource调用的顺序。对我来说，我需要removeEventSource之前加载addEventSource否则重复将出现在第一视图中单击

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