search

fullcalendar / fullcalendar

Full-sized drag & drop event calendar in JavaScript
https://fullcalendar.io
MIT License
18.57k stars 3.61k forks source link

Must click a button (like "Today") for the calendar to appear #1722

Closed arshaw closed 9 years ago

arshaw commented 9 years ago

Originally reported on Google Code with ID 1455

This one is hard to provide an example for because it's not live and there's a lot of
other jQuery components on the page.

The problem is that the calendar is in a tab pane, not by itself on the page.  I have
copied your code exactly, no alterations (yet).  If I click on the Calendar tab, the
top row of buttons appears but not the calendar itself. If I click on any of those
buttons the calendar appears.

What do I do?

Here's the complete source code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html;  charset=utf-8">
<meta name="description" content="Online plant science education community" />
<meta name="ROBOTS" content="INDEX,FOLLOW">
<meta name="resource-type" content="document">
<meta http-equiv="expires" content="0">
<meta name="author" content="PlantingScience">
<meta name="copyright" content="Copyright (c) 2004 by PlantingScience">
<meta name="revisit-after" content="1 days">
<meta name="distribution" content="Global">
<meta name="generator" content="PostNuke - http://postnuke.com">
<meta name="rating" content="General">
<meta name="keywords" content="STEM,education,mentorship,plant science,inquiry learning,science
practice,mentoring,botany,students,mentors,science project,experimental design,research,research
experience,K-12,science communication, experiential learning,botanical,plants,teachers,professional
development" />
<title>1st Period Science</title>
<link rel="icon" href="themes/PS2006fRevised/images/icon.png" type="image/png">
<link rel="shortcut icon" href="themes/PS2006fRevised/images/favicon.ico">
<link href="themes/PS2006fRevised/style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascript/showimages.js"></script>
<script type="text/javascript" src="javascript/openwindow.js"></script>

<link rel="stylesheet" href="style/core.css" type="text/css" />
<link rel="stylesheet" href="modules/PSTeams/style/style.css" type="text/css" />
<link rel="stylesheet" href="javascript/jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css"
/>
<link rel="stylesheet" href="javascript/jquery-plugins/fullcalendar/fullcalendar.css"
type="text/css" />
<link rel="stylesheet" href="javascript/jquery-plugins/fullcalendar/fullcalendar.print.css"
type="text/css" />
<link rel="stylesheet" href="modules/EZComments/templates/Dizkus/style.css" type="text/css"
/>
<script type="text/javascript">/* <![CDATA[ */ 
document.location.entrypoint="index.php";document.location.pnbaseURL="http://localhost/ps2/";
document.location.ajaxtimeout=5000;
if (typeof(Zikula) == 'undefined') {var Zikula = {};}
Zikula.Config = {"entrypoint":"index.php","baseURL":"http:\/\/localhost\/ps2\/","baseURI":"\/ps2\/","ajaxtimeout":"5000","lang":"en","sessionName":"_zsid0"}
 /* ]]> */</script>
<script type="text/javascript" src="javascript/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery/noconflict.js"></script>
<script type="text/javascript" src="javascript/Highcharts/js/highcharts.js"></script>
<script type="text/javascript" src="javascript/Highcharts/js/modules/exporting.js"></script>
<script type="text/javascript" src="javascript/jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="javascript/jqwidgets/jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="javascript/jquery-plugins/fullcalendar/fullcalendar.min.js"></script>
<!--[if IE]><link rel="stylesheet" type="text/css" href="style/core_iehacks.css" media="print,projection,screen"
/><![endif]-->
</head>

<body style="background-color:;">
<div id="shell" align="center">

    <div id="logo" align="left"><a href="index.php"><img src="themes/PS2006fRevised/images/ps-logo.gif"></a></div>

    <div id="nav" align="right">
        <div class="spacer"><img src="themes/PS2006fRevised/images/pxl.gif" width="190"
height="30" alt="" /></div>

    </div>

    <div id="main" align="left">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td valign="top">
                <div id="z-maincontent" class="z-module-psteams">

