Full Calendar JavaScript API by Java Developers

Loading...

Java developers can use Full Calendar jQuery for creating a powerful and full sized Calendar that includes certain functionalities of Google Calendar. AJAX can be used in combination of jQuery for fetching out all monthly events and it is possible to configure this calendar quickly within few minutes like Google Calendar.

Java developers in India are experts and can also customize this calendar according to business needs as it is open source Java Script API. For using this wonderful application, you have to download it from the here.

Java Developer

The latest downloadable version includes Google calendar extension, basic style sheets, jQuery UI files or simple jQuery files. jQuery UI files are necessary for resizing your document.

You have to add following code for using Full Calendar functionality on your web pag:

 <link href=‘../css/theme.css’ rel=‘stylesheet’ />
 <link href=‘../css/fullcalendar.css’ rel=‘stylesheet’ />
 <link href=‘../css/fullcalendar.print.css’ rel=‘stylesheet’ media=‘print’ />
 <script src=‘../jquery/jquery-1.9.1.min.js’></script>
 <script src=’../jquery/jquery-ui-1.10.2.custom.min.js’></script>
 <script src=‘../scripts/fullcalendar.min.js’></script>

Theme.css files are mandatory if you are planning to add jQuery UI files into your web page. The “fullcalendar.css” and “fullcalendar.min.js” files are responsible for making your web calendar fully functional. Style sheets are coded inside “fullcalendar.css” files and “fullcalendar.min.js” file includes necessary Java Script coding. Once you have added above code to your web page, the next step is to add <div> tag for displaying Full Calendar.

 <body>
 <div id=‘calendar’></div>
 </body>
 </html>

For displaying Full Calendar on your web page, you need it requires <div> tag with some id. As soon as request is sent by the user, DOM elements are loaded on the web page which should be parsed by the browser first.

$(document).ready(function() {
 $(‘#calendar’).fullCalendar({…………..
 ………………………………………………..
 //other configuration parameters goes here.
 ………………………………………………..
 });
 // other javascript code.
 });

For Example your jsp file should like this.

<%@ page language=“java” contentType=“text/html; charset=ISO-8859-1″ pageEncoding=“ISO-8859-1″%>
 <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
 <html>
 <head>
 <meta http-equiv=“Content-Type” content=“text/html; charset=ISO-8859-1″>
 <title>FullCalender</title>
 <link href=‘../css/theme.css’ rel=‘stylesheet’ />
 <link href=‘../css/fullcalendar.css’ rel=‘stylesheet’ />
 <link href=‘../css/fullcalendar.print.css’ rel=‘stylesheet’ media=‘print’ />
 <script src=‘../jquery/jquery-1.9.1.min.js’></script>
 <script src=’../jquery/jquery-ui-1.10.2.custom.min.js’></script>
 <script src=‘../scripts/fullcalendar.min.js’></script>
 <script>

$(document).ready(function() {

var date = new Date();
 var d = date.getDate();
 var m = date.getMonth();
 var y = date.getFullYear();

$(‘#calendar’).fullCalendar({
 editable: true,
 theme:true,
 header: {
 left: ‘prev, next, today, prevYear, nextYear’,
 center: ‘title’,
 right: ‘month,agendaWeek,agendaDay’
 },

allDaySlot:false,
 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,
 color : "red",
 },

{
 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/'
 }

],

timeFormat: ‘hh:mmtt’,
 dayClick: function(date, allDay, jsEvent, view) {

if (allDay) {
 alert(‘Clicked on the entire day: ‘ + date);
 }else{
 alert(‘Clicked on the slot: ‘ + date);
 }
 },

eventClick: function(calEvent, jsEvent, view) {
 alert(‘Event title: ‘ + calEvent.title);
 alert(‘Event start:’ + calEvent.start);
 },

dayRender:function(date, cell){
 alert(‘dayRender has been clicked! for=>’+date);
 }

});

});

</script>

<style>

body {
 margin-top: 40px;
 text-align: center;
 font-size: 14px;
 font-family: “Lucida Grande”,Helvetica,Arial,Verdana,sans-serif;
 }

#calendar {

width: 1000px;

margin: 0 auto;

}

</style>
 </head>
 <body>
 <div id=‘calendar’></div>
 </body>
 </html>

Now we will discuss about some of the important parameters that are included in the above example –

1) editable : Boolean
The parameter explains that all event added to the calendar will fire “dayClick” event and “eventClient” event, if it is configured or defined for the calendar.

2) theme : Boolean
The parameter will explain you either you should include jQuery theme or not.

3) headers : Object/false
The parameter is necessary for defining titles and buttons at the top of the web page. If “header” setting is set to False then it displays no results. You can add properties with the object like left, right, top, bottom, and center etc. You can separate these values using comma or space. String usually contains following values –

  • Title – the text will include current day, month or week.
  • Prev::button – it moves the calendar one month back
  • Next::button – it moves the calendar one month forward
  • Prevyear::button – it moves the calendar one year back
  • Nextyear::button – it moves the calendar one year forward
  • Today::button – it moves the calendar to the current month, day or year.

4) Events: Object
The object is necessary for storing information related to a calendar event. The main properties of an object are –

  • ID – It uniquely identifies the object and its different instances.
  • Title – Text for event’s element
  • allDay – The parameter explain when event should occur at particular time of the day. It may be true or false. But values should not be included inside quotes.
  • Start – Starting date and time of an object is required.
  • End – This is an optional parameter for object’s event.

5) timeFormat: String

 It is possible to change the time of events using this parameter. Here is an example for better understanding –
 $(‘#calendar’).fullCalendar({
 events: [
 {
 title:  'My Event',
 start:   '2010-01-01T14:30:00',
 allDay: false
 }

// other events here...
 ],
 timeFormat: ‘H(:mm)’ // uppercase H for 24-hour clock
 });

6) dayClick : callback function

It will trigger when user clicks on a day ….

Function (date, allDay, jsEvent, view) { }

Here date object will hold the current day and time of the event. allDay event is set true or false according to requirement. jsEvent holds low level information with native Java Script event.

7) eventClick : callback function
It will trigger when user clicks on an event ….

Function (event, jsEvent, view) { }

Here event object holds the event information like date; title etc. jsEvent holds low level information with native Java Script event.

8) dayRender : callback function

Necessary for modifying day cell –

Function (date, cell) { }

The callback helps you in modifying day cells like day, week or month etc. Here date object will hold the current day and time of the event. You can modify the cell only; you cannot return a new value.

Thanks for reading. To feedback this post, kindly comment in below section. We welcome critics and genuine readers.

866 Total Views 1 Views Today
Loading...


Vijay is a compulsive blogger who likes to educate like-minded people on various new technologies and trends. He works with Aegis SoftTech as a software developer and has been developing software for years. Stay Connected to him on Facebook and Google+.