persiandate-picker
Version:
Jalali Calendar Date picker
204 lines (180 loc) • 10.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Source: monthgrid-view.js</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Source: monthgrid-view.js</h1>
<section>
<article>
<pre class="prettyprint source"><code>'use strict';
/**
* @desc Instantiate in {@link ClassMonthGrid}
* @class ViewsMonthGrid
* @memberOf ClassMonthGrid
* @type {{cssClass: {main: string, header: string, headerTitle: string, headerRow: string, headerRowCell: string, daysTable: string, currentMonth: string, today: string, selected: string}, views: {default: {render: render, renderDays: renderDays}}}}
*/
var ViewsMonthGrid = {
/**
* @memberOf ClassMonthGrid.ViewsMonthGrid
* @desc cssClass {string}
* @prop main {string}
* @prop header {string}
* @prop headerTitle {string}
* @prop headerRow {string}
* @prop headerRowCell {string}
* @prop daysTable {string}
* @prop currentMonth {string}
* @prop today {string}
* @prop selected {string}
* @prop disbaled {string}
*/
cssClass: {
main: "month-grid-box",
header: "header",
headerTitle: "title",
headerRow: "header-row",
headerRowCell: "header-row-cell",
daysTable: "table-days",
currentMonth: "current-month",
today: "today",
selected: 'selected',
disbaled: 'disabled'
},
/**
* @memberOf ClassMonthGrid.ViewsMonthGrid
* @desc views
*/
views: {
"default": {
/**
*
* @param self
*/
render: function (self) {
self.viewData = {
css: self.cssClass
};
self.element = $.tmplMustache(TEMPLATE.monthGrid, self.viewData).appendTo(self.container);
self.header = self.createElementByClass(self.cssClass.header);
self.headerRow = self.createElementByClass(self.cssClass.headerRow);
var weekDay;
for (weekDay in self.weekRange) {
$("<div/>").text(self.weekRange[weekDay].abbr.fa).addClass(self.cssClass.headerRowCell).appendTo(self.headerRow)[0];
}
;
self.daysBox = self.createElementByClass(self.cssClass.daysTable);
this.renderDays(self);
},
/**
*
* @param self
*/
renderDays: function (self) {
self._updateState();
self.daysList = [];
var addSpan = function (day, month, year, cssClass) {
var dayPartUnixTime = new persianDate([year, month, day]).valueOf();
var span = $("<span/>")
.text(self._formatDigit(day))
.attr("unixDate", dayPartUnixTime)
.data({ day: day, month: month, year: year, unixDate: dayPartUnixTime})
.addClass(cssClass)
.appendTo($(this))[0];
self.daysList.push(span);
}
var t = new persianDate();
self.daysCount = t.daysInMonth(self.state.year, self.state.month);
self.firstWeekDayOfMonth = t.getFirstWeekDayOfMonth(self.state.year, self.state.month);
var currentMonthIndex = 1;
var nextMonthIndex = 1;
$(self.daysBox).find("td").each(function (index) {
$(this).empty();
if (self.firstWeekDayOfMonth > 1 && index + 1 < self.firstWeekDayOfMonth) {
if (self.state.month === 1) {
var prevMonth = 12;
var prevYear = parseInt(self.state.year) - 1;
} else {
var prevMonth = parseInt(self.state.month) - 1;
var prevYear = parseInt(self.state.year);
}
var prevMonthDaysCount = t.daysInMonth(prevYear, prevMonth);
var day = parseInt((prevMonthDaysCount - self.firstWeekDayOfMonth) + (index + 2));
addSpan.apply(this, [day, prevMonth, prevYear, "other-month"])
} else if (index + 2 === (currentMonthIndex + self.firstWeekDayOfMonth) && currentMonthIndex <= self.daysCount) {
var day = currentMonthIndex;
addSpan.apply(this, [day, parseInt(self.state.month), parseInt(self.state.year)])
currentMonthIndex++;
} else {
if (self.state.month === 12) {
var nextMonth = 1;
var nextYear = parseInt(self.state.year) + 1;
} else {
var nextMonth = parseInt(self.state.month) + 1;
var nextYear = self.state.year;
}
var day = nextMonthIndex;
addSpan.apply(this, [day, nextMonth, nextYear, "other-month"]);
nextMonthIndex += 1;
}
var thisUnix = $(this).children("span").data("unixDate");
if (self.datepicker.state._filetredDate) {
if (self.minDate && self.maxDate) {
if (thisUnix >= self.minDate && thisUnix <= self.maxDate) {
$(this).addClass(self.cssClass.disbaled);
} else {
$(this).removeClass(self.cssClass.disbaled);
}
} else if (self.minDate) {
if (thisUnix >= self.minDate) {
$(this).addClass(self.cssClass.disbaled);
}
} else if (self.maxDate) {
if (thisUnix <= self.maxDate) {
$(this).removeClass(self.cssClass.disbaled);
}
}
} else {
if (self.datepicker.checkDate(thisUnix)) {
$(this).removeClass(self.cssClass.disbaled);
} else {
$(this).addClass(self.cssClass.disbaled);
}
}
});
$(self.daysBox).find("td").not('.disabled').children("span").click(function () {
var $thisUnixDate = $(this).data("unixDate");
self.raiseEvent("selectDay", [$thisUnixDate]);
return false;
});
$(self.daysBox).find('td.disabled').children("span").click(function () {
return false;
});
self.raiseEvent("reRender");
}
}
}
};</code></pre>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="ClassBase.html">ClassBase</a></li><li><a href="ClassDatepicker.html">ClassDatepicker</a></li><li><a href="ClassDatepicker.ClassCompat.html">ClassCompat</a></li><li><a href="ClassDatepicker.ClassConfig.html">ClassConfig</a></li><li><a href="ClassDatepicker.ViewsDatePicker.html">ViewsDatePicker</a></li><li><a href="ClassDatepickerState.html">ClassDatepickerState</a></li><li><a href="ClassDayPicker.html">ClassDayPicker</a></li><li><a href="ClassDayPicker.ClassMonthGrid.html">ClassMonthGrid</a></li><li><a href="ClassMonthGrid.ViewsMonthGrid.html">ViewsMonthGrid</a></li><li><a href="ClassMonthPicker.html">ClassMonthPicker</a></li><li><a href="ClassNavigator.html">ClassNavigator</a></li><li><a href="ClassSprite.html">ClassSprite</a></li><li><a href="ClassTimePicker.html">ClassTimePicker</a></li><li><a href="ClassToolbox.html">ClassToolbox</a></li><li><a href="ClassYearPicker.html">ClassYearPicker</a></li><li><a href="TEMPLATE.html">TEMPLATE</a></li></ul><h3>Events</h3><ul><li><a href="ClassDatepicker.ClassConfig.html#.event:onHide">onHide</a></li><li><a href="ClassDatepicker.ClassConfig.html#.event:onSelect">onSelect</a></li><li><a href="ClassDatepicker.ClassConfig.html#.event:onShow">onShow</a></li><li><a href="ClassDatepicker.ClassConfig.html#.navigator#.event:onNext">onNext</a></li><li><a href="ClassDatepicker.ClassConfig.html#.navigator#.event:onPrev">onPrev</a></li><li><a href="ClassDatepicker.ClassConfig.html#.navigator#.event:onSwitch">onSwitch</a></li><li><a href="ClassDatepicker.html#.event:selectDate">selectDate</a></li><li><a href="ClassDatepicker.html#.event:selectDateTime">selectDateTime</a></li><li><a href="ClassDatepicker.html#.event:selectTime">selectTime</a></li></ul><h3>Global</h3><ul><li><a href="global.html#ClassDateRange">ClassDateRange</a></li><li><a href="global.html#delay">delay</a></li><li><a href="global.html#inherit">inherit</a></li><li><a href="global.html#log">log</a></li><li><a href="global.html#range">range</a></li></ul>
</nav>
<br clear="both">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a> on Sun Aug 07 2016 12:06:04 GMT+0430 (Iran Daylight Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>