<script type='text/javascript'>//<![CDATA[ 
jQuery(function() {
    var chart;
    jQuery(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar',
                animation: false
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Class Progress'
            },
            xAxis: {

                categories: ['Basic Biology','AP Biology'],
                label: {
                    formatter: function() {
                        return '' + this.series.name + Highcharts.dateFormat(' %b %e
%l:%M %p', this.y);
                    }
                }

            },
            yAxis: {
                type: 'datetime',
                title: {
                    text: 'Days at each stage'
                },
                min: Date.UTC(2012, 8, 24)
            },
            legend: {
                backgroundColor: '#FFFFFF',
                reversed: true,
                enabled: true
            },
            tooltip: {
                formatter: function() {
                    console.log(this, this.point.stackY);
                    if (this.y != Date.UTC(2012, 10, 5)) {
                        return '' + this.series.name + Highcharts.dateFormat(' %b %e
%l:%M %p', this.point.stackY);
                    } else {
                        return '' + this.series.name + Highcharts.dateFormat(' %b %e',
this.y);
                    }
                }
            },
            plotOptions: {
                series: {
                    stacking: 'normal',
                    events: {
                        legendItemClick: function(event) {
                            var visibility = this.visible ? 'visible' : 'hidden';

                            return false;

                        }
                    }
                }
            },
            series: [{
                name: 'Idle',
                data: [Date.UTC(2012, 10, 16) - Date.UTC(2012, 9, 15)],
                color: '#ffffff',
                showInLegend: false,
                },
            {
                name: 'Collecting Data',
                data: [Date.UTC(2012, 9, 15) - Date.UTC(2012, 9, 12)]
                },
            {
                name: 'Designing Experiment',
                data: [Date.UTC(2012, 9, 12) - Date.UTC(2012, 9, 9)]
                },
            {
                name: 'Developing Question',
                data: [Date.UTC(2012, 9, 9) - Date.UTC(2012, 9, 5)]
                },
            {
                name: 'Background Researching',
                data: [Date.UTC(2012, 9, 5) - Date.UTC(2012, 9, 2)]
                },
            {
                name: 'Introductions',
                data: [Date.UTC(2012, 9, 2) - Date.UTC(2012, 9, 1)]
                },
            {
                name: 'Idle',
                data: [Date.UTC(2012, 9, 1)],
                color: '#ffffff'}
                ]
        });
    });

});
</script>
<script type="text/javascript">
        jQuery(document).ready(function () {
            var theme = '';
            // Create jqxTabs.
            jQuery('#classInfo').jqxTabs({ width: "100%", autoHeight: true, position:
'top', theme: theme });
            jQuery('#settings div').css('margin-top', '10px');
        });
    </script>
<script type="text/javascript">
jQuery(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    jQuery('#classcalendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        events: [
            {
                title: 'All Day Event',
                start: new Date(y, m, 1)
            },
            {
                title: 'Long Event',
                start: new Date(y, m, d-5),
                end: new Date(y, m, d-2)
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d-3, 16, 0),
                allDay: false
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: new Date(y, m, d+4, 16, 0),
                allDay: false
            },
            {
                title: 'Meeting',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            },
            {
                title: 'Lunch',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            },
            {
                title: 'Birthday Party',
                start: new Date(y, m, d+1, 19, 0),
                end: new Date(y, m, d+1, 22, 30),
                allDay: false
            },
            {
                title: 'Click for Google',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: 'http://google.com/'
            }
        ]
    });

});
</script>

<table style="width:100%;">
<tr>
<td>
<div class="psteams-class psteams-display">

<div class="z-frontendcontainer">
    <h2><img src="/ps2/images/icons/extrasmall/servicemanager.png" id="itemactionstrigger"
alt="Actions" style="display: none" class="z-pointer" title="Actions" width="16" height="16"
 />1st Period Science - Carpinteria High School</h2>

</div>
    </div>
<div id='jqxWidget' style="margin-right:25px;">
        <div id='classInfo'>
            <ul>
                <li style="margin-left: 30px;">About This Class</li>
                <li>Student Background</li>
                <li>Teacher Expectations</li>
                <li>Class Calendar</li>
            </ul>
            <div>
<div class="z-floatleft" style="margin:15px;">
<h4>Class Time</h4>
 8:30 AM to  9:30 AM
</div>
            </div>
            <div>
            <div class="z-floatleft" style="margin:15px;">
<h4>Student Background</h4>
They are all geniuses<br /><br />
</div>
            <div class="z-floatleft" style="margin:15px;">
<h4>Populations</h4>

<ul class="relatedItemList Population">
    <li>
Honors Students
    </li>
    <li>
ESL
    </li>
</ul>
</div>
<div class="z-floatleft" style="margin:15px;">
<h4>Grade Levels</h4>
            <ul class="relatedItemList Gradelevel">
    <li>
10th Grade
    </li>
    <li>
9th Grade
    </li>
</ul>
</div>
            </div>
            <div>
