Calendar

Author: Webvanta

The first bit of code is used where the calendar is to be located and loads the calendar at that location in the code

The second bit of code is the javascript required to run the calendar. Fullcalendar.min.js is the javascript file needed to run the calendar and the rest of the code is to initilize the calendar code.

For a more indepth tutorial please see http://www.webvanta.com/article/54326-creating-an-event-calendar

<div id='calendar'></div>   <!-- fullcalendar JS will display the calendar in this div -->
<link rel='stylesheet' type='text/css' href='/calendar.css' media='all' />
<!-- load FullCalendar plugin (assumes  jQuery already loaded) -->
<script src="/webvanta/js/jquery/1.4/plugins/fullcalendar-1.4.5/fullcalendar.min.js"  type="text/javascript"></script> 
<!-- initialize calendar -->
<script type='text/javascript'>
  $(document).ready(function($) {
    $('#calendar').fullCalendar({
      editable: false,      
      header: {
        left: 'prev,next  today',
        center: ' title',
        right: 'month,basicWeek'
       },
      timeFormat: "",
      events: [
        <w:kb:item:each type="events">
          {
             id:  "<w:id />",
            title: $('<textarea/>').html("<w:escape_html><w:name  /></w:escape_html>").val(),
             start: "<w:get  name="event:start_date" format="%Y-%m-%d" />",
             end: "<w:get  name="event:end_date" format="%Y-%m-%d" />",
             url: "<w:path  url='/calendar/event' />",
            allDay: false
          }<w:unless_last>, </w:unless_last>
        </w:kb:item:each>
      ]
    });
  });
</script>

Calendar

Learn More

Get Started

Company Info

Follow Webvanta