Anup Das Gupta's Blog_ Full Calendar With JSON Data Source Using ASP

9/19/13 Anup Das Gupta's blog: Full Calendar with JSON data source using asp.net web service/ pagemethod/ webmethod

growingtech.blogspot.in/2012/02/full-calendar-with-json-data-source.html 1/5

Exploring Asp.net, Asp.net MVC, C#, jQuery, HTML, CSS, JavaScript

Anup Das Gupta's blog

WEDNESDAY, FEBRUARY 1, 2012

Full Calendar with JSON data source using asp.net web service/pagemethod/ webmethod

In this blog post we are going to discuss using full calendar plugin with JSON data source

through asp.net webservice / pagemethod / webmethod. We can get the detail of the plugin

here.

For using this plugin we need to add the reference of the following files-

Basic style HTML infrastructure using for this implementation is as follows-

#loading

{

width: 600px;

height: 550px;

position: absolute;

background-color: gray;

color: white;

text-align: center;

vertical-align: middle;

display: table-cell;

}

#fullcal

{

width: 600px;

height: 600px;

position: absolute;

display: none;

}

In the div with id fullcal we will be loading the calendar control. By default this div is marked

as hidden, and a place holder div (with id loading) is added in the place. This is just to show

while server data is getting loaded from server. Once the data is loaded on the calendar we

will show back the calendar and hide the placeholder.

The script used for activating calendar is as follows-

Now in full calendar the event object has lots of information. We can get more information

about the event object here. Lets represent the event as a C# class as follows-

There are many other properties for the event object. For the sack of implementation we are

12345

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js<link rel='stylesheet' type='text/css' href='http://arshaw.com/js/fullcalendar-1.5.2/fullcalendar/fullcalendar.css<script type='text/javascript' src='http://arshaw.com/js/fullcalendar-1.5.2/jquery/jquery-ui-1.8.11.custom.min.js<script type='text/javascript' src='http://arshaw.com/js/fullcalendar-1.5.2/fullcalendar/fullcalendar.min.js

12345678

<div> <div id="loading"> <label style="top: 50%; position: relative"> loading events....</label> </div> <div id="fullcal"> </div></div>

123456789

$('div[id*=fullcal]').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, editable: true, events: <b>list of event here</b>});

1234567

public class Event{ public int EventID { get; set; } public string EventName { get; set; } public string StartDate { get; set; } public string EndDate { get; set; }}

Like 25 people like this. Be the first of your

friends.

Join this sitew ith Google Friend Connect

Members (19)

Already a member? Sign in

FOLLOWERS

Follow @me

Microsoft Community Contributor 2011

MICROSOFT COMMUNITY CONTRIBUTOR2011

CHAT WITH ME ON SKYPE

ajax(17)

Asp.net (14)

C# (6)

data (5) database (4)

CATEGORIES

6.0 (1) :contains (1) addEventLis tener (1)

ajaxcontroltoolkit (1) ajaxdatasource (1)

amazon (1) A pplication (1) array (2) A rrayLis t (1)

attachEvent (1) backgroundcolor

(1) bar (2) bargraph (1) beforeShowDay (1) Block

(1) bucket (1) button (1) calendar (1)

calendarextender (1) calender (1) change (1) chat

(1) chechbox (1) check (1) c lass (1) c lient

validation (1) c lientid (1) c lone (1) c loud (1) column

(2) columntotal (1) complex (3) complexdata

(3) conditional (1) conditionalif (1) contains (1)

content-dispos ition (1) C ontent-Length (1)

C ontentType (1) context (1) contextmenu (2)

contrller (1) control (1) copy (2) c reate (1) css (1)

C ST (1) databasedriven

(2) DataLis t (1) datasource (1) datatable (3)

datatable.net (3) date (1) datepicker (2)

dayC lick (1) debugging (2) detail (2) developer

(2) developertool (1) dialog (3) Dic tionary (1)

disable (1) DO M (1) dotnet (2) draggable (1)

