asia-moma/modules/calendar/index3.html.erb

<script type="text/javascript" src="<%= asset_path('calendar_widget2.js') %>" id="calendar-index_module2"></script>
{{style_tag}}
<div class="w-calendar widget-calendar-2 index3" data-module="calendar" data-page-id="{{page_id}}">
    <div class="w-calendar-title {{widget_title_class}}">
        <span>{{calendar_title}}</span>
        <span>{{widget_title}}</span>
    </div>
    <div class='month_template'>
            <h4 class="widget-title ">
                <span class="text"><span style="display: none;">placeholder</span></span>
                <i class="fa fa-circle-o-notch fa-spin fa-fw loading hide"></i> 
            </h4>
        <div class="w-calendar-nav">
            <a href="#" class="w-calendar-nav-prev">
                <i class="fa fa-chevron-left"></i>
                <span class="w-calendar-nav-prev-text hide">Prev</span>
            </a>
            <a href="#" class="w-calendar-nav-next">
                <i class="fa fa-chevron-right"></i>
                <span class="w-calendar-nav-next-text hide">Next</span>
            </a>
        </div>
        <table class="table table-condensed w-calendar-table">
            <thead>
                <tr data-list="week_title" data-level="0">
                    <th>{{week_title}}</th>
                </tr>
            </thead>
            <tbody>
                {{default_column}}
            </tbody>
        </table>
    </div>
    <div class="calendar-events" style="display: none;">
        <div class="event">
            <div class="event-header">
                <div class="date">
                    <div class="day"></div>
                    <div class="month"></div>
                </div>
                <div class="event-title">
                    <div class="event-inner-title"></div>
                    <div class="duration"></div>
                </div>
            </div>
            <div class="event-wraper">
                <div class="event-containers">
                    
                </div>
            </div>
        </div>
    </div> 
</div>
<script>
    $(document).ready(function(){
        $("div.index3[data-module=calendar]").each(function(index){
            var calendar = $(this),
                cmi = new CalendarModuleMonth2(new Date(), calendar,calendar.data("page-id"),"",true);
            cmi.currentMonth();
            calendar.find("div.w-calendar-nav a").on("click",function(){
                var el = $(this);
                if(el.hasClass("w-calendar-nav-prev")){
                    cmi.prevMonth();
                }else if(el.hasClass("w-calendar-nav-next")){
                    cmi.nextMonth();
                }
                return false;
            })
        })
    })
</script>