是否有支持内置事件详细信息弹出窗口的开源javascript日历？
在这个谷歌日历中，当你点击一个有事件的日期时，它会弹出事件的详细信息 这就是我需要的（虽然它的大小比我需要的要大得多），但在谷歌上搜索之后，我意识到谷歌日历有很大的局限性。使用css定制其样式并不容易，因为iframe中提供了嵌入式google日历。有这样的解决方案，但我真的不想这么做 现在我正在寻找一个开源javascript日历，它支持内置的事件细节弹出窗口。它可以是非常简单的，只要它允许年/月导航，并且可以突出显示有事件的日期，当然还有内置的事件弹出功能 如果它是基于jQuery构建的，那就太好了，因为我已经在网站上包含了jQuery库 我的日历上只有很少的重要事件可以设置，我希望我会使用如下代码：是否有支持内置事件详细信息弹出窗口的开源javascript日历？,javascript,jquery,events,calendar,Javascript,Jquery,Events,Calendar,在这个谷歌日历中，当你点击一个有事件的日期时，它会弹出事件的详细信息 这就是我需要的（虽然它的大小比我需要的要大得多），但在谷歌上搜索之后，我意识到谷歌日历有很大的局限性。使用css定制其样式并不容易，因为iframe中提供了嵌入式google日历。有这样的解决方案，但我真的不想这么做 现在我正在寻找一个开源javascript日历，它支持内置的事件细节弹出窗口。它可以是非常简单的，只要它允许年/月导航，并且可以突出显示有事件的日期，当然还有内置的事件弹出功能 如果它是基于jQuery构建的，
var event1Html='<div class="event-details">Some event details here</div>';
calendar.setEvent('2012-1-25',event1Html);
var event2Html='<div class="event-details">Some other event details here</div>';
calendar.setEvent('2012-1-31',event2Html);
var event1Html='此处有一些事件详细信息'；
calendar.setEvent（'2012-1-25'，event1Html）；
var event2Html='此处的一些其他事件详细信息'；
calendar.setEvent（'2012-1-31'，event2Html）；
eventClickfullcalendar-1.5.2\fullcalendar-1.5.2\fullcalendar
日历演示
身体{
边缘顶端：40px；
文本对齐：居中；
字体大小：14px；
字体系列：“Lucida Grande”，Helvetica，Arial，Verdana，无衬线；
}
#历法{
宽度：640px；
保证金：0自动；
}
活动详情
$（函数（）{
变量日期=新日期（）；
var d=date.getDate（）；
var m=date.getMonth（）；
var y=date.getFullYear（）；
var$dialog=$（“#日历详细信息”）。dialog({
自动打开：错误，
模型：对，
身高：300，
宽度：350
});
$（“#日历”）.fullCalendar({
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},
是的，
活动：[
{
标题：“全天活动”，
开始：新日期（y、m、1）
},
{
标题：“长期活动”，
开始日期：新日期（y、m、d-5），
结束：新日期（y、m、d-2）
},
{
身份证号码：999，
标题：“重复事件”，
开始日期：新日期（y、m、d-3、16、0），
全天：错
},
{
身份证号码：999，
标题：“重复事件”，
开始日期：新日期（y、m、d+4、16、0），
全天：错
},
{
标题:"会议",，
开始日期：新日期（y、m、d、10、30），
全天：错
},
{
标题:"午餐",，
开始日期：新日期（y、m、d、12、0），
结束：新日期（y、m、d、14、0），
全天：错
},
{
标题:"生日派对",，
开始：新日期（y、m、d+1、19、0），
结束：新日期（y、m、d+1、22、30），
全天：错
},
{
标题：“点击谷歌”，
开始日期：新日期（y、m、28），
结束：新日期（y、m、29），
网址：'http://google.com/'
}
],
eventClick:函数（事件、jsEvent、视图）{
console.log（事件）；
$dialog.dialog（{title:event.title}）；
$（'p'，$dialog）.empty（）.append(
$（''）.text（event.allDay？'All day event'：'Scheduled:'+event.start+'-'+event.end）
);
$dialog.dialog（'open'）；
}
});
});
<html>
<head>
<title>Calendar Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='fullcalendar/fullcalendar.min.js'></script>
<style type="text/css">
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 640px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="calendar"></div>
<div class="ui-helper-hidden" id="calendar-details" title="Event Details">
<p>Event details</p>
</div>
<script type="text/javascript">
$(function(){
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var $dialog = $('#calendar-details').dialog({
autoOpen: false,
model: true,
height: 300,
width: 350
});
$('#calendar').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/'
}
],
eventClick: function(event,jsEvent,view){
console.log(event);
$dialog.dialog({title:event.title});
$('p',$dialog).empty().append(
$('<p />').text(event.allDay ? 'All day event' : 'Scheduled: ' + event.start + '-' + event.end)
);
$dialog.dialog('open');
}
});
});
</script>
</body>
</html>