{"id":29340,"date":"2013-06-26T11:33:09","date_gmt":"2013-06-26T15:33:09","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=29340"},"modified":"2013-06-26T11:33:09","modified_gmt":"2013-06-26T15:33:09","slug":"js-animated-how-to-work-with-fullcalendar-plugin","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-how-to-work-with-fullcalendar-plugin.html","title":{"rendered":"JS Animated. How to work with FullCalendar plugin"},"content":{"rendered":"

This tutorial is going to show you how to work with a FullCalendar plugin included to some JS Animated templates.<\/p>\r\n\r\nJS Animated. How to work with FullCalendar plugin<\/a>\r\n\r\n

FullCalendar is a jQuery<\/a> plugin that provides a full-sized, drag & drop calendar. It uses AJAX to fetch events on-the-fly for each month and is easily configured. <\/p>\r\n

Basic Usage<\/h3>\r\n

If your template comes with such a calendar, it means the plugin is already embedded with right JavaScript and CSS files, including the FullCalendar stylesheet, as well as the FullCalendar and jQuery<\/a> JS files, in the <head><\/strong> section of your page:\r\n\r\n

\r\n<link rel="stylesheet" href="css\/fullcalendar.css" \/>
\r\n<script src="js\/jquery-1.7.1.min.js"><\/script>
\r\n<script src="js\/fullcalendar.min.js"><\/script>
\r\n<\/pre>\r\n\r\n
Beside the  dependencies, your web page should also have the JavaScript code that  initializes the calendar. This code should be executed after the page  has initialized with\u00a0 the help of  jQuery’s $(document).ready<\/strong> function enclosed into a <script><\/strong> tag in the  head of your page:<\/p>\r\n\r\n
\r\n<script type='text\/javascript'>
\r\n$(document).ready(function() { 
\r\nvar date = new Date();
\r\nvar d = date.getDate();
\r\nvar m = date.getMonth();
\r\nvar y = date.getFullYear();
\r\n<\/script>\r\n<\/pre>\r\n
where:<\/p>\r\n
    \r\n  
  1. The new Date()<\/strong> method creates a new Date  with the current date and time<\/li>\r\n  
  2.  The getDate()<\/strong> method returns the day of the  month (from 1 to 31) for the specified date<\/li>\r\n  
  3.  The getMonth()<\/strong> method returns the month (from 0 to 11) for the  specified date, according to local time (January is 0, February is 1, and so  on)<\/li>\r\n  
  4.  The getFullYear()<\/strong> method returns the year (four digits) of the  specified date. (e.g.: 2013).<\/li>\r\n<\/ol>\r\n
      The other part  of the code looks like:<\/p>\r\n\r\n
    \r\n\t\t$('#calendar').fullCalendar({\r\n\t\t\teditable: true,\r\n\t\t\tweekMode: 'liquid',\r\n\t\t\turl:'#',\r\n\r\n<\/pre>\r\n
      \r\n  
    1. editable \u00a0– <\/strong>Determines whether the events on the calendar can be  modified<\/li>\r\n  
    2. weekMode<\/strong> –  Determines the number of weeks  displayed in a month view. Also determines each week’s height. Its available  options: <\/li>\r\n