カレンダーの下にFullcalendarのイベントを表示しますか？

Question

私はこれを行うには苦労しています。カレンダーカレンダーのイベントを表示しますが、カレンダーの下にイベントをリストして、今月のイベントの完全な名前を表示できるようにしたいと考えています。私は、次のコードを持っている（私は、ColdFusionを使用していますし、村と私は両方に新しいです）：

任意の助けをいただければ幸いです。

以下

<cffunction name="MultipleFeaturedEvents"> 
    <cfargument name="feedName" type="string" default="702771E7-155D-0201-11DF8865B175735F"/> 
    <cfargument name="maxMonths" type="numeric" default="3" /> 
    <cfargument name="groupDailyEvents" default="true" /> 
     <cfscript> 

      var rs = ''; 
      var subRS1 = ''; 
      var local = {}; 
      local.listIDs = ''; 

      local.util = $.getCalendarUtility(); 
      local.rsItems = local.util.getCalendarItems(calendarid=arguments.feedName, start=Now(), end=DateAdd('m', val(4), Now())); 


      var qoq = new Query(); 
      qoq.setDBType('query'); 
      qoq.setAttributes(rs=local.rsItems, maxRows=val(1)); 
      qoq.setSQL(' 
       SELECT * 
       FROM rs 
       ORDER BY displaystart ASC 
      '); 
      var qoqResult = qoq.execute().getResult(); 
      local.it = $.getBean('contentIterator').setQuery(qoqResult); 

     </cfscript> 
    <cfsavecontent variable="local.str"> 
     <cfoutput> 
       <cfset ctr=1 /> 
       <!---<div>#local.it.hasNext()#</div>---> 
       <cfloop condition="(local.it.hasNext()) AND (ctr LT 4)"> 
        <cfset local.item = local.it.next() > 
        <cfif not ListFind(local.listIDs, local.item.getValue('contentid'))> 
         <cfif ctr eq 1> 
          <!--- TODO: set a default image if no image is available ---> 
          <div class="hidden-xs col-md-2"> 
           <p class="upcoming-events-image"><img src="#local.item.getImageURL()#" alt="#HTMLEditFormat(local.item.getTitle())#"> </p> 
          </div> 
          <div class="col-md-offset-0 col-md-4" id="featured-event"> 
           <h3>#HTMLEditFormat(local.item.getMenuTitle())#</h3> 
           <i class="fa fa-calendar fixIconCal"></i> 
           <!---#local.item.getDisplaystart()#---> 
           #LSDateFormat(local.item.getValue('displayStart'), "mmm d, yyyy")# 
           <cfquery dbtype="query" name="subRS1"> 
            select * 
            from rsItems 
            where rsItems.contentid = <cfqueryparam value="#local.item.getValue('contentid')#" /> 
           </cfquery> 
           <cfif subRS1.recordcount gt 1> 
            <!--- end date ---> 
            <cfset enddate = ListLast(ValueList(subRS1.displaystop)) /> 
            <cfif IsValid('date', enddate)> 
             - #LSDateFormat(enddate)# 
            </cfif> 
           </cfif> 
           <br /> 
           <i class="fa fa-clock-o"></i> 
           #timeFormat(local.item.getValue('displayStart'), "h:mm tt")# - #timeFormat(local.item.getValue('displayStop'), "h:mm tt")# 
           <br /> 
           <i class="fa fa-map-marker"></i> 
           Location Information 
           <!--- Summary ---> 
           <div class="featured-event-summary"> 
            <cfif Len(local.item.getValue('summary'))> 
            #local.item.getValue('summary')# 
            </cfif> 
           </div> 
          </div> 
          <cfelse> 
         </cfif> 
        </cfif> 
       </cfloop> 
     </cfoutput> 
    </cfsavecontent> 
    <cfreturn local.str /> 
</cffunction> 

は私がやろうとしていますものです。あなたはプレーンなJSを使用できるかどうおかげ

Answer 1

は（私は、ColdFusionを知らない）か分からないのですが、一般的に、あなたは呼び出すことにより、すべてのFullCalendarイベントを取得することができます。そして、あなたのイベントの配列を返します

$('#calendar').fullCalendar('clientEvents') 

それを反復していくつかのリストをレンダリングすることができます。

これが役に立ちます。

EDIT：

ので、多分

$('#calendar').fullCalendar('clientEvents', function(ev) { 
    //will loop for each event you have in the calendar 
    console.log(ev); //event 
}); 

のようなものそして、あなたのようなものを使用することができます

$('#calendar').fullCalendar('clientEvents', function(ev) { 
    $('.your-list-container').append('<div>' + ev.title + '</div>'); 
}); 

Answer 2

this is js code , hope its help you .. 
    //get the start and the end of the current view 

    var startDate = $('#idOfCalendar').fullCalendar('getView').start; 
    var endDate = $('#idOfCalendar').fullCalendar('getView').end; 
    var eventsNames= new Array(); 


    var todaysEvents = $('#idOfCalendar').fullCalendar('clientEvents', function (event) { 
     if (event.start >= startDate && event.start <= endDate 
      || event.end >= startDate && event.end <= endDate) { 

       eventsNames.push(event.title) 
       //take what do you whant from the event object 

       return true; 

     } 
    });