coldfusion - How to use Coldfusoion MOD?

Question

I have code that grabs events from the FullCalendar.js which works fine.

However, I am having a hard time to style it in a way that in each column, it has two events, breaks and goes to the next column.

The code is written in coldfusion and I read I can use MOD. However, I have tried a if statement and a counter to track how many events are and yet it does not go to the next column

The following is the code I am using. I am trying to target the "More Event" section so that when it hits two events, it breaks and goes to the next column:

<!--- Derived from: --->
<!--- https://gist.github.com/stevewithington/18a6ef38e7234f1e1fc3 --->
<!--- Upcoming events --->
<cffunction name="dspDisplayEvents">
    <cfargument name="feedName" type="string" default="8C702325-155D-0201-11D851267D5B4B2B" />
    <cfargument name="maxMonths" type="numeric" default="3" />
    <cfargument name="groupDailyEvents" default="true" />
    <cfscript>
        var rs = '';
        var subRS = '';
        var local = {};
        local.feed = variables.$.getBean('feed').loadBy(name=arguments.feedName).setMaxItems(0).setNextN(0);
        local.listIDs = '';

        /*if ( feed.getIsNew() ) {
            return '<div class="alert alert-info"><strong>Ooops!</strong> The Content Collection/Feed &quot;<strong>#HTMLEditFormat(arguments.feedName)#</strong>&quot; does not exist.</div>';
        }*/

        local.it = feed.getIterator(
            from=Now()
            , to=DateAdd('m', Val(3), Now())
            , maxItems=3
        );
    rs = local.it.getQuery();

    </cfscript>
    <cfsavecontent variable="local.str">
        <cfoutput>
            <!--- #feed.getIsNew()# --->
            <!--- #local.it.hasNext()# --->
            <cfset ctr= 1 />
            <cfloop condition="(local.it.hasNext()) AND (ctr LT 6)">
                <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="bg-white1 centerEvent"> 
                        <div class="hidden-xs col-md-2 override-col-md-offset-3 margin-left">
                            <p class="image-center upcoming-events-image image-padding"><img src="#local.item.getImageURL()#" alt="#HTMLEditFormat(local.item.getTitle())#"> </p>
                        </div>
                        <div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-2" id="featured-event">
                            <div class="eventCenter">   
                                <h4 class="featured1"><strong>FEATURED EVENT</strong></h4>
                                <hr class="hr" />
                            </div>
                            <div class="eventTop">  
                                <small>
                                    <!--- date --->
                                    <!--- start date --->
                                    #LSDateFormat(local.item.getValue('displayStart'))#
                                        <!--- end date (if 'daily' event, and grouping is requested) --->
                                        <cfif YesNoFormat(arguments.groupDailyEvents)>
                                            <cfquery dbtype="query" name="subRS">
                                                select *
                                                from rs
                                                where rs.contentid = <cfqueryparam value="#local.item.getValue('contentid')#" />
                                            </cfquery>
                                            <cfif subRS.recordcount gt 1>
                                                <!--- end date --->
                                                <cfset enddate = ListLast(ValueList(subRS.displaystop)) />
                                                <cfif IsValid('date', enddate)>
                                                    - #LSDateFormat(enddate)#
                                                </cfif>
                                            </cfif>
                                            <cfset local.listIDs = ListAppend(local.listIDs, local.item.getValue('contentid')) />
                                        </cfif>
                                </small>
                                <h6 class="ellipsis h6size"><!--- Title --->
                                    <a href="#local.item.getURL()#">
                                        <div class="featured-event-title">
                                            #HTMLEditFormat(local.item.getValue('title'))#
                                        </div>
                                    </a>
                                </h6>
                                <div>
                                    <small>
                                        <!--- Summary --->
                                        <div class="featured-event-summary">
                                            <cfif Len(local.item.getValue('summary'))>
                                                #local.item.getValue('summary')#
                                            </cfif>
                                        </div>
                                    </small>
                                </div>
                                <a href="##"><small>Learn more &gt;</small></a>
                                <br />
                            </div>
                        </div><!---eventTop Div--->
                        <cfelse>
                            <cfif ctr eq 2>
                        **<div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-2 <!---eventBox--->" id="more-events">
                                <small><strong class="featured moreCenter">MORE EVENTS</strong></small><br />
                            </cfif>
                            <div class="eventSize eventDiv" style="border: 1px solid black;">

                                    <small>#LSDateFormat(local.item.getValue('displayStart'))#</small><br />
                                    <small><strong>#HTMLEditFormat(local.item.getValue('title'))#</strong></small><br />
                            </div>
                                <br />
                    </cfif>
                </cfif>
                <cfset ctr++ />
            </cfloop>**
            <!--- <button class="btn btn-info btn-md resizable" type="button" onClick="parent.location='http://oc2-web03/mura-6.2.6407/index.cfm/news-events/events-calendar/'" ><small>SEE ALL EVENTS &gt;</small></button> --->
            </div>
            <button class="btn btn-info btn-md resizable buttonHome" type="button" onClick="parent.location='http://oc2-web03/regal_prod/index.cfm/news-events/events-calendar/'" ><small>SEE ALL EVENTS &gt;</small></button><br />
        </div><!---div bg-white1--->
        </cfoutput>
    </cfsavecontent>
    <cfreturn local.str />
</cffunction>

UPDATE This the relevant code I need help to adjust:

<div class="col-xs-offset-1 col-xs-10 col-md-offset-0 col-md-2 <!---eventBox--->" id="more-events">
                                    <small><strong class="featured moreCenter">MORE EVENTS</strong></small><br />
                                </cfif>
                                <div class="eventSize eventDiv" style="border: 1px solid black;">

                                        <small>#LSDateFormat(local.item.getValue('displayStart'))#</small><br />
                                        <small><strong>#HTMLEditFormat(local.item.getValue('title'))#</strong></small><br />
                                </div>
                                    <br />
                        </cfif>
                    </cfif>
                    <cfset ctr++ />
                </cfloop>

Any help on how to use MOD or an example would be great.

Answer 1

Waitting for answers