在fullcalendar中显示仅与当前月份相关的事件?

时间:2016-05-23 18:20:19

标签: jquery html coldfusion

我发现建议的方法可以隐藏当月不属于的事件:https://github.com/fullcalendar/fullcalendar/issues/437

我想使用以下代码隐藏事件。我试图在下面实现以下代码:

    //what month the event is

var theEventMonth = event.start.getUTCMonth();
//what month we're viewing
var showingMonth = t.start.getMonth();

if(theEventMonth != showingMonth){
    className = 'hiddenEvent ';
}else{
    className = 'fc-event fc-event-hori ';
}
---

以下是显示当前月份不应出现的事件的图像:

enter image description here

我不确定以下代码中的哪个部分应该添加在以下代码中(我正在使用Coldfusion和Mura):

    <cffunction name="FullCalendar">

    <cfscript>

        var calendarid = $.getbean('content').loadby(title='Regal Events').getcontentid();


    </cfscript>
    <cfsavecontent variable="local.str">
        <cfoutput>           

                 <div id="UpcomingCal" class="calendarResize">
                 </div>
         <script>

         mura.loader()
            .loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.css",{media:'all'})
            <!---.loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar-custom.css",{media:'all'})--->
            .loadcss("#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.print.css",{media:'print'})
            .loadjs(
                "#$.siteConfig('requirementspath')#/fullcalendar/lib/moment.min.js",
                "#$.siteConfig('requirementspath')#/fullcalendar/fullcalendar.min.js",
                "#$.siteConfig('requirementspath')#/fullcalendar/gcal.js",
                function(){
                     $('##UpcomingCal').fullCalendar({
                         weekMode: 'variable',
                         eventSources: [
                            {
                                url: '#variables.$.siteConfig('requirementspath')#/fullcalendar/proxy.cfc?calendarid=#esapiEncode("javascript",CalendarID)#'
                                , type: 'POST'
                                , data: {
                                    method: 'getFullCalendarItems'
                                    , calendarid: '#esapiEncode("javascript",CalendarID)#'
                                    , siteid: '#variables.$.content('siteid')#'
                                    , categoryid: '#esapiEncode('javascript',variables.$.event('categoryid'))#'
                                    , tag: '#esapiEncode('javascript',variables.$.event('tag'))#'
                                }
                                <!---, color: '#this.calendarcolors[colorIndex].background#'
                                , textColor: '#this.calendarcolors[colorIndex].text#'--->
                                , error: function() {
                                    $('##mura-calendar-error').show();
                                }
                            },
                        ]
                    });
                }
               )
         </script>

        </cfoutput>
    </cfsavecontent>
    <cfreturn local.str />
</cffunction

任何帮助将不胜感激。谢谢

3 个答案:

答案 0 :(得分:1)

eventRender: function(event, element, view)
{
    // console.log(event);
    // console.log(event.start.month());
    // console.log(view.start.month());
    // console.log(element);
    // console.log(view.intervalStart.month());
    if(event.start.month() !== view.intervalStart.month()) { return false; }
}, 

答案 1 :(得分:0)

像这样使用。这对我有用。

dayRender:function(date,cell,view){ // added view in arguments 
var startmonth = view.start.getMonth()+1;
if( month == startmonth )
{
  your codes;
}

答案 2 :(得分:0)

当我查看完整日历js 的文档时,我找不到任何解决方案。所以像下面这样使用它。

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();


    var month = Array();
    for (var i = 0;i < event_days.length; i++){

   var cal_month = m + 1;
   var currnt_month = event_days[i].date.split("-").map(Number);

   if(currnt_month[1] == cal_month){
        var monthSource = new Object();
        monthSource.title = '<span style="color: #ff1103">'+event_days[i].base_currency+'&nbsp;&nbsp;'+event_days[i].d_adult_sharing+'</span><br><a  class="btn btn-primary btn-xs book_click" >Book</a>'; 
        monthSource.start = ''+event_days[i].date+'';

        month[i] = monthSource;
      }
    }

event_days是我的数组,其中包含我想要展示我的活动的所有日期。

对于下个月或上个月,我使用。

$(document).on("click", ".fc-button-next" , function(){

   alert('nextis clicked, do something');
});

我希望这会有所帮助。