How to use a jQuery calendar inside a jQuery tab?
Basically I have three jQuery-ui tabs. I want my calendar to be shown in the third one. I don't care if it will be pre-loaded or if it will load when I click on the link for the third tab. (OK, I confess, I have absolutely no idea which one is the case :-P). Let's assume though, that I want it to fire when I click on the third tab.
Here is my code:
<head>
...
<link rel="stylesheet" href="common/css/fullcalendar.css"
type="text/cs开发者_开发问答s" 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>
For the latest script I have also tried:
<script>
$(document).ready(function(){
var date = new Date();
...
});
</script>
as long as other flavors and ways.
So, basically, in the html body, my calendar should be located around here:
<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>
But it's not! ... Do you see any clues, where it might hiding? :-D
By the way i thought it would be helpful to have the project live somewhere (used Dropbox public folder...), so you could view the page I am talking about. It won't stay there forever, though.
Anyway, I apologize for the lengthy questions. Thanks in advance for your help!there is a good reason the previous code is not working, your selectors are not correct, consider this one for example:
$ ('a#plan').live('click', function(){
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
there is no such Anchor with the id="plan" in your HTML, you need to add this ID and your selector will start to work. I've modified the code inline and got the full calendar to work, but with some UI issues.
the way it goes with me is to make the Anchor code look like this:
<a href="#plan" id="plan">Travel Plan</a>
and the code just worked.
just let me know if this fixed your issue regardless of the UI ones, thanks.
Update: After you modified the code, the solution has to be changed too, here is my thoughts and solution for your issue:
The code was hooking the event using the .live() method, but since we don't need to, handling the .click() event directly did the trick and the calendar is now working fine
Here is the full code after these modifications.
$(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
});
});
});
let me know if it worked for you, and don't forget to mark as answer.
加载中,请稍侯......
精彩评论