jquery - Is there an open-source javascript calendar that supports built-in event detail popup?

In this google calendar, when you click on a date which has an event, it will popup the event details.

.html

This is what I need (though its size is much larger than I need), but after searching on google, I realize there is a big limitation with google calendar. There is no easy way to customize its style using css because embedded google calendar is provided inside an iframe. There are solutions such as RESTYLEgc , but I don't really want to go for it.

Now I am looking for an open-source javascript calendar that supports built-in event detail popup. It can be an extremely simple one, as long as it allows year/month navigation and it can highlight the date that has an event on it, and of course the built-in event pop up feature.

It will be great if it's built on jQuery since I already have the jQuery library included on the website.

I have only very few important events to set on the calendar, I expect I will be using codes like these:

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

Is there such a javascript calendar that you know of?

In this google calendar, when you click on a date which has an event, it will popup the event details.

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

It will be great if it's built on jQuery since I already have the jQuery library included on the website.

I have only very few important events to set on the calendar, I expect I will be using codes like these:

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

Is there such a javascript calendar that you know of?

Share Improve this question edited Jan 31, 2012 at 0:40 asked Jan 31, 2012 at 0:25 bobo 8,72711 gold badges59 silver badges83 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

I would look in to the fullcalendar script. From the looks of it, it can bring in google calendars, but also has an eventClick event that you can bind to and use (possibly) jQuery-UI to show a dialog of further information.

For a demo, do the following:

Visit that fullcalendar site and download the latest version (looks to be 1.5.2)
Extract the fullcalendar-1.5.2\fullcalendar-1.5.2\fullcalendar folder to your desktop.
Create a "calendardemo.html" file on your desktop and paste the following in to it:

<html>
  <head>
    <title>Calendar Demo</title>

    <script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis./ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.googleapis./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./'
            }
          ],
          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>

Now click on an event. Unpolished, yes, but shows a pretty simple way of achieving what you're going for.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - Is there an open-source javascript calendar that supports built-in event detail popup? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)