是否有支持内置事件详细信息弹出窗口的开源javascript日历？

Question

是否有支持内置事件详细信息弹出窗口的开源javascript日历？

bob*_*obo 3 javascript jquery events calendar

在这个谷歌日历中,当您点击具有事件的日期时,它将弹出事件详细信息.

http://examples.tripod.com/calendar.html

这就是我所需要的(虽然它的大小比我需要的大得多),但在google上搜索之后,我发现谷歌日历存在很大的局限性.没有简单的方法可以使用css自定义其样式,因为嵌入式Google日历是在iframe中提供的.有一些解决方案,如RESTYLEgc,但我真的不想这样做.

现在我正在寻找支持内置事件详细信息弹出窗口的开源javascript日历.它可以是一个非常简单的,只要它允许年/月导航,它可以突出显示事件的日期,当然还有内置的事件弹出功能.

如果它建立在jQuery上会很棒,因为我已经在网站上包含了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);

Run Code Online (Sandbox Code Playgroud)

你知道这样的javascript日历吗？

Answer 1

Bra*_*tie 6

我会查看fullcalendar脚本.从它的外观来看,它可以引入谷歌日历,但也有一个eventClick事件,你可以绑定并使用(可能)jQuery-UI显示更多信息的对话框.

要进行演示,请执行以下操作:

访问该fullcalendar网站并下载最新版本(看起来是1.5.2)
将fullcalendar-1.5.2\fullcalendar-1.5.2\fullcalendar文件夹解压缩到桌面.
在桌面上创建"calendardemo.html"文件并将以下内容粘贴到其中:

<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>

Run Code Online (Sandbox Code Playgroud)

现在点击一个事件.未经批准,是的,但展示了一种非常简单的方法来实现您的目标.

归档时间：	13 年，10 月前
查看次数：	5185 次
最近记录：	13 年，10 月前