driven (3) dropdown (1) droppable (1) duplicate (1)

dynamic (2) each (1) Enterprise (1) Entity (1)

event (1) example (1) excel (2) export (1) extender

0Share More Next Blog» Create Blog Sign In

?

?

?

?

9/19/13 Anup Das Gupta's blog: Full Calendar with JSON data source using asp.net web service/ pagemethod/ webmethod

growingtech.blogspot.in/2012/02/full-calendar-with-json-data-source.html 2/5

taking these only. And I think the class properties are self explanatory. We can get the data

for the event from database. For this post we are creating in memory object for data source.

The page method used for data retrieval is as follows-

Now we can read the web service data using jQuery and fill the full calendar using server

driven event list like following-

Now here is a slight problem, the calendar will get loaded but not the list of events returned.

Few points we need to remember here-

1. The full calendar event object has certain naming like EventID should be id,

EventName – title, StartDate – start, EndDate – end and so on. So, we have to map

the returned object to full calendar’s desired object.

2. One more thing that we need to remember is that the start and end need to be in

date type. The proper conversation is as follows-

We can note one more thing that we are returning the date in MM-dd-yyyy format

(DateTime.Now.ToString("MM-dd-yyyy")). The reason is that we can pass such a string to

Date constructor in JavaScript to create the date.

We can download the full source code from here.

1234567891011121314151617181920212223242526272829303132333435

[WebMethod] public List<event> GetEvents() { List<event> events = new List<event>(); events.Add(new Event() { EventID = 1, EventName = "EventName 1", StartDate = DateTime.Now.ToString("MM-dd-yyyy"), EndDate = DateTime.Now.AddDays(2).ToString("MM-dd-yyyy") }); events.Add(new Event() { EventID = 2, EventName = "EventName 2", StartDate = DateTime.Now.AddDays(4).ToString("MM-dd-yyyy"), EndDate = DateTime.Now.AddDays(5).ToString("MM-dd-yyyy") }); events.Add(new Event() { EventID = 3, EventName = "EventName 3", StartDate = DateTime.Now.AddDays(10).ToString("MM-dd-yyyy"), EndDate = DateTime.Now.AddDays(11).ToString("MM-dd-yyyy") }); events.Add(new Event() { EventID = 4, EventName = "EventName 4", StartDate = DateTime.Now.AddDays(22).ToString("MM-dd-yyyy"), EndDate = DateTime.Now.AddDays(25).ToString("MM-dd-yyyy") }); return events; }</event></event></event>

1234567891011121314151617181920212223

$.ajax({ type: "POST", contentType: "application/json", data: "{}", url: "FullcalenderwithWebservice.asmx/GetEvents", dataType: "json", success: function(data) { $('div[id*=fullcal]').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, editable: true, events: data.d }); $("div[id=loading]").hide(); $("div[id=fullcal]").show(); }, error: function(XMLHttpRequest, textStatus, errorThrown) { debugger; }});

12345678910111213141516

$('div[id*=fullcal]').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, editable: true, events: $.map(data.d, function(item, i) { var event = new Object(); event.id = item.EventID; event.start = new Date(item.StartDate); event.end = new Date(item.EndDate); event.title = item.EventName; return event; })});

generic

(6) genericlist (4)

JavaScript (7) jQuery(27) JSON (5)

list

(5)

MVC (8) MVC 3 (12)

pagemethod (7)

post (5)

razor (4)

webmethod (7) webservice (7)

(1) extra (1) extraparameter (1) file (2) firebug (1)

floating point (1) folder (1) free (1) free data s torage

(1) full (1) fullcalender (3) galleriffic (1)

get (1) getE lementsByTagName

(1) getting s tarted (1) grand (1) grandtotal (1)

graph (2) gridview (1) handler (2) highlight (2)

HTML (3) HTML Table (2) HTML.TextBoxFor (1)

HTML5 (1) htmlFor (1) icon (2) ie (2)

iedevelopertool (1) if (1) image (3) input (1) is sue

