The calendar Wijmo widget, referred to as wijcalendar, is one of the most straightforward widgets available. The wijcalendar object is a Wijmo calendar with customizable properties and configurations.
Here's a simple code that will generate a
wijcalendarobject:<html> <head> <!--jQuery References--> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js" type="text/javascript"></script> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.0.0.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function () { $("#myWijCalendar").wijcalendar( { easing: "easeInQuad" } ); }); </script> <body> <div id="myWijCalendar" class="ui-widget ui-widget-content ui-corner-all" style="width: 500px;height: 300px"> </div> </body> </html>From the preceding script we target the
#myWijCalendarobject in the DOM, and callwijcalendar, which initializes the calendar widget and supplies"easeInQuad"to the easing property.Assuming there are no mistakes in the code, we should have a calendar widget that is similar to this:
For a list of common options that will help customize the wijcalendar object further, visit http://wijmo.com/wiki/index.php/Calendar.