Showing posts with label Full Calender. Show all posts
Showing posts with label Full Calender. Show all posts

Saturday, 20 April 2013

Jquery calender

Here is JQuery Full Calender example with events which is set by JSON :

Click Here to see

You can change Event name by changing events attribute title

You can also set start and end date see example

$(document).ready(function() {
 
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();
  
  $('#calendar').fullCalendar({
   theme: true,
   header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
   },
   editable: true,
   events: [
    {
     title: 'All Day Event',
     start: new Date(y, m, 1)
    },
    {
     title: 'Long Event',
     start: new Date(y, m, d-5),
     end: new Date(y, m, d-2)
    },
    {
     id: 999,
     title: 'Repeating Event',
     start: new Date(y, m, d-3, 16, 0),
     allDay: false
    },
    {
     id: 999,
     title: 'Repeating Event',
     start: new Date(y, m, d+4, 16, 0),
     allDay: false
    },
    {
     title: 'Meeting',
     start: new Date(y, m, d, 10, 30),
     allDay: false
    },
    {
     title: 'Lunch',
     start: new Date(y, m, d, 12, 0),
     end: new Date(y, m, d, 14, 0),
     allDay: false
    },
    {
     title: 'Birthday Party',
     start: new Date(y, m, d+1, 19, 0),
     end: new Date(y, m, d+1, 22, 30),
     allDay: false
    },
    {
     title: 'Click for Google',
     start: new Date(y, m, 28),
     end: new Date(y, m, 29),
     url: 'http://google.com/'
    }
   ]
  });
  
 });