9/19/13

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

More

Next Blog

Create Blog

Sign In

Anup Das Gupta's blog

Exploring Asp.net, Asp.net MVC, C#, jQuery, HTML, CSS, JavaScript
WEDNESDAY, FEBRUARY 1, 2012 Like 25 people like this. Be the first of your friends.

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 files1 2 3 4 5
FOLLOWERS

Join this site

w ith Google Friend Connect

Members (19) < s c r i p ts r c = " h t t p : / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / j q u e r y / 1 . 4 . 4 / j q u e r y . m i n . j s " ? t y p e < s c r i p ts r c = " h t t p : / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / j q u e r y u i / 1 . 8 . 6 / j q u e r y u i . m i n . j s < l i n kr e l = ' s t y l e s h e e t 't y p e = ' t e x t / c s s 'h r e f = ' h t t p : / / a r s h a w . c o m / j s / f u l l c a l e n d a r 1 . 5 . 2 / f u l l c a l e n d a r / f u l l c a l e n d a r . c s s < s c r i p tt y p e = ' t e x t / j a v a s c r i p t 's r c = ' h t t p : / / a r s h a w . c o m / j s / f u l l c a l e n d a r 1 . 5 . 2 / j q u e r y / j q u e r y u i 1 . 8 . 1 1 . c u s t o m . m i n . j s < s c r i p tt y p e = ' t e x t / j a v a s c r i p t 's r c = ' h t t p : / / a r s h a w . c o m / j s / f u l l c a l e n d a r 1 . 5 . 2 / f u l l c a l e n d a r / f u l l c a l e n d a r . m i n . j s

Basic style HTML infrastructure using for this implementation is as follows# l o a d i n g { w i d t h :6 0 0 p x ; h e i g h t :5 5 0 p x ; p o s i t i o n :a b s o l u t e ; b a c k g r o u n d c o l o r :g r a y ; c o l o r :w h i t e ; t e x t a l i g n :c e n t e r ; v e r t i c a l a l i g n :m i d d l e ; d i s p l a y :t a b l e c e l l ; } # f u l l c a l { w i d t h :6 0 0 p x ; h e i g h t :6 0 0 p x ; p o s i t i o n :a b s o l u t e ; d i s p l a y :n o n e ; } 1 2 3 4 5 6 7 8 < d i v > < d i vi d = " l o a d i n g " > < l a b e ls t y l e = " t o p :5 0 % ;p o s i t i o n :r e l a t i v e " > l o a d i n ge v e n t s . . . . < / l a b e l > < / d i v > < d i vi d = " f u l l c a l " > < / d i v > < / d i v >
?

Already a member? Sign in

Follow @m e

MICROSOFT COMMUNITY CONTRIBUTOR 2011

Microsoft C ommunity C ontributor 2011

CHAT WITH ME ON SKYPE

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 follows1 2 3 4 5 6 7 8 9 $ ( ' d i v [ i d * = f u l l c a l ] ' ) . f u l l C a l e n d a r ( { h e a d e r :{ l e f t :' p r e v , n e x tt o d a y ' , c e n t e r :' t i t l e ' , r i g h t :' m o n t h , a g e n d a W e e k , a g e n d a D a y ' } , e d i t a b l e :t r u e , e v e n t s :< b > l i s to fe v e n th e r e < / b > } ) ;
?

CATEGORIES
6 .0 (1 ) :c ontains (1 ) addE ventL is tener (1 )

(17)

ajax
(1 )

ajaxc ontroltoolkit

(1 )

ajaxdatas ourc e

Asp.net (14)

amazon (1 ) A pplic ation (1 ) array (2) A rrayL is t (1 ) attac hE vent (1 ) bac kgroundc olor (1 ) bar (2) bargraph (1 ) beforeShowD ay (1 ) Bloc k (1 ) buc ket (1 ) button (1 ) (1 ) c hec hbox (1 ) c hec k

C # (6) c alendar (1 )
(1 ) c las s (1 ) c lient

c alendarextender (1 ) c alender (1 ) c hange (1 ) c hat validation (1 ) c lientid (1 ) c lone (1 ) c loud (1 ) colum n

