Events Calendar carousel for the next 12 months of events - used carouFredSel.js

EventsCalandarCarousel.cshtml

@using Contensis.Framework.Web
@using Contensis.Framework.Web.Search

@{
    /* We'll start by getting the current month */
    var currentMonth = DateTime.Now.ToString("MMM");
    
    /* Now, we'll get the template by ID for the events records */
    var eventsQuery = Query.Where("SC_T_ID").IsEqualTo("-212");
    var eventItems = new NodeFinder().Find(eventsQuery);
    var currentDate = DateTime.Today;
    var thisMonth = DateTime.Now.ToString("MMM");
}

<div class="sys_forwardlook sys_clearfix">
    <a class=" sys_btn sys_btnsmall sys_btnorange" href="/Whats-Happening/event-listings.aspx"> See full calendar </a>
    <h2>Forward look </h2>
    <div class="sys_forward-months">
        <ul id="dateList">
        
        
        @{<!-- Loops through the months and drops them -->
                DateTime now = DateTime.Now;
            
                for (int i = 0; i < 12; i++)
                {
                    <li id="@now.ToString("MMMM")"><a href="#" class="caroufredsel">@now.ToString("MMM")</a></li>
                  now = now.AddMonths(1);
            	}
        }
        
        </ul>
    </div>   
    
       <div  id="fwdLk">
            <!-- Gets the events, groups them by month and places them into the appropriate container elements -->
    @{
            DateTime theNow = DateTime.Now;
        
            for (int i = 0; i < 12; i++)
            {
               
                var currentEvents = eventItems.Where(eA => eA.Data.StartDate.Month == theNow.Month && eA.Data.enddate >= theNow && eA.Data.StartDate <= theNow.AddMonths(12)).OrderBy(eA => eA.Data.StartDate);
                   
                var theMonth = theNow.ToString("MMMM");
                <div class="sys_slideInnerWrap">
                
                    <div class="sys_back @theMonth">
                        @if(currentEvents.Count() >= 4) {
                            <a href="#"><img src="/SiteElements/img/arrowleftwhitelarge.png" width="24" height="24"  alt=""/></a>
                        }
                    </div>
              
                 @if(currentEvents.Count() == 0) {
                    <div class="sys_forwardLkMonth @theMonth"><h5 class="sys_forward-event-title sys_forward-event-title-noresults">Sorry, there are no events in @theMonth</h5></div>
                 }
                 else {
                <div class="sys_forwardLkMonth @theMonth">
                    
                 @foreach(var eventItem in currentEvents) 
                 {
                    var eventDate = eventItem.Data.StartDate.ToString("ddd d MMMM, yyyy ");
                    var eventMonth = eventItem.Data.StartDate.ToString("MMMM");
                 
                                <div class="sys_forward-event">
                                    <p class="sys_forward-event-date">@eventDate</p>
                                    <h5 class="sys_forward-event-title"><a href="@eventItem.Path" title="@eventItem.Title">@eventItem.Title</a></h5>
                                    <p>@eventItem.Data.Description</p>
                                </div>

                 }
                    
                  </div>
                  }
               
                    <div class="sys_forth @theMonth">
                        @if(currentEvents.Count() >= 4) {
                            <a href="#"><img src="/SiteElements/img/arrowrightwhitelarge.png" width="24" height="24"  alt=""/></a>
                        }
                   </div>       
              
                
               </div>
               
                theNow = theNow.AddMonths(1);
                
        	}
        }
        </div>

    
</div>

<script src="/SiteElements/js/forwardLookSlider.js"></script>

