Upload
rithuik1598
View
439
Download
3
Embed Size (px)
DESCRIPTION
Json
Citation preview
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