CODEWITHSUNDEEP
javascriptjqueryangularjsfullcalendar
Well Wisher
Well Wisher

Reputation: 1875

Installation error in angular ui calendar

i have just downloaded the files from angular ui calendar 

https://github.com/angular-ui/ui-calendar

then I click demo/index.html and it shows error that some packages does not exist. it using bower,

please do let me know how can i mwk it working in my local syatem, or please let me know the steps to work the UI calendar using bower

So far i did the following

1- Manually downloaded the calendar UI calendar and its jquery version.

2- Created a local directory and copied the index.html from angualar UI

3- included the following styles in the header
-- bootstrap.css
-- fullcalendar.css

4- Added the following script
-- jquery.js
-- jquery-ui.js
-- angular.js
-- ui-bootstrap-tpls-0.9.0.js
-- fullcalendar.js
-- gcal.js
-- calendar.js

update

I have installed manually without using bower

so please let me know how to access the calendar object

I found the Documentation like this, but i consoled the $scope object and some function code displaying there.

<div ui-calendar="calendarOptions" ng-model="eventSources" calendar="myCalendar">

$scope.myCalendar.fullCalendar

but i couldnt able to figure it out

thanks

Upvotes: 1

Views: 1091

Answers (1)

nilsK
nilsK

Reputation: 4351

you will need a config object in your scope for your calendar. the following example is from the github source you posted

controller:

    $scope.uiConfig = {
      calendar:{
        height: 450,
        editable: true,
        header:{
          left: 'month basicWeek basicDay agendaWeek agendaDay',
          center: 'title',
          right: 'today prev,next'
        },
        dayClick: $scope.alertEventOnClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize
      }
    };

template:

<div ui-calendar="uiConfig.calendar" ng-model="eventSources">

follow this link to a very good documentation. the page describes plenty of options and has some examples on how to use the calendar.

Upvotes: 2

Related Questions