Documentation (jquery.szCalendar.js)

Step1 . Add the following markup to your document <head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script type="text/javascript" src="jquery1.9.1.js"></script> <script type="text/javascript" src="jquery.browser.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="szExtRelStartPosition.js"></script> <script type="text/javascript" src="jquery.szCalendar.js"></script>
Step2 . Add the following markup to your document <body>
<input type="text" name="mydate" id="mydate" size="10" maxlength="10">
Step3 . Add the following markup to your document <head>
<script> $(document).ready(function(){ $("#mydate").szCalendar(); }); </script>
Optional Parameters
property default Description
useShowButton true Whether image to use to display the szCalendar is shown
showButtonImg img/szCalendar/calendar.gif A URL of an image to use to display the szCalendar
cellWidth 30 The width of table cell
cellHeight 20 The height of table cell
separator - The delimiter of year and month and day
dayName eng DayName language : eng, kor ,han
pastYearMax 50 Past year max gap
futureYearMax 50 Future year max gap
prevTextIcon < The text of prev year and prev month
nextTextIcon > The text of next year and next month
useImgIcon false Whether or not to use image to display prev year and next year and prev year and prev month
prevImgIcon img/szCalendar/icon_prev_@skin@.gif The url of prev-icon
nextImgIcon img/szCalendar/icon_next_@skin@.gif The url of next-icon
useBackgroundImage true Whether or not to use a date cell background image
backgroundUrl img/szCalendar/white_icon_s3020.png The url of date cell background image
useCellPosEffect true Whether or not to use cell movement effect
useRndCloseEffect true Whether or not to use random effect when closing
otherTargets [] Additional input box's selector string
unableDaysOfWeek [] Unselectable Day of Week Array
unableDates [] Unselectable Date Array
skin gray The skin name : sky, gray, teal, brown, purple. You can add other skin to var skinObj, and use it.
Usage1
$(document).ready(function(){ $("selector").szCalendar(); });
Usage2
$(document).ready(function(){ $("selector").szCalendar({skin:"sky",useShowButton:false}); });
Usage3
$(document).ready(function(){ $(".mydate").szCalendar(); }); <input type="text" name="from_dt" class="mydate" data-cfg='{"skin":"purple","unableDaysOfWeek":[0,6],"useCellPosEffect":false}'> <input type="text" name="to_dt" class="mydate" data-cfg='{"skin":"brown","unableDaysOfWeek":[6],"useCellPosEffect":false}'>