event_news/modules/event_news_mod/_event_news_widget18.html.erb

<div class="w-calendar widget-calendar-2 widget-event-news-calendar-2" data-module="event_news">
    <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>
                    <th>Sun</th>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                    <th>Sat</th>
                </tr>
            </thead>
            <tbody></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 "event_news_calendar_widget2" %>
<script>
    $(document).ready(function(){
        if(document.getElementById("event-news-calendar-widget_module2") == null){
            var tag = document.createElement('script');
            tag.setAttribute("id", "event-news-calendar-widget_module2");
            tag.src = "<%= asset_path('event_news_calendar_widget2.js') %>";
            tag.onload = function(){
                $("div.widget-calendar-2[data-module=event_news]").each(function(index){
                    var calendar = $(this),
                        cmi = new EventCalendarModuleMonth2(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>