<div class="z-floatleft" style="margin:15px;">
<h4>Learning Goals</h4>
To learn Science
</div>
<div class="z-floatleft" style="margin:15px;">
<h4>Notes for Mentors</h4>
Challenge them!
</div>
            </div>
            <div style="height:300px;">
            <div id='classcalendar' style="height:200px;"></div>
            </div>       
        </div>
    </div>
<div id="container" style="width:100%; height: 200px; margin-left: 10px;margin-right:
10px;"></div>

    <div id="ezcomments" class="ezcomments ezcomments_PSTeams">

    <h3 id="comments_PSTeams_1">Comments</h3>

        <a href="#commentform_PSTeams_1">Add a new comment</a>

        <div id="comment1" class="ezc_comment z-clearfix ezc_bg1" >
        <div class="ezc_author">
            <div class="ezc_avatar">
                                <strong>admin</strong>
                                <br />

            </div>
            <ul class="ezc_options">
                <li><strong>Posted on </strong></li>
                <li>May 31, 2012 - 01:24 PM</li>

                                <li>
                                                                                <a
href="http://localhost/ps2/index.php?module=comments&amp;type=user&amp;func=modify&amp;id=1&amp;redirect=aW5kZXgucGhwP21vZHVsZT1wc3RlYW1zJnR5cGU9dXNlciZmdW5jPWRpc3BsYXkmb3Q9Y2xhc3MmaWQ9MSZzbHVnPTFzdC1wZXJpb2Qtc2NpZW5jZQ=="><img
src="/ps2/images/icons/extrasmall/xedit.png" title="Modify comment" alt="Modify comment"
width="16" height="16" /></a>
                                    </li>
                            </ul>
        </div>

        <div class="ezc_body">
            <div class="ezc_info">
                <strong class="ezc_title">test</strong>
            </div>
            <div class="ezc_content">
                    &lt;p&gt;this is a test
&lt;/p&gt;

            </div>
        </div>
    </div>

        <div class="z-center"></div>

        <form class="z-form z-linear" id="commentform_PSTeams_1" action="index.php?module=comments&amp;type=user&amp;func=create"
method="post">
        <div>
            <input type="hidden" name="csrftoken" id="authid" value="NGZlZTQ5ODViZGI0YTUuNTQxNzI1Mzg6MDBiYTUyMjIyZmM4ODkzYThjNGFlMmZiZWExM2RmMjI6MTM0MTAxNjQ1Mw=="
/>
            <input type="hidden" name="redirect" id="EZComments_redirect" value="aW5kZXgucGhwP21vZHVsZT1wc3RlYW1zJnR5cGU9dXNlciZmdW5jPWRpc3BsYXkmb3Q9Y2xhc3MmaWQ9MSZzbHVnPTFzdC1wZXJpb2Qtc2NpZW5jZQ=="
/>
            <input type="hidden" name="mod" id="EZComments_modname" value="PSTeams"
/>
            <input type="hidden" name="owneruid" id="EZComments_owneruid" value="0"
/>
            <input type="hidden" name="useurl" id="EZComments_useurl" value="" />
            <input type="hidden" name="objectid" id="EZComments_objectid" value="1"
/>
            <input type="hidden" name="areaid" id="EZComments_areaid" value="275" />
            <fieldset>
                <legend>Add a new comment</legend>
                <div class="z-formrow">
                    <label for="subject">Subject</label>
                    <input type="text" name="subject" id="subject" size="50" maxlength="255"
/>
                </div>
                                <div class="z-formrow">
                    <label for="message">Comment</label>
                    <textarea name="comment" id="message" cols="60" rows="10"></textarea>
                </div>
                <div class="z-buttons z-formbuttons">
                    <input class="z-bt-icon ezc-bt-clone" type="submit" value="Submit"
/>
                </div>
            </fieldset>

        </div>
    </form>
    </div>

                            <div class="z-panel-content"><div id="ezcomments" class="ezcomments
ezcomments_PSTeams">

    <h3 id="comments_PSTeams_1">Comments</h3>

        <a href="#commentform_PSTeams_1">Add a new comment</a>

        <div id="comment1" class="ezc_comment z-clearfix ezc_bg2" >
        <div class="ezc_author">
            <div class="ezc_avatar">
                                <strong>admin</strong>
                                <br />

            </div>
            <ul class="ezc_options">
                <li><strong>Posted on </strong></li>
                <li>May 31, 2012 - 01:24 PM</li>

                                <li>
                                                                                <a
