Docs

Version 3.0

Build 4.1

• Following options are no longer supported
• showOptions
• disableRightClick
• newEventInPopUp
• wsGroupUnselectable
• sampleMode
• renderMode
• maxEventsToShow
• dataTemplate
• Namespace Web2CalConstants is changed to Web2Cal
• ical.CloseAddEvent is changed to Web2Cal.closeAddEvent() a static function
• showNewEvent form is now simplified and re-written

Version 2.0

When you create an event in calendar, you can make it repeat over a period of time like once a week or every other Tuesday. Repeating events saves you the time and effort it would take to create multiple separate events and let’s you easily change all events in the series at once.

Web2Cal supports recurring scheduling patterns such as daily, weekly, monthly, yearly or set a range of recurrence from a date to date.

An event indicates the repeating pattern by specifying the "repeatObject" attribute. The attributes of the event object and repeatObject are described below with samples. 

var event = {
          repeatEvent: {
                  mode: "day|week|month|year" // represents the repeat mode. 
                  endDate:  Date or "MM/DD/YYYY", 
                  repeatCount: number
                  day: {onlyWeekDays: true|false} // further info for repeat type "day"
                  week: {days: ["0,1,2,3,4,5,6"]} // further info for repeat type "week"
                  month: {
                       weekNumber: "1|2|3|4|-1" // -1 represents last week of month
                     , weekDay: "0|1|2|3|4|5|6" // -1 represents last day of month
                     , repeatDate: Date or "YYYY-MM-DD HH:MM:SS" 
                  } // further info for repeat type "month"
                  year: {date: Date or "YYYY-MM-DD HH:MM:SS" } 
          }
          eventType: "null|EXCLUDE" 
          relEventId: number 
          sequence: number 
          deleted: true|false
}

Examples

Repeats every day

var event = {
          startTime: "2013-06-24 11:00:00", endTime:"2013-06-24 13:00:00", eventId: "100"
          name: "repeats every day",
          repeatEvent: {
             mode:"day" 
             day:{}
          }
}

Repeats every 2nd Friday

var event = {
          startTime: "2013-06-24 11:00:00", endTime:"2013-06-24 13:00:00", eventId: "100"
          name: "repeats every 2nd Friday",
          repeatEvent: {
             mode:"month" 
             month:{weekNumber: 2, weekDay: 5}
          }
}

Repeats every month on 20th

var event = {
          startTime: "2013-06-24 11:00:00", endTime:"2013-06-24 13:00:00", eventId: "100"
          name: "repeats every month on 20th",
          repeatEvent: {
             mode:"month" 
             month:{repeatDate: "2013-06-20 "}
          }
}

Repeats every week on Mondays, Tuesdays

var event = {
          startTime: "2013-06-24 11:00:00", endTime:"2013-06-24 13:00:00", eventId: "100"
          name: "repeats every week on Mondays, Tuesdays",
          repeatEvent: {
             mode:"week" 
             week:{days:"1,2"}
          }
}

Repeats every other Monday

var event = {
          startTime: "2013-06-24 11:00:00", endTime:"2013-06-24 13:00:00", eventId: "100"
          name: "repeats every other Monday",
          repeatEvent: {
             mode:"week" 
             week:{days:"1"}
          }
          repeatCount: 2
}

Web2Cal is a functional advanced calendar engine that works seamlessly on Desktops, Mobile and Tablets. It works with JSON data and can integrate with any server-side technology (ASP, ASP.NET, PHP, JSP, ColdFusion, Ruby on Rails etc.) and database you use. Web2Cal provides all the features of a complex calendering engine with few lines of code. It is customizable and is available as packaged software to use with your applications.

Advantages of using Web2Cal

• Elegant design that will impress your audience - With beautiful and well thought out design, the look and feel can be further customized with the availble ".less" files 
• Interactive, intuitive and delightful experience - Highly interactive with drag and drop interface and nested groups to render different levels of information. 
• Gets you started in 15 minutes - Easy to install and integrate. Comprehensive list of examples and an experienced support team make integration a breeze.
• Customizable options - A vast number of options make customization simple and makes it suit your application needs. 
• Extensions - Additional views and functionality can be implemented by creating an extension. Also browse our extension directory to see what is already available in the package. 

To embed the calendar in your web page, follow the 3 steps below.

1

Include the required libraries as shown below. 

2

Create a div element which will contain the calendar 

3

Create the calendar with necessary options 

<script> 
jQuery(document).ready(function(){ 
iCal = new Web2Cal( "calendarContainer",
       { 
            loadEvents: function(startDate, endDate, viewName){ 
                            /* Get events from any source. This can be a PHP/Java/.NET/Facebook or any other source. Once you have the data, invoke ical.render(data).*/
                           ical.render( eventSource.getEvents() ); 
                        } 
           ,onNewEvent: function(event, groups, allDay){ } 
           ,onUpdateEvent: function(event){ }
       });
       iCal.build(); 
}); 
</script>