| Issue 1360: | Events invisible with -webkit-overflow-scrolling on touch-enabled devices | |
| 1 person starred this issue and may be notified of changes. | Back to list |
If the calendar is contained with an element that uses "-webkit-overflow-scrolling: touch" appointments on the agenda views are not visible using Mobile Safari. Removing "overflow:hidden" from the slotContent div appears to correct the issue.
May 28, 2012
I am getting the same problem on Android Device. Have you found a work around?
May 28, 2012
$("#mws-calendar").fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
viewDisplay: function (view) {
var h;
if (view.name == "month") {
h = NaN;
}
else {
h = 3500; // high enough to avoid scrollbars
}
$("#mws-calendar").fullCalendar('option', 'contentHeight', h);
The problem I got was with scrollbars hiding the additional content. With a simple if statement to check what view we are on. and Bam it works now on my android droid x
Aug 15, 2013
(No comment was entered for this change.)
Summary:
Events invisible with -webkit-overflow-scrolling on touch-enabled devices
(was: Appointments invisible with -webkit-overflow-scrolling: touch)
Status: Reproducing Labels: -Type-Defect Type-Bug
Feb 27, 2015
Add to event or other content items style: -webkit-transform: translate3d(0,0,0); and this is solution.
Aug 21, 2015
Discussion for this issue has moved to the following URL: https://github.com/fullcalendar/fullcalendar/issues/1627 This is because Google Code is shutting down. Apologies if you are being pestered with these notifications. This is a one-time event. Happy coding, Adam
Status:
ExportedToGithub
|
|
| ► Sign in to add a comment |
Attachments appear to be disabled; test case is pasted below: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="fullcalendar/fullcalendar.css"> <script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery/jquery-ui-1.8.17.custom.min.js"></script> <script type="text/javascript" src="fullcalendar/fullcalendar.js"></script> <script type="text/javascript" src="js/daybilling/gui/schedule.js"></script> <script type="text/javascript"> (function($) { $(function() { $('#calendar').fullCalendar({ defaultView: 'agendaWeek', events: [{ id: 'event1', title: 'Event 1', allDay: false, start: (new Date()), end: (new Date(Date.now() + 3600000)) }] }); }); })(jQuery); </script> <style> .tab-content { position: fixed; overflow-y: auto; -webkit-overflow-scrolling: touch; top: 0; left: 0; bottom: 0; right: 0; } </style> </head> <body> <div class="tab-content"> <div id="calendar"></div> </div> </body> </html>