href="http://localhost/ps2/index.php?module=comments&amp;type=user&amp;func=modify&amp;id=1&amp;redirect=aW5kZXgucGhwP21vZHVsZT1wc3RlYW1zJnR5cGU9dXNlciZmdW5jPWRpc3BsYXkmb3Q9Y2xhc3MmaWQ9MSZzbHVnPTFzdC1wZXJpb2Qtc2NpZW5jZQ=="><img
src="/ps2/images/icons/extrasmall/xedit.png" title="Modify comment" alt="Modify comment"
width="16" height="16" /></a>
                                    </li>
                            </ul>
        </div>

        <div class="ezc_body">
            <div class="ezc_info">
                <strong class="ezc_title">test</strong>
            </div>
            <div class="ezc_content">
                    &lt;p&gt;this is a test
&lt;/p&gt;

            </div>
        </div>
    </div>

        <div class="z-center"></div>

        <form class="z-form z-linear" id="commentform_PSTeams_1" action="index.php?module=comments&amp;type=user&amp;func=create"
method="post">
        <div>
            <input type="hidden" name="csrftoken" id="authid" value="NGZlZTQ5ODVjMmMyMTkuODE4MjkwODk6YjdhMzRhMThkMWJkMDE5NTRhNGE5NDNmOTlkNDNhMWU6MTM0MTAxNjQ1Mw=="
/>
            <input type="hidden" name="redirect" id="EZComments_redirect" value="aW5kZXgucGhwP21vZHVsZT1wc3RlYW1zJnR5cGU9dXNlciZmdW5jPWRpc3BsYXkmb3Q9Y2xhc3MmaWQ9MSZzbHVnPTFzdC1wZXJpb2Qtc2NpZW5jZQ=="
/>
            <input type="hidden" name="mod" id="EZComments_modname" value="PSTeams"
/>
            <input type="hidden" name="owneruid" id="EZComments_owneruid" value="0"
/>
            <input type="hidden" name="useurl" id="EZComments_useurl" value="" />
            <input type="hidden" name="objectid" id="EZComments_objectid" value="1"
/>
            <input type="hidden" name="areaid" id="EZComments_areaid" value="275" />
            <fieldset>
                <legend>Add a new comment</legend>
                <div class="z-formrow">
                    <label for="subject">Subject</label>
                    <input type="text" name="subject" id="subject" size="50" maxlength="255"
/>
                </div>
                                <div class="z-formrow">
                    <label for="message">Comment</label>
                    <textarea name="comment" id="message" cols="60" rows="10"></textarea>
                </div>
                <div class="z-buttons z-formbuttons">
                    <input class="z-bt-icon ezc-bt-clone" type="submit" value="Submit"
/>
                </div>
            </fieldset>

        </div>
    </form>
    </div></div>

    </div>
            <p id="itemactions">
                    <a href="index.php?module=psteams&amp;type=user&amp;func=edit&amp;ot=class&amp;id=1"
title="Edit" class="z-icon-es-edit">Edit</a>
                    <a href="index.php?module=psteams&amp;type=user&amp;func=edit&amp;ot=class&amp;astemplate=1"
title="Reuse for new item" class="z-icon-es-saveas">Reuse</a>
                    <a href="index.php?module=psteams&amp;type=user&amp;func=delete&amp;ot=class&amp;id=1"
title="Delete" class="z-icon-es-delete">Delete</a>
                    <a href="index.php?module=psteams&amp;type=user&amp;func=view&amp;ot=class"
title="Back to overview" class="z-icon-es-back">Back to overview</a>
                </p>
        <script type="text/javascript">
        /* <![CDATA[ */
            document.observe('dom:loaded', function() {
                teamsInitItemActions('class', 'display', 'itemactions');
            });
        /* ]]> */
        </script>
        <br style="clear: right" />

</div>
</div>

    <script type="text/javascript">
    /* <![CDATA[ */
        document.observe('dom:loaded', function() {

                teamsInitToggle('class', 'consentsreceived', '1');
            var panel = new Zikula.UI.Panels('PSTeams_panel', {
                headerSelector: 'h3',
                headerClassName: 'z-panel-header z-panel-indicator',
                contentClassName: 'z-panel-content',
                active: 'z-panel-header-fields'
            });
        });
    /* ]]> */
    </script>