slider-init.js

    // This initiates the carousel(s)
    
    $(".sys_forwardLkMonth.January").carouFredSel({width: "186px",height: "192px",circular: false,infinite: false,items: {minimum: 1,width: 186,height: 192},align: "left",scroll: "linear",auto: false,prev: ".sys_back.January",next: ".sys_forth.January",anchorBuilder   : false, filter : ".sys_forward-event"});
    $(".sys_forwardLkMonth.February").carouFredSel({width: "186px",height: "192px",circular: false,infinite: false,items: {minimum: 1,width: 186,height: 192},align: "left",scroll: "linear",auto: false,prev: ".sys_back.February ",next: ".sys_forth.February",anchorBuilder   : false, filter : ".sys_forward-event"});
    $(".sys_forwardLkMonth.March").carouFredSel({width: "186px",height: "192px",circular: false,infinite: false,items: {minimum: 1,width: 186,height: 192},align: "left",scroll: "linear",auto: false,prev: ".sys_back.March ",next: ".sys_forth.March",anchorBuilder   : false, filter : ".sys_forward-event"});
    $(".sys_forwardLkMonth.April").carouFredSel({width: "186px",height: "192px",circular: false,infinite: false,items: {minimum: 1,width: 186,height: 192},align: "left",scroll: "linear",auto: false,prev: ".sys_back.April ",next: ".sys_forth.April",anchorBuilder   : false, filter : ".sys_forward-event"});
    $(".sys_forwardLkMonth.May").carouFredSel({width: "186px",height: "192px",circular: false,infinite: false,items: {minimum: 1,width: 186,height: 192},align: "left",scroll: "linear",auto: false,prev: ".sys_back.May ",next: ".sys_forth.May",anchorBuilder   : false, filter : ".sys_forward-event"});
    $(".sys_forwardLkMonth.June").carouFredSel({width: "186px",height: "192px",circular: false,infinite: false,items: {minimum: 1,width: 186,height: 192},align: "left",scroll: "linear",auto: false,prev: ".sys_back.June ",next: ".sys_forth.June",anchorBuilder   : false, filter : ".sys_forward-event"});
    $(".sys_forwardLkMonth.July").carouFredSel({width: "186px",height: "192px",circular: false,infinite: false,items: {minimum: 1,width: 186,height: 192},align: "left",scroll: "linear",auto: false,prev: ".sys_back.July ",next: ".sys_forth.July",anchorBuilder   : false, filter : ".sys_forward-event"});
    $(".sys_forwardLkMonth.August").carouFredSel({width: "186px",height: "192px",circular: false,infinite: false,items: {minimum: 1,width: 186,height: 192},align: "left",scroll: "linear",auto: false,prev: ".sys_back.August ",next: ".sys_forth.August",anchorBuilder   : false, filter : ".sys_forward-event"});
    $(".sys_forwardLkMonth.September").carouFredSel({width: "186px",height: "192px",circular: false,infinite: false,items: {minimum: 1,width: 186,height: 192},align: "left",scroll: "linear",auto: false,prev: ".sys_back.September ",next: ".sys_forth.September",anchorBuilder   : false, filter : ".sys_forward-event"});
    $(".sys_forwardLkMonth.October").carouFredSel({width: "186px",height: "192px",circular: false,infinite: false,items: {minimum: 1,width: 186,height: 192},align: "left",scroll: "linear",auto: false,prev: ".sys_back.October ",next: ".sys_forth.October",anchorBuilder   : false, filter : ".sys_forward-event"});
    $(".sys_forwardLkMonth.November").carouFredSel({width: "186px",height: "192px",circular: false,infinite: false,items: {minimum: 1,width: 186,height: 192},align: "left",scroll: "linear",auto: false,prev: ".sys_back.November ",next: ".sys_forth.November",anchorBuilder   : false, filter : ".sys_forward-event"});
    $(".sys_forwardLkMonth.December").carouFredSel({width: "186px",height: "192px",circular: false,infinite: false,items: {minimum: 1,width: 186,height: 192},align: "left",scroll: "linear",auto: false,prev: ".sys_back.December ",next: ".sys_forth.December",anchorBuilder   : false, filter : ".sys_forward-event"});
    
    
    // This links the tab links to the container elements for that particular month
    $("li a.caroufredsel").each(function(n) {
        $(this).attr("href", "#item"+n);
    });
    
    $(".sys_forwardLkMonth").each(function(n) {
        $(this).attr("id", "item"+n);
    });
    
    // Tabbed months.
    
    $("div.sys_forwardLkMonth").hide()
    $('div.sys_forwardLkMonth:first').show().addClass('sys_active');
    $('div.sys_forwardLkMonth:first').parent().parent().show();
    $('#dateList li:first-child a').addClass('sys_selected');
    
        // This adds and removes classes where needed
    $('#dateList li a').click(function(){
        $('#dateList li a').removeClass('sys_selected');
        $(this).addClass('sys_selected');
        var currentTab = $(this).attr('href');
        $('div.sys_forwardLkMonth').hide().removeClass('active');
        $('div.sys_forwardLkMonth').parent().parent().hide();
        $(currentTab).show().addClass('sys_active');
        $(currentTab).parent().parent().show();
        return false;
    });