The code below seems to work well except for one thing. When #calenderTrigger is clicked, the calendar loads but I need to click either 'prev', 'next', or 'today' for the calendar to fully render.
- Is this normal?
- How can I get the calendar to fully render (show all days of the month) instead of needing to click either 'prev', 'next', or 'today'?
<div id="calendarView">
<p><a href="#" id="closeCal">Close</a></p><div id="stCal"></div>
</div>
$(document).ready(function() { $("#calenderTrigger").click(showCalendar); });
function showCalendar() {
$(this).hide();
var calCtrl = $("#calendarView");
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var cal = $("#stCal");
if (calCtrl.length > 0 && cal.length > 0) {
cal.html('');
var cv=cal.fullCalendar({
header: { left: 'prev, today', center: 'title', right: 'today, next' },
viewDisplay: function(view) {},
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 },
{ 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 }
],
changeView: 'month'
});
cal = null;
calCtrl.css("display", "inline-block");calCtrl.css("width", "75%");
calCtrl = null;
$("#closeCal").css("display", "block");
$("#closeCal").click(function() {
var calCtrl = $("#calendarView");
if (calCtrl.length > 0) { calCtrl.css("display", "none"); }
calCtrl = null;
$("#calenderTrigger").show(); return false;
});
}
return false;
}
Labels: Type-Question