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/'
    }
   ]
  });
  
 });

No comments :

Post a Comment