(1) IST (1) jqPlot (2)

jQuery.param (2) JSO N to

HTML Table (1) JSO N to Table (1) JSONResult (3)

keyup (1) knockout (2) learn (1) learning (1)

Library (1) line (1) LINQ (1) LINQ to Entity (1)

localization (1) Logging (1) loop (1) macro (1)

master (1) menu (1) MessageBox (1) minus (1)

model (2) modeldriven (1) modify (2)

msDropDown (2) net

(1) network (2) nonsequential (1) number (1)

objec t (1) observable (1) observableA rray (1)

onkeypress (1) option (1) P age_C lientV alidate (1)

P age_IsV alid (1) paging (2)

parameter (1) pas tdate (1) PDF (1) plugin (1) plus

(1) ppGallery (1) presentation (1) problem

(1) progress (1) progressbar (1) radio (1)

radiobuttonlis t (1) regexp (1)

Regis terC lientScriptBlock (1) regis tered (1) reload

(1) relorder (1) renderEvent (1) reorderlis t (1)

Repeater (2) requiredfield (1) restrict (2) row (1)

rowtotal (1) S3 (1) safari 5 (1) search (1) selec t (1)

selec tor (1) service (1) Set Methods (1) shared (1)

sharedfolder (1) s ignalr (1) s imple (1) skyDrive (1)

s lideshow (1) smiley (1) s tep by s tep (1) s tick (1)

storage (2) s tring (1) s tringify (1) table (3) tabs

(1) textbox (2) time (1) tool (2) toolkit (1)

tooltips (1) total (1) traditional (1) U I (1) UNIO N (1)

upload (1) UTC (1) validation (2)

V alidationSummary (1) value (1) vba (1) video (1)

webform (3)

window.location (1) window.location.reload() (1)

Full Calendar with JSON data source usingasp.net web service/ pagemethod/webmethod

In this blog post we are going to discuss usingfull calendar plugin with JSON data sourcethrough asp.net webservice / pagemethod /webmet...

Disable past date in ajax control toolkitcalendar extender

This is a simple post where we will be talkingabout disabling past dates in calendarextender of ajax control toolkit. Let’s take thefoll...

Posting an array or generic list of string toasp.net MVC 3 using jQuery ajax

This is a simple post that we will be using topost an array of value type or a generic list ofvalue. We will be using string[] and List ...

Full calendar - saving event using ajax /pagemethod/ webmethod in asp.net

In this post we will be saving the event in afull calendar plugin using jQuery ajax andasp.net pagemethod or web service. To gothrough t...

Export HTML to excel using jQuery andasp.net

Here we will see how to export a HTML tablecontent to excel using asp.net web form andC# using jQuery. Let’s start with a small pieceo...

Using msDropDown - a dropdown with icon inthe option

msDropDown is a nice plugin. Its a dropdownplugin where we can use icon with the optionof the select element. The detail of the pluginca...

Progress bar for long running process withsteps using asp.net, C#, SignalR

I have come across with many questionsregarding implementing progress of somelong running operations in asp.net application.And I could ...

POPULAR POSTS

?

?

?

9/19/13 Anup Das Gupta's blog: Full Calendar with JSON data source using asp.net web service/ pagemethod/ webmethod

growingtech.blogspot.in/2012/02/full-calendar-with-json-data-source.html 3/5

Posted by Anup Das Gupta at 1:10 AM

Labels: ajax, complex, complexdata, data, fullcalender, JSON, pagemethod, webmethod, webservice

Replies

Reply

Replies

Reply

Replies

Reply

Replies

Reply

11 comments:

Kevin Marshall February 7, 2012 at 1:15 AM

Great post, thanks for this information....

Web Services

Reply

Anup Das Gupta February 10, 2012 at 2:06 AM

thanks

Parvez Shaikh March 20, 2012 at 2:44 AM

hey can u tell code for inserting data into mssql after event creation.....thnx

Reply

Anup Das Gupta March 22, 2012 at 12:59 AM

