I'm using Angular-UI Calendar directive and Bootstrap 3 popover to attempt to create a popover on click. I tried using the day click event:
$scope.dayClick = function(event, allDay, jsEvent, view){
jsEvent.stopPropagation();
jsEvent.preventDefault();
var eventID = event.getDate();
eventID = jsEvent.target;
$(eventID).popover({
html: true,
title: 'Hello',
placement: 'bottom',
content: '<button id="close-me">Close Me!</button>'
}).parent().delegate('button#close-me', 'click', function() {
jsEvent.stopPropagation();
$(eventID).popover('hide');
return false;
});
$(eventID).popover('show');
};
The problem with this way is that it causes the calendar cells to push to the right at times or duplicate. Is there a better way I could attach the popover to the existing calendar?
Are you trying to create pop-over when any day is clicked?
If yes, then dayClick is the correct way for a popover.
Can you create a Plunk to provide more details.
I think the problem may be due to CSS.
Related
I have a calendar element on my ionic app. When user swipe left or right on it, it goes to a different month. One problem/challenge is that when I swipe to the right the side bar is showing.
I did use drag-content="false" and that disabled the swipe menu function everywhere but I want it only on that calendar element.
I found this Stackoverflow post with a answer but I did not understand how it worked because I can't find any difference between the content elements. In that post they also included a codepen link to an answer CODEPEN
UPDATE:
Here a link to the calendar plugin
Maybe you could bind drag-content directive to a scope variable (boolean) and then change its value when mouse is over the calendar component:
<ion-side-menu-content drag-content="drag">
So register the listeners for mouseover/mouseleave events on calendar:
<flex-calendar on-touch="mouseoverCalendar()" on-release="mouseleaveCalendar()" drag-content="toggledrag" options="options" events="events"></flex-calendar>
and insert in your controller:
$scope.drag = true;
$scope.mouseoverCalendar = function() {
$scope.drag = false;
};
$scope.mouseleaveCalendar = function() {
$scope.drag = true;
};
Here is an example using Flex Calendar: http://codepen.io/beaver71/pen/bEmaJZ
Put this into the controller of your calendar-view and it will the menu as you enter the calendar and re-enable it as you leave the view:
$scope.$on('$ionicView.enter', function(){
$ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.leave', function(){
$ionicSideMenuDelegate.canDragContent(true);
});
Answer from this post
What I'm trying to do. Tap a day in the calendar and have show the details of that day's events in the area below it.
How I'm doing it. With Angular and the ui-calendar directive. In FullCalendar's dayClick event, I'm creating a new set of events that are happening on that day. In the template, I'm doing a typical ng-repeat="event in daysEvents" div. This works perfectly fine when I'm testing it in ionic serve.
The problem. The dayClick event doesn't work in the iOS emulator, when I send the app to my device (with ionic run ios) or Chrome Developer Tools "Toggle device mode".
The code. Here's my controller:
angular.module('starter.controllers', ['ui.calendar'])
.controller('CalendarCtrl', function($scope) {
$scope.eventSources = [
{
title: "Spring Awards Night",
start: moment("2015-5-19 18:30"),
description: "The Spring Awards are awesome and you should come."
}
]
$scope.uiConfig = {
calendar:{
height: 'auto',
editable: false,
header:{
left: 'prev',
center: 'title',
right: 'next'
},
dayClick: function(date, jsEvent, view) {
$scope.daysEvents = $scope.eventSources.filter(function(event){
return event.start.isBetween(date, moment(date).add(1, 'days'));
});
$(".fc-day").removeClass("fc-selected");
$(this).addClass("fc-selected");
}
}
};
And part of my template:
<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>
If you need anything else, let me know. Thanks in advance.
1st solution:
This happens only when using UI-Calendar (FullCalendar) with Ionic, because Ionic catches all tap events. That's why it works fine for you in a desktop browser, but not in a mobile browser.
To solve this issue, add data-tap-disabled="true" to UI-Calendar directive, like this:
<div data-tap-disabled="true" ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>
UPD - 2nd solution:
By disabling the Ionic tap listeners, you'll face the default browser's 300ms delays after each tap is made, which leads to an extremely poor user experience.
So, another solution for your question would be to select dates programmatically.
function onViewRender( view, element ){
// 1. Add tap listeners for each day (in my case - the date number element)
var matches = document.querySelectorAll(".fc-day-number");
_.forEach(matches, function(element){
$ionicGesture.on('tap', function (event) {
// 2. On tap - parse data-date attribute from the element
var selectedDateStr = $(event.target).attr('data-date');
// 3. And select an according day with uiCalendarConfig select method
uiCalendarConfig.calendars.mobileCal.fullCalendar('select', moment(selectedDateStr), moment(selectedDateStr).add(24,'h'));
}, angular.element(element));
});
}
In FullCalendar, if you drag on the day then the dayclick event is fired.
Other devices fire the dragstart and dragend events when you tap on the day, but iOS devices don't.
I had no choice but to modify fullcalendar.js. You can see my modified version here:
angularui-calendar-fullcalendar-dayclick-not-work-expectedly-on-ios
[SOLVED] I figured this out. The issue is related to modal sizing, if you resize the window the grid will be displayed. Adding auto-resizing directive solved the problem. See more details at http://ui-grid.info/docs/#/tutorial/213_auto_resizing
I have the impression that there is some sort of conflict between the grid's style and bootstrap style (CSS and DIVs structure)...
[ORIGINAL POTS]
Help wanted!
I am not able to display an ui-grid in a modal window generated by ui-bootstrap. The modal window comes up but the grid is not rendered. I am able to render other grids outside a modal window.
Basically speaking, it is hosted in Plunker. This is what I have:
index.html
<div ng-controller="TradeListController">
<button type="button" ng-click="openBoardgamegeekSearchWindow()">Search Board Game in Modal Window</button>
</div>
components/MtApp.js
var mtApp = angular.module('mtApp', ['ui.bootstrap', 'ui.grid']);
var TradeListController = function($scope, $modal) {
//=== Modal Window : Boardgamegeek Search ===//
$scope.openBoardgamegeekSearchWindow = function() {
console.log("Opening boardgamegeek search in modal window.");
var modalWindow = $modal
.open({
templateUrl: 'components/boardgamegeek/boardgamegeek-search.html',
controller: 'BoardgamegeekSearchController',
});
modalWindow.result.then(function(modalReturn) {
console.log("Boardgamegeek search window returned: ", modalReturn);
}, function() {
console.log('Boardgamegeek search window returned dismissed.');
});
};
};
angular.module('mtApp').controller('TradeListController', TradeListController);
var BoardgamegeekSearchController = function($scope, $modalInstance) {
//=== Properties ===//
$scope.boardGames = [{
tradeListId: 666666666,
boardgamegeekId: 42533,
name: "QWERTY",
thumbnailURL: "http://cf.geekdo-images.com/images/pic485388_mt.jpg"
}];
//=== Grid to render board games ===//
$scope.gridOptions = {
data: $scope.boardGames,
columnDefs: [{
field: 'name',
name: 'Name'
}]
};
};
angular.module('mtApp').controller('BoardgamegeekSearchController', BoardgamegeekSearchController);
components/boardgamegeek/boardgamegeek-search.html
<div ui-grid="gridOptions"></div>
gridOptions = {{gridOptions}}
I figured this out. The issue is related to modal sizing, if you resize the window the grid will be displayed.
Adding auto-resizing directive solved the problem.
See more details at http://ui-grid.info/docs/#/tutorial/213_auto_resizing
I have the impression that there is some sort of conflict between the grid's style and bootstrap style (CSS and DIVs structure)...
This link can be useful , it covers a basic guide to migrate from ng-grid to ui-grid https://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/
I'm trying to show angular-strap popover when hovering on fullcalendar items.
I am using eventMouseover/eventMouseout callbacks to show/hide the popover:
$scope.calendarConfig = {
defaultView: 'basicWeek',
eventMouseover: function(event, jsEvent, view) {
element = $(jsEvent.target).closest('.fc-event');
popover = $popover(element, {placement: 'bottom', contentTemplate: 'calendar-item-popover.html'});
popover.$promise.then(popover.show);
},
eventMouseout: function() {
popover.hide();
popover = null;
}
};
Then I have a popover body template:
<script type="text/ng-template" id="calendar-item-popover.html">
<p>Event</p>
<p>event: {{event | json}}</p>
</script>
My question is how can I pass the 'event' to popover scope?
Here is the plunker: http://plnkr.co/9c6BDWsYuuWAfI4HnJAH
I have a working solution; popover's scope can be accessed with popover.$scope:
popover.$scope.event = event
Working plunker:
http://plnkr.co/W8n6LxsLCyZFO6ufPHvW
Not sure if that's an optimal solution, so I will wait some time for feedback.
I am trying to display a tooltip on angular UI calendarEvent's mouse-hover. I managed to do this as explained in the following thread,
Tooltip for fullcalendar in year view
$scope.eventMouseover = function (calEvent, jsEvent) {
var tooltip = '<div class="tooltipevent">' + calEvent.description + '</div>';
$("body").append(tooltip);
$(this).mouseover(function (e) {
$(this).css('z-index', 10000);
$('.tooltipevent').fadeIn('500');
$('.tooltipevent').fadeTo('10', 1.9);
}).mousemove(function (e) {
$('.tooltipevent').css('top', e.pageY + 10);
$('.tooltipevent').css('left', e.pageX + 20);
});
}
$scope.eventMouseout = function (calEvent, jsEvent) {
$(this).css('z-index', 8);
$('.tooltipevent').remove();
},
Obviously, this is not the best way to do this. With the latest UI-Bootstrap, we have a much nicer looking tooltips. Did anyone successfully integrated these tooltips with the Angular-UI Calendar?
Update 1 : As explained in http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/ , I tried overriding the eventRender and simply added the tool tip attribute to the calendarEvent divs. Still not working. I can see that even the mouseover and mouseout events are not added to the those calendarEvent divs that contain 'tooltip' attribute.
if you add this function to the calendar config it will work.
$scope.eventRender = function( event, element, view ) {
$timeout(function(){
$(element).attr('tooltip', event.title);
$compile(element)($scope);
});
};
Anything can be placed in the tooltip attribute. even {{bindings}}
The $timeout is there because $scope.$apply must be called. By using $timeout with no delay it is ensured that a digest will be called without ever throwing a "digest in progress" error.