(2) c olumntotal (1 ) com ple x (3) com ple x data (3) c onditional (1 ) c onditionalif (1 ) c ontains (1 )
c ontent- dis pos ition (1 ) C ontent- L ength (1 ) C ontentT ype (1 ) c ontext (1 ) conte x tm e nu C ST (1 )

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 follows1 2 3 4 5 6 7 p u b l i cc l a s sE v e n t { p u b l i ci n tE v e n t I D{g e t ;s e t ;} p u b l i cs t r i n gE v e n t N a m e{g e t ;s e t ;} p u b l i cs t r i n gS t a r t D a t e{g e t ;s e t ;} p u b l i cs t r i n gE n d D a t e{g e t ;s e t ;} }
?

(2)

c ontrller (1 ) c ontrol (1 ) copy (2) c reate (1 ) c s s (1 )

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

data (5) database (4) database drive n (2) D ataL is t (1 ) datas ourc e (1 ) datatable (3) datatable .ne t (3) date (1 ) date pick e r (2) dayC lic k (1 ) de bugging (2) de tail (2) de ve lope r (2) developertool (1 ) dialog (3) D ic tionary (1 ) dis able (1 ) D O M (1 ) dotne t (2) draggable (1 ) drive n (3) dropdown (1 ) droppable (1 ) duplic ate (1 ) dynam ic (2) eac h (1 ) E nterpris e (1 ) E ntity (1 ) event (1 ) example (1 ) e x ce l (2) export (1 ) extender

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

1/5

9/19/13

Anup Das Gupta's blog: Full Calendar with JSON data source using asp.net web service/ pagemethod/ webmethod
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 follows1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 3 5 [ W e b M e t h o d ] p u b l i cL i s t < e v e n t >G e t E v e n t s ( ) { L i s t < e v e n t >e v e n t s=n e wL i s t < e v e n t > ( ) ; e v e n t s . A d d ( n e wE v e n t ( ) { E v e n t I D=1 , E v e n t N a m e=" E v e n t N a m e1 " , S t a r t D a t e=D a t e T i m e . N o w . T o S t r i n g ( " M M d d y y y y " ) , E n d D a t e=D a t e T i m e . N o w . A d d D a y s ( 2 ) . T o S t r i n g ( " M M d d y y y y " ) } ) ; e v e n t s . A d d ( n e wE v e n t ( ) { E v e n t I D=2 , E v e n t N a m e=" E v e n t N a m e2 " , S t a r t D a t e=D a t e T i m e . N o w . A d d D a y s ( 4 ) . T o S t r i n g ( " M M d d y y y y " ) , E n d D a t e=D a t e T i m e . N o w . A d d D a y s ( 5 ) . T o S t r i n g ( " M M d d y y y y " ) } ) ; e v e n t s . A d d ( n e wE v e n t ( ) { E v e n t I D=3 , E v e n t N a m e=" E v e n t N a m e3 " , S t a r t D a t e=D a t e T i m e . N o w . A d d D a y s ( 1 0 ) . T o S t r i n g ( " M M d d y y y y " ) , E n d D a t e=D a t e T i m e . N o w . A d d D a y s ( 1 1 ) . T o S t r i n g ( " M M d d y y y y " ) } ) ; e v e n t s . A d d ( n e wE v e n t ( ) { E v e n t I D=4 , E v e n t N a m e=" E v e n t N a m e4 " , S t a r t D a t e=D a t e T i m e . N o w . A d d D a y s ( 2 2 ) . T o S t r i n g ( " M M d d y y y y " ) , E n d D a t e=D a t e T i m e . N o w . A d d D a y s ( 2 5 ) . T o S t r i n g ( " M M d d y y y y " ) } ) ; r e t u r ne v e n t s ; } < / e v e n t > < / e v e n t > < / e v e n t >
?
(1 ) extra (1 ) extraparameter (1 ) file (2) firebug (1 ) floating point (1 ) folder (1 ) free (1 ) free data s torage (1 ) full (1 ) fullcale nde r (3) galleriffic (1 ) generic (6) genericlist (4) get (1 ) getE lements ByT agN ame (1 ) getting s tarted (1 ) grand (1 ) grandtotal (1 )

