I am new to AngularJS and have to incorporate an Admin LTE full calendar feature in my webapp. I found an Angular directive for the Arshaw FullCalendar JQuery plugin. The link to the directive is here: http://angular-ui.github.io/ui-calendar/
Although I am able to display the calendar, I am not able to get the previous, today and next feature working for the calendar. This help to toggle between the months of the calendar. I know this feature is inside the uiConfig but I am not able to understand why this feature doesn't get rendered.
Below is my code. I have included all the files necessary for the plugin but did not show in index.html.
index.html
<div class="col-xs-12" resize>
<h1>Calendar Page</h1>
<div class="calendar" ng-model="testevents" config="uiConfig.calendar" ui-calendar="{{uiConfig.calendar}}"></div>
calendarController.js
app.controller("calendarController", ["$scope", "displayCalendar", "dialogs", "$filter", function ($scope, displayCalendar, dialogs, $filter) {
$scope.$parent.pageTitle = "Displays Reporting Period Start and End Dates";
/* config object */
$scope.uiConfig = {
calendar: {
height: 450,
editable: true,
header: {
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender
}
};
$scope.form = {};
$scope.testevents = {
events: [
{
title: 'event1',
start: '2015-12-12'
},
{
title: 'event2',
start: '2015-12-11'
}
// etc...
],
color: 'yellow', // an option!
textcolor: 'black' // an option!
};
}]);
UPDATE:
looking at the demo code on their github page
<div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
I think you would need to change yours to:
<div class="calendar" ng-model="testevents" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
here is the .html page for their demo
https://github.com/angular-ui/ui-calendar/blob/master/demo/index.html
Have you also added the ui-calendar component to the app initialisation?
'var myAppModule = angular.module('myApp', []);'
inside the [] normally you have to inject a third party component so it can be seen by the rest of your controllers.
Ok.. So after hours and hours of debugging, I figured out what the issue was.
I included fullcalendar.print.css also which was throwing off the styling for fullcalendar.css.
So an advice peeps, if the buttons are not getting rendered properly u might need to consider checking the CSS and remove fullcalendar.print.css.
Related
I had a working app, including a few ag-grids. I decided to add ui-router, with the grids in the templateUrl of a state.
The code is mcuh to large to post, but I have two problems:
document.addEventListener("DOMContentLoaded" is not called when I put it in the controller of the templateUrl
I guess that I can get round that by moving the enclosed logic into $transitions.onSuccess({ entering: 'search_result' }, function (transition), BUT, when I
const currentCandidatesGridDiv = document.querySelector('#currentCandidatesGrid');
new agGrid.Grid(currentCandidatesGridDiv, Self.currentCandidatesGrid);
I find that currentCandidatesGridDiv is null, despite having
<div ag-grid="SearchResultController.currentCandidatesGrid"></div>
in the HTML of the templateUrl.
Again, not much help to you without full code, which is very, very large.
I guess that what I am looking for is a working code sample, Plunk, etc to show how to put a simple ag-grid into a ui-router state's templateUrl.
It looks like your actual problem is that you are using a querySelector on the id
#currentCandidatesGrid
# is a selector for an element id
This would only match your element if it had that specified id, which in your example does not exist.
<div ag-grid="SearchResultController.currentCandidatesGrid"></div>
Would need to be
<div id="currentCandidatesGrid" ag-grid="SearchResultController.currentCandidatesGrid"></div>
if you want to get that element via
document.querySelector('#currentCandidatesGrid');
This answer has three parts:
Why DOMContentLoaded event listeners fail in controllers
Use custom directives to inject code that manipulates DOM
DEMO of ag-Grid with AngularJS
Why DOMContentLoaded event listeners fail in controllers
JavaScript libraries that manipulate the DOM need to coordinate with DOM manipulations done by the AngularJS framework.
AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.
document.addEventListener("DOMContentLoaded" is not called when I put it in the controller of the templateUrl
The AngularJS framework initializes itself after the DOMContentLoaded event. So naturally any DOMContentLoaded event listener added afterwards by a controller will miss that event.
One should use caution when mixing AngularJS with third-party libraries that manipulate the DOM.
Use custom directives to inject code that manipulates DOM
When one sees code such as document.querySelector("#myid'), replace that with a custom directive:
app.directive("myDirective", function() {
return {
link: postLink
};
function postLink(scope, elem, attrs) {
//DOM initialization here
//e.g. initialize(elem);
scope.$on('$destroy', function() {
//DOM teardown code here
});
}
})
Usage:
<div id="myid" my-directive></div>
AngularJS directives are markers on a DOM element that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element.
When the AngularJS framework adds templates to the DOM, it parses the markup and injects code for the AngularJS directives. When it destroys DOM, it broadcasts a $destroy event on the scope associated with the element.
For more information, see
AngularJS Developer Guide - Creating Custom Directives
DEMO of ag-Grid with AngularJS
When the ag-Grid script loads, it does not register with AngularJS 1.x. This is because AngularJS 1.x is an optional part of ag-Grid and you need to tell ag-Grid you want to use it:
agGrid.initialiseAgGridWithAngular1(angular);
angular.module("example", ["agGrid"])
For more information, see
Ag-Grid Documentation - Basic AngularJS 1.x Example
The DEMO
agGrid.initialiseAgGridWithAngular1(angular);
angular.module("example", ["agGrid"])
.controller("exampleCtrl", function($scope) {
var columnDefs = [
{headerName: "Make", field: "make"},
{headerName: "Model", field: "model"},
{headerName: "Price", field: "price"}
];
var rowData = [
{make: "Toyota", model: "Celica", price: 35000},
{make: "Ford", model: "Mondeo", price: 32000},
{make: "Porsche", model: "Boxter", price: 72000}
];
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: rowData
};
})
html, body {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
<script src="//unpkg.com/angular/angular.js"></script>
<script src='//unpkg.com/#ag-grid-community/all-modules/dist/ag-grid-community.min.js'>
</script>
<body ng-app="example" ng-controller="exampleCtrl" style="height: 100%">
<div ag-grid="gridOptions" class="ag-theme-balham" style="height: 100%;">
</div>
</body>
I'm using Angular ui calendar in my app.
Everything is working fine. The calendar is showing, but events are not appearing in the calendar.
Here is my code: -
$timeout(function() {
$scope.events = [
{
title: 'Long Event',
start: '2019-01-10'
}
];
$scope.eventSources = [$scope.events];
return $scope.uiConfig = {
calendar: {
height: 450,
editable: true,
header: {
left: 'title',
center: '',
right: 'today prev,next'
}
}
};
},5000);
Here I'm using timeout because I want some delay for calendar to be loaded.
This is my HTML code: -
<div ui-calendar="uiConfig.calendar" class="span8 calendar" ng-model="events" calendar="myCalendar" style="height:700px;"></div>
The docs suggest you should give an array named eventSources. I have given it, but nothing works.
Please suggest what I'm doing wrong.
Here is the screenshot: -
You are initializing scope variables after sometime 5 seconds, your calendar is getting the undefined variables and hence if you check your console there are errors., what you need to do is to load the calendar only when this variables comes defined.
So, you need
ng-if="uiConfig!==undefined"
if this variables defined then only your calendar will comes into picture.
Your div should look like this
<div class="span8" ng-if="uiConfig!==undefined">
<div class="calendar" ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
</div>
this will make sure to initialize when this variables has some values.
Demo
I am implementing the UI-calendar in my angular js application. I have successfully added the calendar on the page. But I want to add the event to agendaWeek calendar and save that data into DB.
My code implementation is
HTML
<div ui-calendar="uiConfig.calendar" data-ng-model="eventSources">
</div>
JS
$scope.eventSources = [];
$scope.uiConfig = {
calendar: {
defaultView: 'agendaWeek',
height: 450,
editable: true,
header: {
left: '',
center: 'title',
right: 'prev,next'
},
eventClick: $scope.alertEventOnClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize
}
};
Please anyone help me to implement the event implementation
You have all the fullcalendar very well described in the docs.
You could implement the eventClick for example like so:
This method is obviously triggered when a user clicks a day in the calendar.
There you create an event source object based on properties you get from the eventClick method.
function eventClick(calEvent, jsEvent, view) {
var tempEventSource = {events: [{
title: calEvent.title,
start: calEvent.start.format('YYYY-MM-DD'),
end: calEvent.end.format('YYYY-MM-DD'),
className: calEvent.className[0]
}]};
var newEvent = tempEventSource.events[0];
eventService.saveEvent(newEvent).then(function(event) {
tempEventSource.events[0].eventid = event.id;
uiCalendarConfig.calendars['your_calendar'].fullCalendar('addEventSource', tempEventSource);
});
}
Note you get the uiCalendarConfig from injecting it in your controller:
function CalendarController(eventService, uiCalendarConfig)
I have this small piece of code to open a toaster dialog when a button is clicked. However, when I click on the button, nothing happens. I have removed the http get part of the code for simplification of this problem.
(function () {
app.controller('NewScheduleController', ['$scope', '$http', 'toaster', function ($scope, $http, toaster) {
$scope.cancelSchedule = function () {
toaster.success({ title: "Success", body: "Cancelled successfully!" });
}
} ]);
})();
and the view
<div class="container" ng-controller="NewScheduleController">
<div class="form-horizontal">
<div class="jumbotron">
<button ng-click="cancelSchedule()">Cancel</button>
</div>
</div>
<toaster-container toaster-options="{
'closeButton': false,
'debug': false,
'position-class': 'toast-top-right',
'onclick': null,
'showDuration': '200',
'hideDuration': '1000',
'timeOut': '5000',
'extendedTimeOut': '1000',
'showEasing': 'swing',
'hideEasing': 'linear',
'showMethod': 'fadeIn',
'hideMethod': 'fadeOut'
}"></toaster-container>
Please suggest if I am doing anything wrong? Also being an angularjs newbie, I would like to know how to know what is the underlying error? I use chrome's inspect element to look at console/network tabs but there are no errors.
I think you're not including the angular-animate module in the scripts
<script src="http://code.angularjs.org/1.3.3/angular-animate.min.js"></script>
Look at this plunker example.
Currently i'm developing a webapp with AngularJS for a giant company, and i'm trying to have a simple FAQ inside a modal.
In my localhost the FAQ it's working just fine (very similar to the original FAQ in angular documentation), but when i write exactly the same code inside a modal i'm getting a console error:
TypeError: Object [object Object] has no method 'addGroup'
Important to state that inside the modal my $scope.oneAtATime = true; it's being ignored, so basically even if i force it to be true
<accordion close-others="true">
It's always false.
This addGroup method is on the AngularJS library code.
Any ideas?
The HTML:
<div class="modal__container__body">
<div id="faq_accordion" ng-controller="AccordionController">
<accordion close-others="true">
<accordion-group heading="{{faq.title}}" ng-repeat="faq in faqs">
{{faq.content}}
</accordion-group>
</accordion>
</div>
</div>
The controller
lobby.controller("AccordionController", ["$scope", function ($scope) {
$scope.oneAtATime = true;
$scope.faqs = [
{
title: "Q1?",
content: "A1"
},
{
title: "Q2?",
content: "A2"
},
{
title: "Q3?",
content: "A3"
},
{
title: "Q4?",
content: "A4"
}
];
}]);
Please notice that in the above code i'm forcing close-others to be true, directly in the html tab.
Help?
We had the same problem recently, change
<div id="faq_accordion" ng-controller="AccordionController">
to
<div id="faq_accordion" ng-controller="MyAccordionController">
That should fix it. You basically overwrote the plugin controller with your own. Don't forget to change the controller definition also, it's the part that's breaking it.