Fullcalendar의 일정을 일정 아래에 표시 하시겠습니까?

Question

나는 이것을하기가 힘듭니다. 캘린더 일정에 이벤트를 표시하지만 현재 일정에있는 이벤트의 전체 이름을 볼 수 있도록 일정 아래에 이벤트를 나열 할 수 있기를 원합니다. 나는 다음과 같은 코드가 있습니다 (I에서는 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

는 (I ColdFusion을 몰라) 몰라,하지만 일반적으로는 호출하여 모든 FullCalendar 이벤트를 검색 할 수 있습니다 다음, 당신이 이벤트의 배열을 반환

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

그것을 반복하고 일부 목록을 렌더링 할 수 있습니다.

희망이 도움이됩니다.

편집 :

그래서 아마 뭔가

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

     } 
    });