My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions
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
Status:  ExportedToGithub
Owner:  ----
Closed:  Aug 2015


Sign in to add a comment
 
Reported by ja...@emdata.net, Mar 29, 2012
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.
Mar 29, 2012
#1 ja...@emdata.net
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>
May 28, 2012
#2 m...@ferrellinternetmedia.com
I am getting the same problem on Android Device. Have you found a work around?
May 28, 2012
#3 m...@ferrellinternetmedia.com
	$("#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
Project Member #4 adamrs...@gmail.com
(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
#5 chea...@gmail.com
Add to event or other content items style: -webkit-transform: translate3d(0,0,0); and this is solution.
Aug 21, 2015
Project Member #6 adamrs...@gmail.com
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

Powered by Google Project Hosting