Display Events in Fullcalendar underneath calendar? - coldfusion

Question

I am having a hard time to do this. The calendar Displays the events in the calendar however, I would like to be able to list the events as well below the calendar so you can see the full name of the events that are in the current month. I have the following code(I am using coldfusion and Mura and I am new to both):
<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>
Below is what I am trying to do:
Any help would be appreciated. Thanks

Answer 1

Don't know if you can use plain JS (I don't know ColdFusion), but typically you can retrieve all FullCalendar events by invoking:
$('#calendar').fullCalendar('clientEvents')
Which returns array of Events, then you can iterate over it and render some list.
Hope this helps.
EDIT:
So maybe something like
$('#calendar').fullCalendar('clientEvents', function(ev) {
//will loop for each event you have in the calendar
console.log(ev); //event
});
And you can use something like:
$('#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;
}
});