Показать события в 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> 

Ниже то, что я пытаюсь сделать:

Любая помощь будет оценена. Благодаря

Answer 1

Не знаю, если вы можете использовать простые JS (я не знаю, 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; 

     } 
    });