Documentation Overview

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.

Include the required libraries as shown below. 

<link rel="stylesheet" href="/Web2Cal/css/Web2Cal.css"/>
<script src=""></script>
<script src="/Web2Cal/Web2Cal-3.0.min.js" type="text/javascript"></script>
<script src="/Web2Cal/" type="text/javascript"></script>
<script src="/Web2Cal/Web2Cal.templates.js" type="text/javascript"></script>

Create a div element which will contain the calendar 

<div id="calendarContainer"></div>

Create the calendar with necessary options 

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){ } });; }); </script>


  • No posts to display.