<div class="w-calendar widget-calendar-1" data-module="calendar">
    <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>
<%= stylesheet_link_tag "calendar_widget1" %>
<script>
    $(document).ready(function(){
        if(document.getElementById("calendar-widget_module") == null){
            var tag = document.createElement('script');
            tag.setAttribute("id", "calendar-widget_module");
            tag.src = "<%= asset_path('calendar_widget.js') %>";
            tag.onload = function(){
                $('div.widget-calendar-1[data-module=calendar][data-subpart-id="{{subpart-id}}"]').each(function(index){
                    var calendar = $(this),
                        cmi = new CalendarModuleMonth1(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>