asiaH3/modules/calendar/index2.html.erb

<script type="text/javascript" src="<%= asset_path('calendar_widget.js') %>" id="calendar-index_module"></script>
{{style_tag}}
<div class="w-calendar widget-calendar-1 index2" data-module="calendar" data-page-id="{{page_id}}">
    <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="close_box">X</div>
        <div class="event-header"></div>
        <div class="event-containers">
            
        </div>
    </div> 
</div>
<script>
    $(document).ready(function(){
        $("div.index2[data-module=calendar]").each(function(index){
            var calendar = $(this),
                cmi = new CalendarModuleMonth1(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>