Developers can use Fullcalendar to create powerful calendar applications, Fullcalendar offers rich options and method calls, making it easy for developers to create calendar programs for a variety of functions.
As a result of the project needs, the need to show some data through the calendar, the web search for a lot of calendar plug-ins, feel more useful or fullcalendar, the following is a simple demo I wrote, if there is insufficient, please correct!!!
First, the introduction of the necessary documents:
<link href= "Scripts/plugins/fullcalendar.css" rel= "stylesheet"/> <link href= "scripts/plugins/" Jquery.ui.css "rel=" stylesheet "/> <link href=" scripts/plugins/style.default.css "rel=" stylesheet "/> <script src= "scripts/plugins/jquery-1.7.min.js" ></script> <script src= "scripts/plugins/" Jquery-ui-1.8.16.custom.min.js "></script> <script src=" Scripts/plugins/fullcalendar.min.js "> </script>
Second, add div blocks to the interface:
<body> <div id= ' calendar ' style= ' margin-top:10px;margin-left:5px ' > </div>
Initialize Calendar JS code I put it in the Fullcalendar.js file. Next let's take a look at the script information in this file.
Iii. Initialization of Fullcalender:
/* Initialize calendar/ID to initialize in which label jQuery (' #calendar '). Fullcalendar {header: {left: ' Month,agendaweek,agendaday ', Center: ' title ', right: ' Today, prev, Next '}, MonthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September" , "October", "November", "December"], Monthnamesshort: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], DA Ynames: ["Sunday", "Monday", Tuesday "," Wednesday "," Thursday "," Friday "," Saturday "], Daynamesshort: [" Sunday "," Monday "," Tuesday "," Wednesday "," Thursday "," Friday "," Saturday "], today: ["Today"], Firstday:1, ButtonText: {prev: ' «', Next: '» ', prevyear: ' << ', nextyear: ' &nbs p;>> ', Today: ' Todays ', Month: ' Month ', Week: ' Weeks ', day: ' Days '}, Viewdisplay:function (view) {//dynamic
Data detection, according to the month dynamic query var Viewstart = $.fullcalendar.formatdate (View.start, "Yyyy-mm-dd HH:mm:ss");
var viewend = $.fullcalendar.formatdate (View.end, "Yyyy-mm-dd HH:mm:ss"); $ ("#calendar"). Fullcalendar (' removeevents '); Return the information that needs to be displayed (start and end are parameters that need to be passed through the POST request general handler, in theThere is no use in the text to ignore the $.post (". /datehandle/viewdata.ashx ", {start:viewstart, end:viewend}, function (data) {var resultcollection = Jquery.parsej
SON (data);
$.each (resultcollection, function (index, term) {$ ("#calendar"). Fullcalendar (' renderevent ', term, true);
}); }); The data taken from the background is encapsulated and then displayed on the page in a fullcalendar manner, dayclick:function (date, AllDay, jsevent, view) {}, Loading:functi
On (BOOL) {if (bool) $ (' #loading '). Show ();
else $ (' #loading '). Hide (); },//#region data binding to add appropriate information on the page (run when loading data at first) eventafterrender:function (event, element, view) {var Fstart = $.FULLC
Alendar.formatdate (Event.start, "hh:mm");
var fend = $.fullcalendar.formatdate (Event.end, "hh:mm");
var confbg = ' <span class= ' fc-event-bg ' ></span> ';
if (View.name = = "Month") {//by month var evtcontent = ' <div class= ' fc-event-vert ' ><a> ';
Evtcontent = evtcontent + confbg; Evtcontent = evtcontent + ' <span class= ' fc-event-titlebg ' > ' + FSTart + "-" + fend + event.fullname + ' </span> ';
Evtcontent = evtcontent + ' <span class= ' fc-event-titlebg ' > ' + event.fullname + ' </span> ';
Element.html (evtcontent);
else if (View.name = = "Agendaweek") {//per week var evtcontent = ' <a> ';
Evtcontent = evtcontent + confbg;
Evtcontent = evtcontent + ' <span class= ' fc-event-time ' > ' + fstart + '-' + fend + ' </span> ';
Evtcontent = evtcontent + ' <span> ' + event.fullname + ' </span> ';
Element.html (evtcontent);
else if (View.name = = "Agendaday") {//per day var evtcontent = ' <a> ';
Evtcontent = evtcontent + confbg;
Evtcontent = evtcontent + ' <span class= ' fc-event-time ' > ' + fstart + '-' + fend + ' </span> ';
Element.html (evtcontent); },//#endregion///#region mouse put up to display information eventmouseover:function (calevent, jsevent, view) {//var Fstart = $.
Fullcalendar.formatdate (Calevent.start, "Yyyy/mm/dd hh:mm"); var fend = $.fullcalEndar.formatdate (Calevent.end, "Yyyy/mm/dd hh:mm"); $ (this). attr (' title ', Fstart + "-" + fend + "" + calevent.fullname);
When the mouse hovers over title, you can set what information to show $ (this). attr (' title ', Calevent.fullname);
$ (this). CSS (' font-weight ', ' normal ');
$ (this). ToolTip ({//Effect: ' Toggle ',//Canceldefault:true//}); }, Eventclick:function (event) {}, events: [],//#endregion editable:true, droppable:true,//All
oWS things to be dropped onto the calendar!!! Drop:function (date, AllDay) {//This function was called when something is dropped//retrieve the dropped element ' s
Stored Event Object var originaleventobject = JQuery (this). Data (' EventObject '); We need to copy it and so this multiple events don ' t have a reference to the same object var copiedeventobject = JQuery
. Extend ({}, Originaleventobject);
Assign it the date that is reported copiedeventobject.start = date;
Copiedeventobject.allday = AllDay; Render The event on the calendar//The last ' true ' argument determines if the event ' sticks ' (Http://arshaw.com/fullcalendar
/docs/event_rendering/renderevent/) jQuery (' #calendar '). Fullcalendar (' renderevent ', Copiedeventobject, true);
Is the ' Remove after drop ' checkbox checked?
JQuery (This). Remove (); }
});
Four: Return required JSON data through a generic handler
First, add task class tasks:
<summary>
///Task class
///</summary> public
class task
{public
int ID {get; set;}
<summary>
///Task Name
///</summary> public
string name {get; set;}
<summary>
///content
///</summary> public
string content {get; set;}
<summary>
///start time
///</summary> public
DateTime startdate {get; set;}
<summary>
///End time
///</summary> public
DateTime enddate {get; set;}
The JSON data is returned in the generic handler ViewData:
public void ProcessRequest (HttpContext context) {//test data list<task> tasks = new list<task> () {New Ta SK () {id=1,name= "Task 1", content= "Modify somewhere Bug", Startdate=new datetime (2015,12,16,08,32,33), Enddate=new datetime ( 2015,12,16,11,27,33)}, New Task () {id=2,name= "Task 2", content= "meeting with Liu to discuss requirements analysis", Startdate=new DateTime ( 2015,12,09,18,32,33), Enddate=new DateTime (2015,12,09,19,27,33)}, New Task () {id=3,name= "Task 3", content= "code upload and Collation", Startdate=new datetime (2015,12,17,13,32,33), Enddate=new datetime (2015,12,17,17,27,33)}, New Task () {Id=4,name= Task 4 , content= "online test", Startdate=new datetime (2015,12,30,15,32,33), Enddate=new datetime (2015,12,15,17,27,33)}, new Task () {id=5,name= "Task 5", content= "code upload and Collation", Startdate=new datetime (2015,12,07,13,32,33), Enddate=new datetime (
2015,12,07,17,27,33)};
JavaScriptSerializer JSS = new JavaScriptSerializer ();
list<dictionary<string, object>> gas = new list<dictionary<string, object>> ();
foreach (var entity in tasks) { Dictionary<string, object> drow = new dictionary<string, object> (); Drow.
ADD ("id", entity.id); Drow. Add ("title", String. Format ("task name: {0}", entity.)
Name)); Drow. ADD ("Start", Returndate (entity).
StartDate)); Drow. ADD ("End", Returndate (entity). EndDate)); Mouse suspension on the display of this property information, you can set up drow. ADD ("FullName", string. Format ("task name: {0}", entity.)
Name)); Drow.
ADD ("AllDay", false); Gas.
ADD (drow); } context. Response.Write (JSS.
Serialize (gas)); #region Time output format///<summary>///time is transferred in this format///</summary>///<param name= "Date" ></param&
Gt <returns></returns> private String Returndate (DateTime date) {string str = string.
Empty;
String time = convert.tostring (date); string[] Split = time.
Split (")"; String viewdate = Split[0]. Split ('/') [0] + "-" + Addzero (split[0]. Split ('/') [1]) + "-" + Addzero (split[0].
Split ('/') [2]); String viewtime = Addzero (split[1]. Split (': ') [0]) + ":" + Addzero (split[1]. Split (': ') [1]) + ":" + Addzero (split[1].
Split (': ') [2]);
str = viewdate + "T" + viewtime;
return str; ///<summary>///Determine if the number is preceded by a 0///</summary>///<param name= "str" ></param>///<ret Urns></returns> private String Addzero (String str) {if (str).
Length = = 1) return "0" + str;
else return str; } #endregion
Here is the effect chart:
The effect of the mouse on the title:
The above content is small to share the Fullcalendar calendar plug-in application of data display (a) of all the narrative, I hope you like.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
