<html>
<head>
<meta http-eqyiv="Content-Type" Content="text/html;charset UTF-8"/>
<meta http-equiv="content-language" content="ru">
<link rel="stylesheet" type="text/css" href="../www/css/calendarStyle.css"/>
<title>Calendar Test</title>
<style type="text/css"></style>
</head>
<body>
<div class="calendar-header">
<button class="open-button" onclick="openForm()">Добавить</button>
<button class="open-button" onclick="window.location.reload()">Обновить</button>
<input type="text" class="search" placeholder="Событие, дата, участник">
<div class="form-popup" id="myForm">
<form action="#" class="form-container">
<label for="name" for="date" for="info"><b></b></label>
<input type="text" class='inputEnter' placeholder="Событие и дата" name="name" required pattern="[A-Za-z A-Za-z 0-31.0-12.0-3000 ">
<button type="submit" id="btnFast" class="btn">Готово</button>
<button type="button" class="btn cancel" onclick="closeForm()">Закрыть</button>
</form>
</div>
</div>
<div class="modal">
<h1>Создать событие</h1>
<form id="formContainer" >
<label for="eventName">
<input type="text" class="textType" id="eventName" placeholder="Событие"><br>
</label>
<label for="eventDate">
<input type="date" class="textType" id="eventDate" placeholder="Дата" ><br>
</label>
<label for="eventMember">
<input type="text" class="textType" id="eventMember" placeholder="Участник"><br>
</label>
<label for="textArea">
<textarea id="textArea" placeholder="Описание" cols="20" rows="5"></textarea><br>
</label>
</form>
<input id="btnsubmit" type="button" value="Готово" class="submitType"/>
<input type="button" class="submitType" style="display: none" value="Редактировать">
<input type="reset" class="submitType" onclick="resetForm();" >
</div>
<div id="calendar_table"></div>
<script type="text/javascript" src="../www/js/CalendarJS.js"></script>
</body>
</html>
(function(){
var applicant = {
eventName : "",
eventDate : "",
eventMember : "",
textArea : ""
};
var storageLogic = {
saveItem: function(){
var lscount = localStorage.length;
var inputs = document.getElementById("formContainer");
applicant.eventName = inputs[0].value;
applicant.eventDate = inputs[1].value;
applicant.eventMember = inputs[2].value;
applicant.textArea = inputs[3].value;
localStorage.setItem("applicant_"+ lscount, JSON.stringify(applicant));
location.reload();
},
loaddata: function() {
var datacount = localStorage.length;
if (datacount > 0)
{
var render = document.getElementById('tdID').onclick = calendar.selectDate();
for (i=0; i < datacount; i++) {
var key = localStorage.key(i);
var applicant = localStorage.getItem(key);
var data = JSON.parse(applicant);
render += data.eventName+'<br>';
render += data.eventDate+'<br>';
render += data.eventMember+'<br>';
render += data.textArea+'<br>
}
var newTable = document.getElementById("tdID");
newTable.innerHTML = render;
}
}
};
window.onload = function() {
storageLogic.loaddata();
var btnsubmit = document.getElementById('btnsubmit');
btnsubmit.addEventListener('click', storageLogic.saveItem, false);
};
})();
function resetForm(){
document.getElementById('formContainer').reset();
}
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
window.onclick = function ( event ){
if(event.target == document.getElementById("myForm")){
document.getElementById("myForm").style.display = 'none'
}
}
calendar = {};
// Названия месяцев
calendar.monthName=[
'Январь', 'Февраль', 'Март', 'Апрель',
'Май', 'Июнь', 'Июль', 'Август',
'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
];
// Названия дней недели
calendar.dayName=[
'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'
];
// Выбранная дата
calendar.selectedDate = {
'Day' : null,
'Month' : null,
'Year' : null
};
// ID элемента для размещения календарика
calendar.elementId=null;
// Выбор даты
calendar.selectDate = function myFunc(day,month,year) {
calendar.selectedDate={
'Day' : day,
'Month' : month,
'Year' : year
};
openWin();
(function (){
var date = new Date ().toISOString().substring(0,10),
field = document.querySelector ('#date');
field.value = date;
console.log(field.value);
})
}
// Отрисовка календарика на выбранный месяц и год
calendar.drawCalendar = function(month,year) {
var tmp='';
tmp+='<table class="calendar" cellspacing="2" cellpadding="2">';
// Месяц и навигация
tmp+='<tr>';
tmp+='<td class="navigation" '+
'onclick="calendar.drawCalendar('+(month>1?(month-1):12)+
','+(month>1?year:(year-1))+');">◄<\/td>';
tmp+='<td colspan="5" class="navigation" '+
'onclick="calendar.drawCalendar('+
calendar.selectedDate.Month+','+
calendar.selectedDate.Year+');">'+
calendar.monthName[(month-1)]+' - '+year+'<\/td>';
tmp+='<td class="navigation" '+
'onclick="calendar.drawCalendar('+(month<12?(month+1):1)+
','+(month<12?year:(year+1))+');">►<\/td>';
tmp+='<\/tr>';
// Шапка таблицы с днями недели
tmp+='<tr>';
tmp+='<th>'+calendar.dayName[0]+'<\/th>';
tmp+='<th>'+calendar.dayName[1]+'<\/th>';
tmp+='<th>'+calendar.dayName[2]+'<\/th>';
tmp+='<th>'+calendar.dayName[3]+'<\/th>';
tmp+='<th>'+calendar.dayName[4]+'<\/th>';
tmp+='<th class="holiday">'+calendar.dayName[5]+'<\/th>';
tmp+='<th class="holiday">'+calendar.dayName[6]+'<\/th>';
tmp+='<\/tr>';
// Количество дней в месяце
var total_days = 32 - new Date(year, (month-1), 32).getDate();
// Начальный день месяца
var start_day = new Date(year, (month-1), 1).getDay();
if (start_day==0) { start_day=7; }
start_day--;
// Количество ячеек в таблице
var final_index=Math.ceil((total_days+start_day)/7)*7;
var day=1;
var index=0;
do {
// Начало строки таблицы
if (index%7==0) {
tmp+='<tr>';
}
// Пустые ячейки до начала месяца или после окончания
if ((index<start_day) || (index>=(total_days+start_day))) {
tmp+='<td class="grayed"> <\/td>';
}
else {
var class_name='';
// Выбранный день
if (calendar.selectedDate.Day==day &&
calendar.selectedDate.Month==month &&
calendar.selectedDate.Year==year) {
class_name='selected';
}
// Ячейка с датой
tmp+='<td id="tdID" class="'+class_name+'" '+
'onclick="calendar.selectDate('+
day+','+month+','+year+');">'+day+'<\/td>';
day++;
}
// Конец строки таблицы
if (index%7==6) {
tmp+='<\/tr>';
}
index++;
}
while (index<final_index);
tmp+='<\/table>';
// Вставить таблицу календарика на страницу
var el=document.getElementById(calendar.element_id);
if (el) {
el.innerHTML=tmp;
}
}
// ID элемента для размещения календарика
calendar.element_id = 'calendar_table';
// По умолчанию используется текущая дата
calendar.selectedDate={
'Day' : new Date().getDate(),
'Month' : parseInt(new Date().getMonth())+1,
'Year' : new Date().getFullYear()
};
// Нарисовать календарик
calendar.drawCalendar(
calendar.selectedDate.Month,
calendar.selectedDate.Year
);
document.createElement('input')
var modal = document.querySelector('.modal');
var overflow = document.createElement('div');
function openWin() {
overflow.className = "overflow";
document.body.appendChild(overflow);
var height = modal.offsetHeight;
modal.style.marginTop = - height / 2 + "px";
modal.style.top = "50%";
}
if (!Element.prototype.remove) {
Element.prototype.remove = function remove() {
if (this.parentNode) {
this.parentNode.removeChild(this);
}
};
}
overflow.onclick = function () {
modal.style.top = "-100%";
overflow.remove();
}
