Failed to instantiate module mwl.calendar.docs

[ClovertechAU]

I have seen that this issue has been resolved by people changing their linking order, though my order looks fine and still having this issue.

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr] Failed to instantiate module mwl.calendar.docs due to: Error: [$injector:nomod] Module 'mwl.calendar.docs' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

<script src="~/lib/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.js"></script>
<script>
    var myApp = angular.module('myApp', ['mwl.calendar.docs', 'mwl.calendar', 'ngAnimate', 'ui.bootstrap']);
    myApp.controller('calandardisp', function (moment, alert) {

    var vm = this;
    vm.calendarView = 'month';
    vm.viewDate = new Date();
    vm.events = [
        {
            title: 'An event',
            type: 'warning',
            startsAt: moment().startOf('week').subtract(2, 'days').add(8, 'hours').toDate(),
            endsAt: moment().startOf('week').add(1, 'week').add(9, 'hours').toDate(),
            draggable: true,
            resizable: true
        }, {
            title: '<i class="glyphicon glyphicon-asterisk"></i> <span class="text-primary">Another event</span>, with a <i>html</i> title',
            type: 'info',
            startsAt: moment().subtract(1, 'day').toDate(),
            endsAt: moment().add(5, 'days').toDate(),
            draggable: true,
            resizable: true
        }, {
            title: 'This is a really long event title that occurs on every year',
            type: 'important',
            startsAt: moment().startOf('day').add(7, 'hours').toDate(),
            endsAt: moment().startOf('day').add(19, 'hours').toDate(),
            recursOn: 'year',
            draggable: true,
            resizable: true
        }
    ];
    vm.isCellOpen = true;
    vm.eventClicked = function (event) {
        alert.show('Clicked', event);
    };

    vm.eventEdited = function (event) {
        alert.show('Edited', event);
    };

    vm.eventDeleted = function (event) {
        alert.show('Deleted', event);
    };

    vm.eventTimesChanged = function (event) {
        alert.show('Dropped or resized', event);
    };

    vm.toggle = function ($event, field, event) {
        $event.preventDefault();
        $event.stopPropagation();
        event[field] = !event[field];
    };
});
</script>`

Markup:

'

{{ vm.calendarTitle }}

        <div class="row">

            <div class="col-md-6 text-center">
                <div class="btn-group">

                    <button class="btn btn-primary"
                            mwl-date-modifier
                            date="vm.viewDate"
                            decrement="vm.calendarView">
                        Previous
                    </button>
                    <button class="btn btn-default"
                            mwl-date-modifier
                            date="vm.viewDate"
                            set-to-today>
                        Today
                    </button>
                    <button class="btn btn-primary"
                            mwl-date-modifier
                            date="vm.viewDate"
                            increment="vm.calendarView">
                        Next
                    </button>
                </div>
            </div>

            <br class="visible-xs visible-sm">

            <div class="col-md-6 text-center">
                <div class="btn-group">
                    <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'year'">Year</label>
                    <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'month'">Month</label>
                    <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'week'">Week</label>
                    <label class="btn btn-primary" ng-model="vm.calendarView" uib-btn-radio="'day'">Day</label>
                </div>
            </div>

        </div>

        <br>

        <mwl-calendar events="vm.events"
                      view="vm.calendarView"
                      view-title="vm.calendarTitle"
                      view-date="vm.viewDate"
                      on-event-click="vm.eventClicked(calendarEvent)"
                      on-event-times-changed="vm.eventTimesChanged(calendarEvent); calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
                      edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
                      delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
                      on-edit-event-click="vm.eventEdited(calendarEvent)"
                      on-delete-event-click="vm.eventDeleted(calendarEvent)"
                      cell-is-open="vm.isCellOpen"
                      day-view-start="06:00"
                      day-view-end="22:00"
                      day-view-split="30"
                      cell-modifier="vm.modifyCell(calendarCell)">
        </mwl-calendar>

        <br><br><br>

        <h3 id="event-editor">
            Edit events
            <button class="btn btn-primary pull-right"
                    ng-click="vm.events.push({title: 'New event', type: 'important', draggable: true, resizable: true})">
                Add new
            </button>
            <div class="clearfix"></div>
        </h3>

        <table class="table table-bordered">

            <thead>
                <tr>
                    <th>Title</th>
                    <th>Type</th>
                    <th>Starts at</th>
                    <th>Ends at</th>
                    <th>Remove</th>
                </tr>
            </thead>

            <tbody>
                <tr ng-repeat="event in vm.events track by $index">
                    <td>
                        <input type="text"
                               class="form-control"
                               ng-model="event.title">
                    </td>
                    <td>
                        <select ng-model="event.type" class="form-control">
                            <option value="important">Important</option>
                            <option value="warning">Warning</option>
                            <option value="info">Info</option>
                            <option value="inverse">Inverse</option>
                            <option value="success">Success</option>
                            <option value="special">Special</option>
                        </select>
                    </td>
                    <td>
                        <p class="input-group" style="max-width: 250px">
                            <input type="text"
                                   class="form-control"
                                   readonly
                                   uib-datepicker-popup="dd MMMM yyyy"
                                   ng-model="event.startsAt"
                                   is-open="event.startOpen"
                                   close-text="Close">
                            <span class="input-group-btn">
                                <button type="button"
                                        class="btn btn-default"
                                        ng-click="vm.toggle($event, 'startOpen', event)">
                                    <i class="glyphicon glyphicon-calendar"></i>
                                </button>
                            </span>
                        </p>
                        <uib-timepicker ng-model="event.startsAt"
                                        hour-step="1"
                                        minute-step="15"
                                        show-meridian="true">
                        </uib-timepicker>
                    </td>
                    <td>
                        <p class="input-group" style="max-width: 250px">
                            <input type="text"
                                   class="form-control"
                                   readonly
                                   uib-datepicker-popup="dd MMMM yyyy"
                                   ng-model="event.endsAt"
                                   is-open="event.endOpen"
                                   close-text="Close">
                            <span class="input-group-btn">
                                <button type="button"
                                        class="btn btn-default"
                                        ng-click="vm.toggle($event, 'endOpen', event)">
                                    <i class="glyphicon glyphicon-calendar"></i>
                                </button>
                            </span>
                        </p>
                        <uib-timepicker ng-model="event.endsAt"
                                        hour-step="1"
                                        minute-step="15"
                                        show-meridian="true">
                        </uib-timepicker>
                    </td>
                    <td>
                        <button class="btn btn-danger"
                                ng-click="vm.events.splice($index, 1)">
                            Delete
                        </button>
                    </td>
                </tr>
            </tbody>

        </table>
    </div>`

[mattlewis92]

mwl.calendar.docs is only used for the demo app, just remove it from your module dependencies and it should work fine.