Javascript 如何在jQuery选项卡中使用jQuery日历？_Javascript_Jquery_Jquery Ui_Calendar_Fullcalendar

Javascript 如何在jQuery选项卡中使用jQuery日历？

javascript jquery jquery-ui calendar fullcalendar

Javascript 如何在jQuery选项卡中使用jQuery日历？,javascript,jquery,jquery-ui,calendar,fullcalendar,Javascript,Jquery,Jquery Ui,Calendar,Fullcalendar,今天我想让Adam Arshaw的完整日历在我的页面中运行。我已经阅读了他的网页中提供的内容，以及我在Stack overflow中发现的任何可能有用的问题，但迄今为止我尝试的任何方法都注定要失败基本上我有三个jQueryUI选项卡。我希望我的日历显示在第三个日历中。我不在乎它是预加载的，还是在我点击第三个标签的链接时加载的。（好的，我承认，我完全不知道哪一个是这样的：-P）。让我们假设，当我点击第三个标签时，我想让它启动这是我的密码： <head> ...

今天我想让Adam Arshaw的完整日历在我的页面中运行。我已经阅读了他的网页中提供的内容，以及我在Stack overflow中发现的任何可能有用的问题，但迄今为止我尝试的任何方法都注定要失败

基本上我有三个jQueryUI选项卡。我希望我的日历显示在第三个日历中。我不在乎它是预加载的，还是在我点击第三个标签的链接时加载的。（好的，我承认，我完全不知道哪一个是这样的：-P）。让我们假设，当我点击第三个标签时，我想让它启动

这是我的密码：

<head>
    ...        
    <link rel="stylesheet" href="common/css/fullcalendar.css" 
        type="text/css" media="screen, projection" />

    <!-- This is a custom theme downloaded from jQuery UI -->
    <link rel="stylesheet" href="common/css/jquery-ui-user_area.css" 
        type="text/css" media="screen, projection" />

    ....
    <!-- Is the following OK? -->
    <script type="text/javascript" 
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
    </script>
    <script type="text/javascript" 
        src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js">
    </script>

    <script type="text/javascript" src="common/js/fullcalendar.js"></script>
    <script type="text/javascript" src="common/js/gcal.js"></script>

    <!-- The fullCalendar initiallizing code follows: -->
    <script> 
        $(function() {
            $ ('a#plan_tab').live('click', function(){
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();

                $('#plan_calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    editable: true,
                    theme: true
                });            
            });
        });
    </script>
</head>


...        
....
$（函数（）{
$（'a#plan_tab'）。live（'click'，function（））{
变量日期=新日期（）；
var d=date.getDate（）；
var m=date.getMonth（）；
var y=date.getFullYear（）；
$（'计划日历'）。完整日历({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
是的，
主题：真实
});            
});
});

对于最新的脚本，我也尝试过：

<script> 
    $(document).ready(function(){      
        var date = new Date();
        ...     
    });
</script>


$（文档）.ready（函数（）{
变量日期=新日期（）；
...     
});

只要其他口味和方式

因此，基本上，在html正文中，我的日历应该位于以下位置：

<body>
    ...
    <section id="main_content">
        <div  class="user_area">
            <div id="area_tabs">
                <ul>
                    <li><a href="#overview">Overview</a></li>
                    <li><a href="#activity">Activity</a></li>
                    <li><a href="#plan" id="plan_tab">Travel Plan</a></li>
                </ul>
                <div id="overview">Some blahs</div>
                <div id="activity">Some other blahs</div>
                <div id="plan">
                    <!-- Here it should be me calendar! Arrrh -->
                    <div id="plan_calendar></div>
                </div>
            </div>
        </div>
     </section>
     ...
</body>


...





一些废话
其他一些废话
<> P>有一个很好的原因，以前的代码不工作，你的选择器是不正确的，考虑这一个例子：
$ ('a#plan').live('click', function(){
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();

HTML中没有id为“plan”的锚，您需要添加此id，选择器将开始工作。
我对代码进行了内联修改，并使整个日历正常工作，但存在一些UI问题
我使用的方法是使锚定代码如下所示：
<a href="#plan" id="plan">Travel Plan</a>

让我知道它是否对你有效，别忘了标记为答案。Hm，你选对了选择器，它错了，现在你睁开了我的眼睛！我已经把它改成了。随后，我将脚本更正为$（'a#plan_tab'）.live（'click'，function（）{..}。它还不起作用…顺便说一下，我已经上传了最新的（已更正但不起作用）版本。你能检查一下我可能错过的任何内容吗？谢谢，我会这样做，然后再联系你，我已经测试了你的代码，.live（）代码不起作用，所以我做了一个简单的更改，现在日历在更改后运行良好。请在几分钟后检查我的更新答案。您好。显然，摆脱。live也不起作用。我不知道是怎么回事。在您更正后，我再次上传了最新版本。但是…它仍然可以为您工作吗没有变化吗？我在最新的Chrome和最新的FF上试用过，运气不好
 $(function() {
    $ ('a#plan_tab').click(function(){
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();
                $('#plan_calendar').fullCalendar({
                header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
                },
                editable: true,
                theme: true
        });
    });
});