Home/ Questions/Q 7194905
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T20:28:13+00:00

In this google calendar, when you click on a date which has an event,

  • 0

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

http://examples.tripod.com/calendar.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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    1. Visit that fullcalendar site and download the latest version (looks to be 1.5.2)
    2. Extract the fullcalendar-1.5.2\fullcalendar-1.5.2\fullcalendar folder to your desktop.
    3. 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.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>

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

    • 0