</td>
<td style="width:200px;">
<div style="margin-bottom:20px;">
<a href="index.php?module=psteams&amp;type=user&amp;func=view&amp;ot=class&amp;Sessionid=1">Other
Class Pages for this Session</a>
</div>
<div style="margin-bottom:20px;">
<a href="index.php?module=people&amp;type=user&amp;func=display&amp;ot=person&amp;id=1"><img
src="userdata/People/persons/photo/image001_6.jpg" style="width:200px;"></a><br />
<a href="index.php?module=people&amp;type=user&amp;func=display&amp;ot=person&amp;id=1">Joe Teacher</a><br
/>
I have been a teacher for 75 years.
</div>
<strong>Class Resources</strong>

<ul class="relatedItemList Classresource">
    <li>
<a href="index.php?module=psteams&amp;type=user&amp;func=display&amp;ot=classresource&amp;id=1&amp;slug=preview">
Preview
</a>
<a id="classresourceItem1Display" href="index.php?module=psteams&amp;type=user&amp;func=display&amp;ot=classresource&amp;id=1&amp;slug=preview&amp;theme=Printer"
title="Open quick view window" style="display: none">
    <img src="/ps2/images/icons/extrasmall/windowlist.png" alt="Quick view" title="Quick
view" width="16" height="16"  />
</a>
<script type="text/javascript">
/* <![CDATA[ */
    document.observe('dom:loaded', function() {
        teamsInitInlineWindow($('classresourceItem1Display'), 'Preview');
    });
/* ]]> */
</script>
    </li>
    <li>
<a href="index.php?module=psteams&amp;type=user&amp;func=display&amp;ot=classresource&amp;id=2&amp;slug=test-resource">
Test resource
</a>
<a id="classresourceItem2Display" href="index.php?module=psteams&amp;type=user&amp;func=display&amp;ot=classresource&amp;id=2&amp;slug=test-resource&amp;theme=Printer"
title="Open quick view window" style="display: none">
    <img src="/ps2/images/icons/extrasmall/windowlist.png" alt="Quick view" title="Quick
view" width="16" height="16"  />
</a>
<script type="text/javascript">
/* <![CDATA[ */
    document.observe('dom:loaded', function() {
        teamsInitInlineWindow($('classresourceItem2Display'), 'Test resource');
    });
/* ]]> */
</script>
    </li>
</ul>

                <p class="manageLink">

            <a href="index.php?module=psteams&amp;type=user&amp;func=edit&amp;ot=classresource&amp;classes=1&amp;returnTo=userDisplayClass"
title="Create Class Resource" class="z-icon-es-add">
                Create Class Resource
            </a>
        </p>
        <strong>Class Mentors</strong>
<div style="margin-bottom:20px;">
<div>
<img src="userdata/People/persons/photo/image001_6.jpg" style="width:50px;float:left">
<div style="float:left">
Joe B Teacher<br/>
    team 1
            <br/>CHS_J12_001
        <br/>The Wonder of Seeds
    </div>
</div>

</div>
</td>
</tr></table></div>
            </td>
        </tr>
    </table>
    </div>
<div class="pn-navtabs" style="text-align:center;" >

</div>
    <div id="footer" align="left">
       <img src="themes/PS2006fRevised/images/footer_bar.gif" height="16" alt="" />
    </div>
<img src="themes/PS2006fRevised/images/webPS.jpg" alt="PlantingScience Sponsors"/>

</div>
</body>
</html>

Reported by rbrandt@botany.org on 2012-06-30 00:38:46

arshaw commented 9 years ago

Reported by adamrshaw on 2013-08-18 19:32:50

arshaw commented 9 years ago 
This message is being bulk-sent to a number of issues, both [very] old and new.

I have been working on taming this issue tracker, which has gotten out of control after
months of neglect. You are receiving this message because I could not successfully
reproduce the bug you were reporting with a reasonable amount of effort. I have written
some new bug-report guidelines to be used by all bug reports going forward:

    http://arshaw.com/fullcalendar/wiki/Report-a-Bug/

Its salient point is that all bug reports should have an isolated demonstration, viewable
online with a tool like JSFiddle.

If the bug you originally reported is still important to you, could you please first
try the latest version of FullCalendar and see if it is fixed? If not, could you please
file a NEW bug report that follows the new guidelines? This issue will not be monitored
for further comments.

I'm sorry I have taken so long to respond to many of your request, and I'm sorry if
this new procedure causes extra work for you. Going forward, the issue tracker will
be much more of a well-oiled machine.

Again, if you must, PLEASE SUBMIT A *NEW* BUG REPORT (following the new guidelines)
INSTEAD OF COMMENTING ON THIS ONE. Further comments on this report will be ignored.
Thanks.

Reported by adamrshaw on 2013-08-26 03:01:40