calendar fixes
This commit is contained in:
medet97
parent
95c54987ae
commit
7c75197eae
|
|
@ -0,0 +1,124 @@
|
|||
/*
|
||||
A simple jQuery function that can add listeners on attribute change.
|
||||
http://meetselva.github.io/attrchange/
|
||||
|
||||
About License:
|
||||
Copyright (C) 2013-2014 Selvakumar Arumugam
|
||||
You may use attrchange plugin under the terms of the MIT Licese.
|
||||
https://github.com/meetselva/attrchange/blob/master/MIT-License.txt
|
||||
*/
|
||||
(function($) {
|
||||
function isDOMAttrModifiedSupported() {
|
||||
var p = document.createElement('p');
|
||||
var flag = false;
|
||||
|
||||
if (p.addEventListener) {
|
||||
p.addEventListener('DOMAttrModified', function() {
|
||||
flag = true
|
||||
}, false);
|
||||
} else if (p.attachEvent) {
|
||||
p.attachEvent('onDOMAttrModified', function() {
|
||||
flag = true
|
||||
});
|
||||
} else { return false; }
|
||||
p.setAttribute('id', 'target');
|
||||
return flag;
|
||||
}
|
||||
|
||||
function checkAttributes(chkAttr, e) {
|
||||
if (chkAttr) {
|
||||
var attributes = this.data('attr-old-value');
|
||||
|
||||
if (e.attributeName.indexOf('style') >= 0) {
|
||||
if (!attributes['style'])
|
||||
attributes['style'] = {}; //initialize
|
||||
var keys = e.attributeName.split('.');
|
||||
e.attributeName = keys[0];
|
||||
e.oldValue = attributes['style'][keys[1]]; //old value
|
||||
e.newValue = keys[1] + ':'
|
||||
+ this.prop("style")[$.camelCase(keys[1])]; //new value
|
||||
attributes['style'][keys[1]] = e.newValue;
|
||||
} else {
|
||||
e.oldValue = attributes[e.attributeName];
|
||||
e.newValue = this.attr(e.attributeName);
|
||||
attributes[e.attributeName] = e.newValue;
|
||||
}
|
||||
|
||||
this.data('attr-old-value', attributes); //update the old value object
|
||||
}
|
||||
}
|
||||
|
||||
//initialize Mutation Observer
|
||||
var MutationObserver = window.MutationObserver
|
||||
|| window.WebKitMutationObserver;
|
||||
|
||||
$.fn.attrchange = function(a, b) {
|
||||
if (typeof a == 'object') {//core
|
||||
var cfg = {
|
||||
trackValues : false,
|
||||
callback : $.noop
|
||||
};
|
||||
//backward compatibility
|
||||
if (typeof a === "function") { cfg.callback = a; } else { $.extend(cfg, a); }
|
||||
|
||||
if (cfg.trackValues) { //get attributes old value
|
||||
this.each(function(i, el) {
|
||||
var attributes = {};
|
||||
for ( var attr, i = 0, attrs = el.attributes, l = attrs.length; i < l; i++) {
|
||||
attr = attrs.item(i);
|
||||
attributes[attr.nodeName] = attr.value;
|
||||
}
|
||||
$(this).data('attr-old-value', attributes);
|
||||
});
|
||||
}
|
||||
|
||||
if (MutationObserver) { //Modern Browsers supporting MutationObserver
|
||||
var mOptions = {
|
||||
subtree : false,
|
||||
attributes : true,
|
||||
attributeOldValue : cfg.trackValues
|
||||
};
|
||||
var observer = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(e) {
|
||||
var _this = e.target;
|
||||
//get new value if trackValues is true
|
||||
if (cfg.trackValues) {
|
||||
e.newValue = $(_this).attr(e.attributeName);
|
||||
}
|
||||
if ($(_this).data('attrchange-status') === 'connected') { //execute if connected
|
||||
cfg.callback.call(_this, e);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return this.data('attrchange-method', 'Mutation Observer').data('attrchange-status', 'connected')
|
||||
.data('attrchange-obs', observer).each(function() {
|
||||
observer.observe(this, mOptions);
|
||||
});
|
||||
} else if (isDOMAttrModifiedSupported()) { //Opera
|
||||
//Good old Mutation Events
|
||||
return this.data('attrchange-method', 'DOMAttrModified').data('attrchange-status', 'connected').on('DOMAttrModified', function(event) {
|
||||
if (event.originalEvent) { event = event.originalEvent; }//jQuery normalization is not required
|
||||
event.attributeName = event.attrName; //property names to be consistent with MutationObserver
|
||||
event.oldValue = event.prevValue; //property names to be consistent with MutationObserver
|
||||
if ($(this).data('attrchange-status') === 'connected') { //disconnected logically
|
||||
cfg.callback.call(this, event);
|
||||
}
|
||||
});
|
||||
} else if ('onpropertychange' in document.body) { //works only in IE
|
||||
return this.data('attrchange-method', 'propertychange').data('attrchange-status', 'connected').on('propertychange', function(e) {
|
||||
e.attributeName = window.event.propertyName;
|
||||
//to set the attr old value
|
||||
checkAttributes.call($(this), cfg.trackValues, e);
|
||||
if ($(this).data('attrchange-status') === 'connected') { //disconnected logically
|
||||
cfg.callback.call(this, e);
|
||||
}
|
||||
});
|
||||
}
|
||||
return this;
|
||||
} else if (typeof a == 'string' && $.fn.attrchange.hasOwnProperty('extensions') &&
|
||||
$.fn.attrchange['extensions'].hasOwnProperty(a)) { //extensions/options
|
||||
return $.fn.attrchange['extensions'][a].call(this, b);
|
||||
}
|
||||
}
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
/*
|
||||
An extension for attrchange jQuery plugin
|
||||
http://meetselva.github.io/attrchange/
|
||||
|
||||
About License:
|
||||
Copyright (C) 2013-2014 Selvakumar Arumugam
|
||||
You may use attrchange ext plugin under the terms of the MIT Licese.
|
||||
https://github.com/meetselva/attrchange/blob/master/MIT-License.txt
|
||||
*/
|
||||
$.fn.attrchange.extensions = { /*attrchange option/extension*/
|
||||
disconnect: function (o) {
|
||||
if (typeof o !== 'undefined' && o.isPhysicalDisconnect) {
|
||||
return this.each(function() {
|
||||
var attrchangeMethod = $(this).data('attrchange-method');
|
||||
if (attrchangeMethod == 'propertychange' || attrchangeMethod == 'DOMAttrModified') {
|
||||
$(this).off(attrchangeMethod);
|
||||
} else if (attrchangeMethod == 'Mutation Observer') {
|
||||
$(this).data('attrchange-obs').disconnect();
|
||||
} else if (attrchangeMethod == 'polling') {
|
||||
clearInterval($(this).data('attrchange-polling-timer'));
|
||||
}
|
||||
}).removeData(['attrchange-method', 'attrchange-status']);
|
||||
} else { //logical disconnect
|
||||
return this.data('attrchange-status', 'disconnected'); //set a flag that prevents triggering callback onattrchange
|
||||
}
|
||||
},
|
||||
remove: function (o) {
|
||||
return $.fn.attrchange.extensions['disconnect'].call(this, {isPhysicalDisconnect: true});
|
||||
},
|
||||
getProperties: function (o) {
|
||||
var attrchangeMethod = $(this).data('attrchange-method');
|
||||
var pollInterval = $(this).data('attrchange-pollInterval');
|
||||
return {
|
||||
method: attrchangeMethod,
|
||||
isPolling: (attrchangeMethod == 'polling'),
|
||||
pollingInterval: (typeof pollInterval === 'undefined')?0:parseInt(pollInterval, 10),
|
||||
status: (typeof attrchangeMethod === 'undefined')?'removed': $(this).data('attrchange-status')
|
||||
}
|
||||
},
|
||||
reconnect: function (o) {//reconnect possible only when there is a logical disconnect
|
||||
return this.data('attrchange-status', 'connected');
|
||||
},
|
||||
polling: function (o) {
|
||||
if (o.hasOwnProperty('isComputedStyle') && o.isComputedStyle == 'true') { /* extensive and slow - polling to check on computed style properties */
|
||||
return this.each(function(i, _this) {
|
||||
if (!o.hasOwnProperty('properties') ||
|
||||
Object.prototype.toString.call(o.properties) !== '[object Array]' ||
|
||||
o.properties.length == 0) { return false; } //return if no properties found
|
||||
var attributes = {}; //store computed properties
|
||||
for (var i = 0; i < o.properties.length; i++) {
|
||||
attributes[o.properties[i]] = $(this).css(o.properties[i]);
|
||||
}
|
||||
var _this = this;
|
||||
$(this).data('attrchange-polling-timer', setInterval(function () {
|
||||
var changes = {}, hasChanges = false; // attrName: { oldValue: xxx, newValue: yyy}
|
||||
for (var comuptedVal, i = 0; i < o.properties.length; i++){
|
||||
comuptedVal = $(_this).css(o.properties[i]);
|
||||
if (attributes[o.properties[i]] !== comuptedVal) {
|
||||
hasChanges = true;
|
||||
changes[o.properties[i]] = {oldValue: attributes[o.properties[i]], newValue: comuptedVal};
|
||||
attributes[o.properties[i]] = comuptedVal //add the attribute to the orig
|
||||
}
|
||||
}
|
||||
if (hasChanges && $(_this).data('attrchange-status') === 'connected') { //disconnected logically
|
||||
o.callback.call(_this, changes);
|
||||
}
|
||||
}, (o.pollInterval)?o.pollInterval: 1000)).data('attrchange-method', 'polling').data('attrchange-pollInterval', o.pollInterval).data('attrchange-status', 'connected');
|
||||
});
|
||||
} else {
|
||||
return this.each(function(i, _this) { /* this one is programmatic polling */
|
||||
var attributes = {};
|
||||
for (var attr, i=0, attrs=_this.attributes, l=attrs.length; i<l; i++){
|
||||
attr = attrs.item(i);
|
||||
attributes[attr.nodeName] = attr.nodeValue;
|
||||
}
|
||||
$(_this).data('attrchange-polling-timer', setInterval(function () {
|
||||
var changes = {}, hasChanges = false; // attrName: { oldValue: xxx, newValue: yyy}
|
||||
for (var attr, i=0, attrs=_this.attributes, l=attrs.length; i<l; i++){
|
||||
attr = attrs.item(i);
|
||||
if (attributes.hasOwnProperty(attr.nodeName) &&
|
||||
attributes[attr.nodeName] != attr.nodeValue) { //check the values
|
||||
changes[attr.nodeName] = {oldValue: attributes[attr.nodeName], newValue: attr.nodeValue};
|
||||
hasChanges = true;
|
||||
} else if (!attributes.hasOwnProperty(attr.nodeName)) { //new attribute
|
||||
changes[attr.nodeName] = {oldValue: '', newValue: attr.nodeValue};
|
||||
hasChanges = true;
|
||||
}
|
||||
attributes[attr.nodeName] = attr.nodeValue; //add the attribute to the orig
|
||||
}
|
||||
if (hasChanges && $(_this).data('attrchange-status') === 'connected') { //disconnected logically
|
||||
o.callback.call(_this, changes);
|
||||
}
|
||||
}, (o.pollInterval)?o.pollInterval: 1000)).data('attrchange-method', 'polling').data('attrchange-pollInterval', o.pollInterval).data('attrchange-status', 'connected');
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
@font-face {
|
||||
src: url(../web/open-sans/regular.ttf);
|
||||
font-family: 'Open-Sans-Regular';
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: 'Open-Sans-Regular';
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: 15px auto;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.container-calendar {
|
||||
padding: 15px;
|
||||
max-width: 475px;
|
||||
margin: 0 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.button-container-calendar button {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
zoom: 1.5;
|
||||
background: #00a2b7;
|
||||
color: #fff;
|
||||
border: 1px solid #0aa2b5;
|
||||
border-radius: 4px;
|
||||
padding: 5px 10px;
|
||||
top: 10px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.table-calendar {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border-top: 1px solid lightblue;
|
||||
}
|
||||
|
||||
.table-calendar td, .table-calendar th {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#monthHeader {
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
margin: 0;
|
||||
font-size: 24pt;
|
||||
}
|
||||
|
||||
#yearHeader {
|
||||
margin: 0 0 10px;
|
||||
padding: 0 3px;
|
||||
font-size: 12pt;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.date-picker.selected {
|
||||
font-weight: bold;
|
||||
outline: 1px solid #00BCD4;
|
||||
}
|
||||
|
||||
.date-picker.selected span {
|
||||
color: #00BCD4;
|
||||
}
|
||||
|
||||
/* sunday */
|
||||
.date-picker:nth-child(1), .red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* friday */
|
||||
.date-picker:nth-child(6) {
|
||||
color: green;
|
||||
}
|
||||
|
||||
#monthAndYear {
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.button-container-calendar {
|
||||
position: relative;
|
||||
margin-bottom: 1em;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#previous {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#next {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.footer-container-calendar {
|
||||
margin-top: 1em;
|
||||
border-top: 1px solid #dadada;
|
||||
padding: 10px 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer-container-calendar select {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
background: #ffffff;
|
||||
color: #585858;
|
||||
border: 1px solid #bfc5c5;
|
||||
border-radius: 3px;
|
||||
padding: 5px 1em;
|
||||
}
|
||||
|
||||
#date-picked {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
border-top: 1px solid lightblue;
|
||||
padding-top: 15px;
|
||||
font-size: 11pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
var today = new Date();
|
||||
var currentMonth = today.getMonth();
|
||||
var currentYear = today.getFullYear();
|
||||
var selectYear = document.getElementById("year");
|
||||
var selectMonth = document.getElementById("month");
|
||||
var monthHeader = document.getElementById("monthHeader");
|
||||
var yearHeader = document.getElementById("yearHeader");
|
||||
var nextBtn = document.getElementById("next");
|
||||
var previousBtn = document.getElementById("previous");
|
||||
var datePicked = document.getElementById("date-picked");
|
||||
var months = "";
|
||||
var days = "";
|
||||
var monthsArr = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
||||
var daysArr = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||
|
||||
months = monthsArr;
|
||||
days = daysArr;
|
||||
|
||||
var tableHeaderMonth = document.getElementById("thead-month");
|
||||
var dataHead = "<tr>";
|
||||
var startDay = "";
|
||||
|
||||
for (dhead in days) {
|
||||
days[dhead] === "Sun" ? startDay = "red-text" : startDay = "";
|
||||
dataHead += "<th data-days='" + days[dhead] + "' class='" + startDay + "'>" + days[dhead] + "</th>";
|
||||
}
|
||||
|
||||
dataHead += "</tr>";
|
||||
tableHeaderMonth.innerHTML = dataHead;
|
||||
showCalendar(currentMonth, currentYear);
|
||||
|
||||
nextBtn.addEventListener("click", next, false);
|
||||
previousBtn.addEventListener("click", previous, false);
|
||||
|
||||
function yearRange(start, end) {
|
||||
var years = "";
|
||||
|
||||
for (var year = start; year <= end; year++) {
|
||||
years += "<option value='" + year + "'>" + year + "</option>";
|
||||
}
|
||||
|
||||
return years;
|
||||
}
|
||||
|
||||
var createYear = yearRange(1970, 2050);
|
||||
selectYear.innerHTML = createYear;
|
||||
|
||||
function next() {
|
||||
currentYear = currentMonth === 11 ? currentYear + 1 : currentYear;
|
||||
currentMonth = (currentMonth + 1) % 12;
|
||||
showCalendar(currentMonth, currentYear);
|
||||
}
|
||||
|
||||
function previous() {
|
||||
currentYear = currentMonth === 0 ? currentYear - 1 : currentYear;
|
||||
currentMonth = currentMonth === 0 ? 11 : currentMonth - 1;
|
||||
showCalendar(currentMonth, currentYear);
|
||||
}
|
||||
|
||||
function jump() {
|
||||
currentYear = parseInt(selectYear.value);
|
||||
currentMonth = parseInt(selectMonth.value);
|
||||
showCalendar(currentMonth, currentYear);
|
||||
}
|
||||
|
||||
function showCalendar(month, year) {
|
||||
var firstDay = new Date(year, month).getDay();
|
||||
var monthString = monthsArr[month];
|
||||
|
||||
table = document.getElementById("calendar-body");
|
||||
table.innerHTML = "";
|
||||
monthHeader.innerHTML = monthString.substring(0, 3);
|
||||
yearHeader.innerHTML = year;
|
||||
selectYear.value = year;
|
||||
selectMonth.value = month;
|
||||
|
||||
var date = 1;
|
||||
|
||||
for (var i = 0; i < 6; i++ ) {
|
||||
var row = document.createElement("tr");
|
||||
|
||||
for (var j = 0; j < 7; j++) {
|
||||
if (i === 0 && j < firstDay) {
|
||||
cell = document.createElement("td");
|
||||
cellText = document.createTextNode("");
|
||||
cell.appendChild(cellText);
|
||||
row.appendChild(cell);
|
||||
} else if (date > daysInMonth(month, year)) {
|
||||
break;
|
||||
} else {
|
||||
cell = document.createElement("td");
|
||||
cell.setAttribute("data-date", date);
|
||||
cell.setAttribute("data-month", month + 1);
|
||||
cell.setAttribute("data-year", year);
|
||||
cell.setAttribute("data-month-name", months[month]);
|
||||
cell.className = "date-picker";
|
||||
cell.innerHTML = "<span>" + date + "</span>";
|
||||
cell.onclick = function(event) {
|
||||
var dates = document.querySelectorAll(".date-picker");
|
||||
var currentTarget = event.currentTarget;
|
||||
var date = currentTarget.dataset.date;
|
||||
var month = currentTarget.dataset.month - 1;
|
||||
var year = currentTarget.dataset.year;
|
||||
|
||||
for (var i = 0; i < dates.length; i++) {
|
||||
dates[i].classList.remove("selected");
|
||||
}
|
||||
|
||||
currentTarget.classList.add("selected");
|
||||
datePicked.innerHTML = date + " " + monthsArr[month] + " " + year;
|
||||
}
|
||||
|
||||
if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
|
||||
cell.className = "date-picker selected";
|
||||
}
|
||||
|
||||
row.appendChild(cell);
|
||||
date++;
|
||||
}
|
||||
}
|
||||
|
||||
table.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
function daysInMonth(month, year) {
|
||||
return 32 - new Date(year, month, 32).getDate();
|
||||
}
|
||||
Binary file not shown.
|
|
@ -52,7 +52,7 @@
|
|||
</script>
|
||||
|
||||
<script type="text/javascript"
|
||||
src="https://raw.github.com/meetselva/attrchange/master/attrchange.js"></script>
|
||||
src="{{ asset('vendor/attrchange/js/attrchange.js') }}"></script>
|
||||
<script>
|
||||
$('.gj-picker-bootstrap').attrchange({
|
||||
trackValues: true, /* Default to false, if set to true the event object is
|
||||
|
|
|
|||
Loading…
Reference in New Issue