Ereignisse in Vollkalender unter Kalender anzeigen?

Question

Ich habe eine harte Zeit, dies zu tun. Der Kalender Zeigt die Ereignisse im Kalender an. Ich möchte jedoch die Ereignisse auch unterhalb des Kalenders auflisten können, damit Sie den vollständigen Namen der Ereignisse im aktuellen Monat sehen können. Ich habe den folgenden Code (Ich verwende ColdFusion- und Mura und ich bin neu in beide):

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

Unten ist das, was ich zu tun versucht:

Jede Hilfe würde geschätzt. Dank

Answer 1

Sie wissen nicht, ob Sie schlicht JS verwenden können (ich weiß, Coldfusion nicht), aber in der Regel können Sie alle FullCalendar Ereignisse abrufen, indem Sie den Aufruf:

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

Welche Reihe von Veranstaltungen gibt, dann sind Sie kann darüber iterieren und eine Liste rendern.

Hoffe, das hilft.

EDIT:

Also vielleicht so etwas wie

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

Und Sie können wie etwas verwenden:

$('#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; 

     } 
    });