mattlewis92 / angular-bootstrap-calendar

A port of the bootstrap calendar widget to AngularJS (no jQuery required!)
https://mattlewis92.github.io/angular-bootstrap-calendar/
MIT License
798 stars 367 forks source link

How to render month days in year view? #587

Closed rafaelgribe closed 7 years ago

rafaelgribe commented 7 years ago

How can I render the month days in the year view? I tried using the mwl-calendar-month directive inside a year view custom template, but got an error Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!. Is this possible to achieve?

<script id="customYearView.html" type="text/ng-template">
    <div class="cal-year-box">
        <div ng-repeat="rowOffset in [0, 4, 8] track by rowOffset">
            <div class="row cal-before-eventlist">
                <div class="span3 col-md-6 col-xs-12 cal-cell {{ day.cssClass }}" 
                    ng-repeat="month in vm.view | calendarLimitTo:4:rowOffset track by $index" 
                    ng-init="monthIndex = vm.view.indexOf(month)" 
                    ng-click="vm.monthClicked(month, false, $event)" 
                    ng-class="{pointer: month.events.length > 0, 'cal-day-today': month.isToday}" 
                    mwl-droppable on-drop="vm.handleEventDrop(dropData.event, month.date)">

                    <div class="text-center" 
                        data-cal-date ng-click="vm.calendarCtrl.dateClicked(month.date)" 
                        ng-bind="month.date">
                    </div>              

                    <mwl-calendar-month
                        events="month.events"
                        view-date="month.date.toDate()"
                        on-event-click="vm.onEventClick"
                        on-event-times-changed="vm.onEventTimesChanged"
                        on-timespan-click="vm.onTimespanClick"
                        on-date-range-select="vm.onDateRangeSelect"
                        cell-is-open="vm.cellIsOpen"
                        cell-modifier="vm.cellModifier"
                        template-scope="vm.templateScope"
                        draggable-auto-scroll="vm.draggableAutoScroll"
                        custom-template-urls="vm.customTemplateUrls"
                        slide-box-disabled="true"
                        cell-auto-open-disabled="true">
                    </mwl-calendar-month>
                </div>
            </div>
        </div>
    </div>
</script>
mattlewis92 commented 7 years ago

I believe this is happening because the month view requires the root calendar controller, it's not really designed to be used as a standalone component. I think if you use another mwl-calendar component inside of your custom template with the view hard set to view="month" it should work.