graph (2) gridview (1 ) handle r (2) highlight (2) HTML (3) HTML Table (2) H T M L .T extBoxFor (1 ) HT M L5 (1 ) htmlFor (1 ) icon (2) ie (2)
iedevelopertool (1 ) if (1 ) im age (3) input (1 ) is s ue (1 ) I ST (1 )

JavaScript (7) jqPlot (2)

(27)

jQuery

jQ ue ry.param (2) JSON (5) J SO N to H T M L T able (1 ) J SO N to T able (1 ) JSO NR e sult (3)

keyup (1 ) k nock out

(2) learn (1 ) learning (1 )

list (5) loc alization (1 ) L ogging (1 ) loop (1 ) mac ro (1 )

L ibrary (1 ) line (1 ) L I N Q (1 ) L I N Q to E ntity (1 ) mas ter (1 ) menu (1 ) M es s ageBox (1 ) minus (1 )

m ode l

(2)

modeldriven

(1 )

m sDropDown (2)
(1 ) ne twork objec t (1 )

MVC (8) MVC 3 (12)

(1 ) obs ervableA rray

m odify

(2)
net (1 )

(2) nons equential (1 ) number (1 )

obs ervable

onkeypres s (1 ) option (1 ) P age_C lientV alidate (1 ) P age_I s V alid (1 ) (1 ) (1 )

pagemethod (7) paging (2)

parameter (1 ) pas tdate (1 ) P D F (1 ) plugin (1 ) plus

post (5) ppG allery (1 ) pres entation (1 ) problem

progres s (1 ) (1 ) progres s bar (1 ) radio regexp (1 ) (1 ) (1 )

radiobuttonlis t (1 ) relorder

razor

(4)

Regis terC lientSc riptBloc k (1 ) regis tered (1 ) reload (1 ) renderE vent (1 ) reorderlis t

R e pe ate r (2) requiredfield (1 ) re strict (2) row (1 )

rowtotal (1 ) S3 (1 ) s afari 5 (1 ) s earc h (1 ) s elec t (1 ) s elec tor (1 ) s ervic e (1 ) Set M ethods (1 ) s hared (1 ) s haredfolder (1 ) s ignalr (1 ) s imple (1 ) s kyD rive (1 ) s lides how (1 ) s miley (1 ) s tep by s tep (1 ) s tic k (1 )

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

(1 ) te x tbox upload (1 )

Now we can read the web service data using jQuery and fill the full calendar using server driven event list like following1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 $ . a j a x ( { t y p e :" P O S T " , c o n t e n t T y p e :" a p p l i c a t i o n / j s o n " , d a t a :" { } " , u r l :" F u l l c a l e n d e r w i t h W e b s e r v i c e . a s m x / G e t E v e n t s " , d a t a T y p e :" j s o n " , s u c c e s s :f u n c t i o n ( d a t a ){ $ ( ' d i v [ i d * = f u l l c a l ] ' ) . f u l l C a l e n d a r ( { h e a d e r :{ l e f t :' p r e v , n e x tt o d a y ' , c e n t e r :' t i t l e ' , r i g h t :' m o n t h , a g e n d a W e e k , a g e n d a D a y ' } , e d i t a b l e :t r u e , e v e n t s :d a t a . d } ) ; $ ( " d i v [ i d = l o a d i n g ] " ) . h i d e ( ) ; $ ( " d i v [ i d = f u l l c a l ] " ) . s h o w ( ) ; } , e r r o r :f u n c t i o n ( X M L H t t p R e q u e s t ,t e x t S t a t u s ,e r r o r T h r o w n ){ d e b u g g e r ; } } ) ;
?

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

UTC (1 )

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

validation

(2)

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

we bform (3) webmethod (7) webservice (7)

window.loc ation (1 ) window.loc ation.reload() (1 )

