asiaH8/modules/calendar/_calendar_widget2.html.erb

<div class="w-calendar widget-calendar-2" data-module="calendar">
    <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>
<%= stylesheet_link_tag "calendar_widget2" %>
<script>
    $(document).ready(function(){
        if(document.getElementById("calendar-widget_module2") == null){
            var tag = document.createElement('script');
            tag.setAttribute("id", "calendar-widget_module2");
            tag.src = "<%= asset_path('calendar_widget2.js') %>";
            tag.onload = function(){
                $('div.widget-calendar-2[data-module="calendar"][data-subpart-id="{{subpart-id}}"]').each(function(index){
                    var calendar = $(this),
                        cmi = new CalendarModuleMonth2(new Date(), calendar,calendar.data("subpart-id"),"{{more_url}}",false);
                    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;
                    })
                })
            }
            var head = document.getElementsByTagName("head");
            head[0].appendChild(tag);
        }
    });
</script>