Calendar (calendars)

This lesson focuses on the use of the Canlendar (Calendar) component in Easyui, which does not depend on its
His component.
A Load mode
Class Load Mode
<div id= "box" class= "Easyui-calendar"
Style= "width:200px;height:200px;" ></div>
JS Load Call
$ (' #box '). Calendar ({
});

Two Property List

property settings
$ (' #box '). Calendar ({
WIDTH:200,
HEIGHT:200,
Fit:false,
Border:false,
firstday:0,
Weeks: [' s ', ' M ', ' t ', ' W ', ' t ', ' F ', ' s '],
Months: [' Jan ', ' Feb ', ' Mar ', ' Apr ', ' may ', ' June ', ' Jul ', ' April ',
' Sep ', ' Oct ', ' Nov ', ' Dec ',
year:2012,
Month:6,
Current:new Date (2014,7,1),
Formatter:function (date) {
Return ' # ' + date.getdate ();
},
Styler:function (date) {
if (date.getday () = = 1) {
Return ' Background-color: #ccc ';
}
},
Validator:function (date) {
if (date.getday () = = 1) {
return true;
} else {
return false;
}
},
});

Three Event List

Event List
$ (' #box '). Calendar ({
Onselect:function (date) {
Alert (date.getfullyear () + ":" + (Date.getmonth () + 1) + ":"
+ date.getdate ());
},

Onchange:function (Newdate, olddate) {
Alert (newdate + ' | ' + olddate);
},
});

Four Method List

Return Property Object
Console.log ($ (' #box '). Calendar (' options '));
Adjust the calendar size
$ (' #box '). Calendar (' resize ');
Move to a specified date
$ (' #box '). Calendar (' MoveTo ', New Date (2015,1,1));
PS: We can use $.fn.calendar.defaults to override the default value object.

Calendar (calendars)