I am developing in cordova angularjs.
I used this tutorial to integrate a full calendar in my project
My goal is: i want that when I click an event in my fullcalendar a popup is displayed.
my controller:
facebookExample.controller("evenementCalendarController", function($scope, $cordovaOauth, $localStorage, $location,$ionicPopup,$state,$http,$cordovaCalendar,uiCalendarConfig) {
$http.get('http://127.0.0.1:8080/elodieService/evenements/'+$localStorage.idInfoEvent+'/l', { params: {fields: "titre_annonce,date_evenement",format:"json"} }).then(function(result) {
var d= new Date(result.data.date_evenement);
$scope.alertOnEventClick = function( date,allDay,jsEvent, view) {
$scope.alertMessage = (' was clicked ');
};
$scope.uiConfig = {
calendar:{
height: 450,
editable: true,
lang: 'fr',
dayClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
events: [
{
title: title,
start: d,
allDay: true,
//rendering: 'background',
backgroundColor: '#00CED1',
}
],
color: 'red', // an option!
textColor: 'black',
calendar:{
lang: 'fr'
}
}
};
});
});
I get the following error:
!JavaScript ERROR: 'undefined' is not an object (evaluating 'array.length')
http://localhost:36994/lib/angular-ui-calendar/src/calendar.js:98
!JavaScript ERROR: 'undefined' is not an object (evaluating 'sources.length')
http://localhost:36994/lib/angular-ui-calendar/src/calendar.js:63
And my popup won't display. How can I solve this?
Try removing the comma after the last event option:
backgroundColor: '#00CED1',
This is the last property for that event object, so it should not be followed by a comma.
Related
I am using Angular JS and FullCalendar control for one of my requirement.
My code for full calendar in Angular JS is as below:-
<div ui-calendar="uiConfig.calendar" ng-model="eventSources" id="calendar"></div>
$scope.uiConfig = {
calendar: {
editable: true,
header: {
left: 'title',
center: '',
//right: 'today prev,next'
right: 'today next'
},
aspectRatio: 1.25,
selectable: true,
events: $scope.eventsselection,
dayClick: $scope.dayClick,
validRange: function (nowDate) {
return {
start: nowDate.clone().subtract(1, 'days'),
};
}
}
};
I want to add my custom business logic when user clicks on "today" button at top right. How to achieve this?
You can define a customButton with the text 'Today'
customButtons: {
myTodayButton: {
text: 'Today',
click: function() {
/* Add custom logic here */
$('#calendar').fullCalendar('today'); //will change calendar to today
}
}
},
In order to be able to see this button you must add it to the header option instead of the today option
header: {
left: 'title',
center: '',
right: 'myTodayButton next'
},
I have created highchart directive
App.directive('hcChart', function ($parse) {
'use strict';
return {
restrict: 'E',
replace: true
,
template: '<div><div class="chart"></div></div></div>',
link: function (scope, element, attrs) {
attrs.chart = new Highcharts.chart(element[0], {
xAxis: {
title: {
text: "Date"
},
type: 'datetime'
// labels: {
// step: 24
// }
// ,
// tickInterval: 2
},
yAxis: {
title: {
text: "Value"
}
},
dataLabels: {
enabled: true
}
,
title: {
text: ""
},
chart: {
opacity: 0.51,
backgroundColor: "white",
// plotBackgroundColor: 'rgba(0, 0, 0, 0.7)',
plotBackgroundColor: 'white',
// width: 1600,
height: 800,
zoomType: 'x',
resetZoomButton: {
position: {
x: -140,
y: 0
}
}
},
tooltip: {
crosshairs: {
width: 3,
color: 'black',
dashStyle: 'shortdot'
}
how to change y-axis title text inside controller.
As i want to show different unit for different selection.
inside controller i'm using $scope.myseries for data and $scope.categories for x-axis date time.
html code
<hc-chart id="container" categories="{{myCategories}}" series="{{mySeries}}">Placeholder for generic chart </hc-chart>
how to use $scope to update y-axis?
i tried using
$scope.yAxis[0].setTitle({text : "abc"})
but its throwing errror. not defined property.
any help please!
To change yAxis title inside angularjs controller, we need to set its property:
Highcharts.charts[0].yAxis[0].setTitle({
text: $scope.NAME
});
I am using angular ui calendar to render events, when the page loads application is rendering the calendar properly.
But when I refresh the screen, events block is not rendering.
I am using the following code to render the calendar in UI.
Following is my code block.
function returnCalendarConfig() {
return {
calendar: {
height: 500,
editable: false,
displayEventTime: true,
selectable: true,
timeFormat: 'hh:mm A',
stick: true,
defaultView: 'month',
columnFormat: 'dddd',
disableDragging: false,
header: { left: 'month,agendaWeek,agendaDay', center: 'title', right: 'prev,next' },
eventClick: $scope.onEventClick,
dayClick: $scope.onDayClick,
eventRender: $scope.onEventRender
}
};
}
$scope.uiConfig = returnCalendarConfig();
function getCalendarEvents() {
var user = commonService.getUser();
console.log('User Object', user);
$scope.events = [];
$timeout(function () {
applyScope();
});
commonService.hideProcessingForSiteDetails(200);
}
getCalendarEvents()
getCalendarEvents method calls at end of the controller.
<div class="calendar" data-ng-model="eventSources" calendar="myCalendar" ui-calendar="uiConfig.calendar">
</div>
I'm able to change the event color like this :
/* config object */
$scope.uiConfig = {
calendar:{
height: 650,
editable: true,
header:{
left: 'title',
center: '',
right: 'today prev,next'
},
eventClick: $scope.alertOnEventClick,
eventDrop: $scope.alertOnDrop,
eventResize: $scope.alertOnResize,
eventRender: $scope.eventRender,
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
dayNamesShort: ["Dim", "Lun", "Mar", "Merc", "Jeud", "Vend", "Same"],
dayClick: $scope.newrendezVous
}
};
$scope.alertOnEventClick = function( item, jsEvent, view){
$(this).css('background-color', 'grey');
}
But when I click another event, the first event stay grey and doesnt get his initial color... How could i do please thank you
Try using css class (so you can use it as a selector) with .addClass() / .removeClass() instead of manually manipulating with .css():
$scope.alertOnEventClick = function(item, jsEvent, view) {
$(".full-calendar-highlight").removeClass("full-calendar-highlight");
$(jsEvent.target).addClass("full-calendar-highlight");
};
.full-calendar-highlight {
background-color: gray;
}
document.querySelectorAll(".fc-content-skeleton .fc-event.fc-highlight").forEach((nodeElement: HTMLElement) => {
nodeElement.classList.remove("fc-highlight");
});
jsEvent.path.forEach((nodeElement: HTMLElement) => {
if (nodeElement.classList && nodeElement.classList.contains("fc-event")) {
nodeElement.classList.add("fc-highlight");
}
});
I'm trying to implement the loading callback function using the angular-ui calendar. I want my calendar to go to a specific date once it is loaded instead of going to the current date.
I can get this functionality using the dayClick method, however I have not been able to implement the loading function using angular at all. Below is the code, note that the loading callback is not console logging anything.
$scope.goToRootScopeDate = function() {
$scope.myCalendar.fullCalendar('gotoDate', $rootScope.day);
}
/* config calendar view */
$scope.uiConfig = {
calendar: {
defaultView: "agendaDay",
// editable: true,
header: {
left: 'agendaWeek',
center: 'title',
right: 'today prev,next',
},
dayClick: $scope.goToRootScopeDate,
loading: function(bool) {
if (bool) {
console.log('Done loading')
} else {
console.log("still loading")
}
}
},
};
If you want to manage the Loading callback method from the ng-controller...
Loading callback receives two parameters, not a boolean.
/* config calendar view */
$scope.uiConfig = {
calendar: {
defaultView: "agendaDay",
// editable: true,
header: {
left: 'agendaWeek',
center: 'title',
right: 'today prev,next',
},
dayClick: $scope.goToRootScopeDate,
loading: $scope.loading
},
};
And then you manage it in the controller with those 2 parameters
$scope.loading = function(isLoading, view){
alert("is loading" + isLoading);
}
You can reproduce it at this plunker where I added some annoying alerts to manage the loading callback.
But, if you only want to load a specific date at the first screen...
Just set the defaultdate in the config:
/* config calendar view */
$scope.uiConfig = {
calendar: {
defaultView: "agendaDay",
// editable: true,
header: {
left: 'agendaWeek',
center: 'title',
right: 'today prev,next',
},
dayClick: $scope.goToRootScopeDate,
defaultDate:$scope.myDesiredDate
},
};