Hi,

I have added another post regarding this-

http://growingtech.blogspot.in/2012/03/full-calendar-saving-event-using-ajax.html

Shrinivas Chakravarthy April 25, 2012 at 9:12 AM

Good Example. Do u have any example for binding json object from MV3 controller method.

If so please post the same.

Reply

Anup Das Gupta April 30, 2012 at 2:07 AM

Sorry for late reply. You can simply call controller method from JavaScript. As an

example you can check the post -

http://forums.asp.net/p/1650403/4292279.aspx#4292279

Shiri June 20, 2012 at 7:40 AM

I downloaded and run the code and it appears always that is "loading events....". Any ideia of

what could be happining?

Reply

Anup Das Gupta June 25, 2012 at 1:48 AM

If you directly run the code, it should work. There can be problem with the css and

js file reference issue.

Anthony Albutt September 4, 2012 at 6:49 AM

Thanks, Huge help. I downloaded the fullcalendar and jquery files from owners and made

local ref. Worked perfectly

Reply

AbhiTheFlame April 30, 2013 at 2:37 AM

JSON to HTML table

There was a need to converting JSON objectto HTML Table. I found out different solutionsover internet. But there was no genericsolution w...

Ajax data paging with dataTables.net jQueryplugin in asp.net MVC 3

In this post we will be discussing how to doajax based server side data paging withdataTables.net jQuery plugin in asp.net MVC3. To cont...

Master-detail with knockout in asp.net MVC 3

In this post we will be discussing creating amaster detail relationship with Knockout.js inasp.net MVC 3. For this let’s take a simplevi...

Ask Anupnow

WIZPERT

9/19/13 Anup Das Gupta's blog: Full Calendar with JSON data source using asp.net web service/ pagemethod/ webmethod

growingtech.blogspot.in/2012/02/full-calendar-with-json-data-source.html 4/5

Newer Post Older PostHome

Subscribe to: Post Comments (Atom)

Enter your comment...

Comment as: Google Account

Publish Preview

Hello Sir, I have a table In which I have defined Start date End Date and Start time/End Time

as well.

How can apply my start time and end time in

events.Add(new Event()

{

EventID = 1,

EventName = "EventName 1",

StartDate = new DateTime(y, m, d).ToString(),

EndDate = new DateTime(y, m+1, d).ToString()

});

Help Me!!!!!!!!!!

Reply

Connie DeCinko May 7, 2013 at 11:09 AM

I see one issue... When pulling the data from a database, you must retrieve all records. That

could eventually become a pretty large set of data. I would rather only pull events for the

currently displayed time period, in my case, the current month. Your method pulls the data,

then creates the calendar. A better way would be to let FullCalendar grab the data since it

passes the start and end dates when calling the web service.

Reply

► 2013 (1)

▼ 2012 (46)

► December (1)

► November (2)

► October (2)

► September (5)

► August (1)

► July (1)

► June (9)

► May (8)

► April (3)

► March (5)

▼ February (5)

Posting list of text box values to array or list u...

Posting an array or generic list of string to asp....

Using msDropDown with tooltips plugin

Using msDropDown - a dropdown with icon in the opt...

Full Calendar with JSON data source using asp.net ...

► January (4)

► 2011 (2)

► 2010 (2)

► 2009 (2)

BLOG ARCHIVE

9/19/13 Anup Das Gupta's blog: Full Calendar with JSON data source using asp.net web service/ pagemethod/ webmethod

growingtech.blogspot.in/2012/02/full-calendar-with-json-data-source.html 5/5

Picture Window template. Template images by Storman. Powered by Blogger.

Anup Das Gupta

Bangalore, Karnataka, India

Microsoft Community Contribution Award 2011 winner and Master Degree in Computer Science having more than 6 years of software

development experience in different phases of a software development life cycle. Having experience in technical leading of small team. Strong

analytical and debugging skill. A technical trainer in jQuery.

View my complete profile

ABOUT ME