POPULAR POSTS Full C alendar 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 / webmet... Disable past date in ajax control toolkit calendar extender This is a simple post where we will be talking about disabling past dates in calendar extender of ajax control toolkit. Lets take the foll... Posting an array or generic list of string to asp.net MVC 3 using jQuery ajax This is a simple post that we will be using to post an array of value type or a generic list of value. 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 a full calendar plugin using jQuery ajax and asp.net pagemethod or web service. To go through t... Export HTML to excel using jQuery and asp.net Here we will see how to export a HTML table content to excel using asp.net web form and C # using jQuery. Lets start with a small piece o... Using msDropDown - a dropdown with icon in the option msDropDown is a nice plugin. Its a dropdown plugin where we can use icon with the option of the select element. The detail of the plugin ca... Progress bar for long running process with steps using asp.net, C #, SignalR I have come across with many questions regarding implementing progress of some long running operations in asp.net application. And I could ...

Now here is a slight problem, the calendar will get loaded but not the list of events returned. Few points we need to remember here1. 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 calendars 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 follows1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 $ ( ' d i v [ i d * = f u l l c a l ] ' ) . f u l l C a l e n d a r ( { h e a d e r :{ l e f t :' p r e v , n e x tt o d a y ' , c e n t e r :' t i t l e ' , r i g h t :' m o n t h , a g e n d a W e e k , a g e n d a D a y ' } , e d i t a b l e :t r u e , e v e n t s :$ . m a p ( d a t a . d ,f u n c t i o n ( i t e m ,i ){ v a re v e n t=n e wO b j e c t ( ) ; e v e n t . i d=i t e m . E v e n t I D ; e v e n t . s t a r t=n e wD a t e ( i t e m . S t a r t D a t e ) ; e v e n t . e n d=n e wD a t e ( i t e m . E n d D a t e ) ; e v e n t . t i t l e=i t e m . E v e n t N a m e ; r e t u r ne v e n t ; } ) } ) ;
?

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.

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

2/5

9/19/13

Anup Das Gupta's blog: Full Calendar with JSON data source using asp.net web service/ pagemethod/ webmethod
Posted by Anup Das Gupta at 1:10 AM Labels: ajax, complex, complexdata, data, fullcalender, JSON, pagemethod, webmethod, webservice JSON to HTML table There was a need to converting JSON object to HTML Table. I found out different solutions over internet. But there was no generic solution w... Ajax data paging with dataTables.net jQuery plugin in asp.net MVC 3 In this post we will be discussing how to do ajax based server side data paging with dataTables.net jQuery plugin in asp.net MVC 3. To cont... Master-detail with knockout in asp.net MVC 3 In this post we will be discussing creating a master detail relationship with Knockout.js in asp.net MVC 3. For this lets take a simple vi...

11 comments:
Kevin Marshall February 7, 2012 at 1:15 AM Great post, thanks for this information.... Web Services Reply Replies Anup Das Gupta thanks Reply February 10, 2012 at 2:06 AM

WIZPERT

Parvez Shaikh March 20, 2012 at 2:44 AM hey can u tell code for inserting data into mssql after event creation.....thnx Reply Replies Anup Das Gupta March 22, 2012 at 12:59 AM

Ask Anup now

Hi, I have added another post regarding thishttp://growingtech.blogspot.in/2012/03/full-calendar-saving-event-using-ajax.html Reply

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 Replies 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 Reply

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 Replies 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. Reply

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

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

3/5

9/19/13

Anup Das Gupta's blog: Full Calendar with JSON data source using asp.net web service/ pagemethod/ webmethod
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 FullC alendar grab the data since it passes the start and end dates when calling the web service. Reply

E n t e ry o u rc o m m e n t . . .

Comment as: Google Account Publish Preview

Newer Post
Subscribe to: Post C omments (Atom)

Home

Older Post

BLOG ARCHIVE 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 C alendar with JSON data source using asp.net ... January (4) 2011 (2) 2010 (2) 2009 (2)

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

4/5

9/19/13

Anup Das Gupta's blog: Full Calendar with JSON data source using asp.net web service/ pagemethod/ webmethod
Picture Window template. Template images by Storman. Powered by Blogger.

ABOUT ME Anup Das Gupta Bangalore, Karnataka, India Microsoft C ommunity C ontribution Award 2011 winner and Master Degree in C omputer 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

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

5/5