Home > Developer > JavaScript
Front-end code:
[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Link rel = "stylesheet" type = "text/css" href = "css/mycss.css">
<Link rel = 'stylesheet 'Type = 'text/css 'href = 'fullcalendar/fullcalendar.css'/>
<Link rel = 'stylesheet 'type = 'text/css' href = 'fullcalendar/fullcalendar.print.css 'media = 'print'/>
<Script type = 'text/javascript 'charset = "UTF-8" src = 'js/jquery-1.7.2.min.js'> </script>
<Script type = 'text/javascript 'charset = "UTF-8" src = 'js/jquery-ui-1.8.17.custom.min.js'> </script>
<Script type = 'text/javascript 'charset = "UTF-8" src = 'fullcalendar/fullcalendar. min. js'> </script>
<Script type = 'text/javascript '>
Function openUrl (id ){
Try
{
If (top! = This)
{
Self. parent. addTabRecordView (id );
}
Else
{
Window. open ("RecordView.html? Id = "+ id, 'XX', 'left = 0, top = 0, width = '+ (screen. availWidth-10) + ', height =' + (screen. availHeight-50 ));
}
}
Catch (err)
{
Window. open ("RecordView.html? Id = "+ id, 'XX', 'toolbar = yes, status = yes, location = yes, menubar = yes, scrollbars = yes, left = 0, top = 0, width = '+ (screen. availWidth-10) + ', height =' + (screen. availHeight-50 ));
}
}
$ (Document). ready (function (){
$ ('# Calendar'). fullCalendar ({
Header :{
Left: 'prev, next today ',
Center: 'title ',
Right: 'month, basicWeek, basicday'
},
MonthNames: ["may", "may ", "August October", "August November", "August December"],
MonthNamesShort: ["August", "August ", "August October", "August November", "August December"],
DayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
DayNamesShort: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
Today: ["today"],
// FirstDay: 1,
ButtonText :{
Prev: 'preput ',
Next: 'Next page ',
PrevYear: 'last year ',
NextYear: 'Year ',
Today: 'day ',
Month: 'month ',
Week: 'Week ',
Day: 'day'
},
Editable: false,
CurrentTimezone: 'Asia/Beijing ',
Loading: function (bool ){
If (bool) $ ('# loading'). show ();
Else $ ('# loading'). hide ();
},
Events: "Ajax/AjaxCalendar. asmx/GetRecordNote ",
EventClick: function (ev ){
OpenUrl (ev. id );
// Alert (ev. id );
},
EventMouseover: function (event, jsEvent, view ){
Border (this).css ('border-color', 'red ');
},
EventMouseout: function (event, jsEvent, view ){
Border (this).css ('border-color', 'blue ');
}
});
});
</Script>
</Head>
<Body>
<Div id = 'calendar 'style = ""> </div>
</Body>
</Html>
Data returned from the background:
[Csharp]
/// <Summary>
/// Return the calendar format content
/// </Summary>
/// <Param name = "start"> </param>
/// <Param name = "end"> </param>
[WebMethod]
Public void GetRecordNote (string start, string end)
{
MyOraComm. ConnForOracle cfo = new MyOraComm. ConnForOracle ("dbf_connstr ");
Cfo. OpenConn ();
String SQL = "select id as \" id \ ", GET_DEPANAME (t. depa) as \ "title \", to_char (t. rq, 'yyyy-mm-dd') AS \ "start \" from record_note t "+
"Where to_char (rq, 'yyyymmdd')> = '" + TimeStamp. GetTime (start). ToString ("yyyyMMdd") + "' and" +
"To_char (rq, 'yyyymmdd') <= '" + TimeStamp. GetTime (end). ToString ("yyyyMMdd") + "'" +
"Order by t. depa ";
DataTable dt = cfo. ReturnDataSet (SQL, "RECORD_NOTE"). Tables [0];
String data = JsonHelper. DataToJson (dt );
Cfo. CloseConn ();
Context. Response. Write (data );
}
The returned format is as follows (note that the format must be strictly json, id, title, start, and so on are all the event attributes required by fullcalendar, and other attributes such as end are returned as needed ):
[Plain]
[{"Id": "2", "title": "company leader", "start": "2012-08-15" },{ "id": "5 ", "title": "General Manager Work Department Information Class", "start": "2012-08-17" },{ "id": "20", "title": "General Manager Work Department Information Class ", "start": "2012-08-28" },{ "id": "15", "title": "Information Class of the general manager's Work Department", "start": "2012-08-24 "}, {"id": "18", "title": "General Manager Work Department Information Class", "start": "2012-08-27" },{ "id": "3 ", "title": "General Manager Work Department Information Class", "start": "2012-08-15" },{ "id": "8", "title": "General Manager Work Department Information Class ", "start": "2012-08-21" },{ "id": "11", "title": "Information Class of the general manager's Work Department", "start": "2012-08-23 "}, {"id": "1", "title": "General Manager Work Department Information Class", "start": "2012-08-14" },{ "id": "4 ", "title": "General Manager Work Department Information Class", "start": "2012-08-16" },{ "id": "10", "title": "General Manager Work Department Information Class ", "start": "2012-08-22" },{ "id": "7", "title": "Information Class of the general manager's Work Department", "start": "2012-08-20 "}, {"id": "16", "title": "General Class", "start": "2012-08-25" },{ "id": "9", "title ": "general class", "start": "2012-08-21" },{ "id": "17", "title": "General Class", "start ": "2012-08-26" },{ "id": "13", "title": "General Class", "start": "2012-08-23" },{ "id ": "12", "title": "General Class", "start": "2012-08-22" },{ "id": "6", "title": "General Class ", "start": "2012-08-20" },{ "id": "14", "title": "General Class", "start": "2012-08-24 "}, {"id": "19", "title": "General Class", "start": "2012-08-27" },{ "id": "21", "title ": "Comprehensive Course", "start": "2012-08-28"}]
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
