Powered by Blogger.

Adding Custom Calendar View in vTiger Modules

I haven’t been posting lately in the blog mainly because I have been really busy. But I would like to share with you a really cool development we have built over the past few weeks for two of our customers.

Both cases are similar and involve adding a calendar view to one of the vtiger modules in order to show the existing information in a calendar format, instead of vtiger’s listview way.

Some usages for this kind of customization are:
Showing your Sales Order as a delivery calendar
Showing a Service Order, Tickets, Etc by some delivery date or similar.

Generally speaking, any field service related company can make use if this view to schedule their daily resources.
Integrating Arshaw Fullcalendar into vTiger Modules

The solution we chose was to use the jQuery plugin call arshaw full calendar and integrate it into vtiger as shown below:






In this example we are printing the sales orders delivery date in a calendar, and changing the color according to the order status. Once you click on the order, you will be redirected to vtiger detailview. In addition, the calendar allows drag and drop to change order’s delivery date.

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one above. It uses AJAX to fetch events on-the-fly for each month. It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). It is open source licensed under an MIT license.

Another similar example:


In this case we are plotting a custom module that shows busy days..
    Blogger Comment
    Facebook Comment