|
помогите доработать календарь
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>тест-календарь</title>
<style>
table {
border-collapse: separate;
width: 300px;
padding: 1px;
}
table, th, td {
border: 1px solid #c0c0c0;
margin: 1px;
}
td {
text-align: center;
}
.wrapper {
margin-top: 20px;
}
.anotherMonthWeek {
background-color: #ffffff;
color: #00bfff;
}
.anotherMonthWeekEnd {
background-color: #ffffff;
color: #f08080;
}
.currentMonthWeek {
background-color: #fff0f5;
color: #0000cd;
}
.currentMonthWeekEnd {
background-color: #ffb6c1;
color: #dc143c;
}
.currentMonthWeekToday {
background-color: #0000cd;
color: #fff0f5;
}
.currentMonthWeekEndToday {
background-color: #dc143c;
color: #ffb6c1;
}
</style>
</head>
<body>
<form name="formDate">
<label for="inpDate">Укажите дату:</label>
<input type="date" id="inpDate" name="inpDate">
</form>
<div class="wrapper" id="wrapper"></div>
<script>
var wrapper = document.getElementById("wrapper");
var form = document.forms.formDate;
if(wrapper && form){
form.addEventListener('change', function(event){
var date = form.inpDate.valueAsDate;
if(date){
date.setDate(1);
date.setHours(0);
date.setSeconds(0);
date.setMilliseconds(0);
var date2 = new Date(date.getTime());
var month = date.getMonth();
while(date.getDay() != 1){ date.setDate(date.getDate()-1); }
date2.setMonth(date2.getMonth()+1);
date2.setDate(1);
date2.setHours(0);
date2.setSeconds(0);
date2.setMilliseconds(0);
var trs = Math.ceil((date2-date)/1000/3600/24/7)+1;
var table = document.createElement('table');
var i = 0;
var daysPerWeek = 7;
while(i<trs){
var tr = document.createElement('tr');
if(i == 0){
for(var j=0; j<daysPerWeek; j++){
var th = document.createElement('th');
th.innerText = getShortNameOfDay(j);
tr.appendChild(th);
}
table.appendChild(tr);
}
else{
for(var j=0; j<daysPerWeek; j++){
var td = document.createElement('td');
if(date.getMonth() == month){
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "currentMonthWeekEnd";
}
else{
td.className = "currentMonthWeek";
}
}
else {
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "anotherMonthWeekEnd";
}
else{
td.className = "anotherMonthWeek";
}
}
td.innerText = date.getDate();
date.setDate(date.getDate() + 1);
tr.appendChild(td);
table.appendChild(tr);
}
}
i++;
}
wrapper.innerHTML = "";
wrapper.appendChild(table);
}
});
form.inpDate.valueAsDate = new Date();
var event = new Event('change');
form.dispatchEvent(event);
}
function getShortNameOfDay(x){
var name = "xx";
switch(x){
case 0: name = "Пн"; break;
case 1: name = "Вт"; break;
case 2: name = "Ср"; break;
case 3: name = "Чт"; break;
case 4: name = "Пт"; break;
case 5: name = "Сб"; break;
case 6: name = "Вс";
}
return name;
}
</script>
</body>
</html>
|
надо подсветить дни недели, сегодн число и сегодн день недели
|
Блондинка,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>тест-календарь</title>
<style>
table {
border-collapse: separate;
width: 300px;
padding: 1px;
}
table, th, td {
border: 1px solid #c0c0c0;
margin: 1px;
}
td {
text-align: center;
}
.wrapper {
margin-top: 20px;
}
.anotherMonthWeek {
background-color: #ffffff;
color: #00bfff;
}
.anotherMonthWeekEnd {
background-color: #ffffff;
color: #f08080;
}
.currentMonthWeek {
background-color: #fff0f5;
color: #0000cd;
}
.currentMonthWeekEnd {
background-color: #ffb6c1;
color: #dc143c;
}
.currentMonthWeekToday {
background-color: #0000cd;
color: #fff0f5;
}
.currentMonthWeekEndToday {
background-color: #dc143c;
color: #ffb6c1;
}
.currentDay{
background-color: #228B22;
color: #FFFFFF;
}
#wrapper th{
background-color: #EEE8AA;
}
#wrapper th.currentDay{
border-bottom: 3px solid #228B22;
color: #000000;
}
</style>
</head>
<body>
<form name="formDate">
<label for="inpDate">Укажите дату:</label>
<input type="date" id="inpDate" name="inpDate">
</form>
<div class="wrapper" id="wrapper"></div>
<script>
var wrapper = document.getElementById("wrapper");
var form = document.forms.formDate;
if(wrapper && form){
form.addEventListener('change', function(event){
var date = form.inpDate.valueAsDate;
if(date){
var current = new Date();
current.setHours(0,0,0,0);
date.setDate(1);
date.setHours(0);
date.setSeconds(0);
date.setMilliseconds(0);
var date2 = new Date(date.getTime());
var month = date.getMonth();
while(date.getDay() != 1){ date.setDate(date.getDate()-1); }
date2.setMonth(date2.getMonth()+1);
date2.setDate(1);
date2.setHours(0);
date2.setSeconds(0);
date2.setMilliseconds(0);
var trs = Math.ceil((date2-date)/1000/3600/24/7)+1;
var table = document.createElement('table');
var i = 0;
var daysPerWeek = 7;
while(i<trs){
var tr = document.createElement('tr');
if(i == 0){
for(var j=0; j<daysPerWeek; j++){
var th = document.createElement('th');
th.innerText = getShortNameOfDay(j);
tr.appendChild(th);
}
table.appendChild(tr);
}
else{
for(var j=0; j<daysPerWeek; j++){
var td = document.createElement('td');
if(date.getMonth() == month){
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "currentMonthWeekEnd";
}
else{
td.className = "currentMonthWeek";
}
}
else {
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "anotherMonthWeekEnd";
}
else{
td.className = "anotherMonthWeek";
}
}
if(date.getTime() == current.getTime()) {
td.className = "currentDay";
table.querySelectorAll("th")[j].className = "currentDay"
}
td.innerText = date.getDate();
date.setDate(date.getDate() + 1);
tr.appendChild(td);
table.appendChild(tr);
}
}
i++;
}
wrapper.innerHTML = "";
wrapper.appendChild(table);
}
});
form.inpDate.valueAsDate = new Date();
var event = new Event('change');
form.dispatchEvent(event);
}
function getShortNameOfDay(x){
var name = "xx";
switch(x){
case 0: name = "Пн"; break;
case 1: name = "Вт"; break;
case 2: name = "Ср"; break;
case 3: name = "Чт"; break;
case 4: name = "Пт"; break;
case 5: name = "Сб"; break;
case 6: name = "Вс";
}
return name;
}
</script>
</body>
</html>
|
рони,
Спасибо, почти то что надо, сорри что не до конца сформулировала вопрос, было бы лучше если бы сег число было выделено одним из двух цветов, взависимости от того какой сегодня день, будний или выходной, и также с днями недели... |
т.е. подсветить пн-пт и сб вс разными цветами, а сег день недели, тоже двумя разнымм цветами, в зависимости от того будний или выходной...
|
P. S. и возможно ли добавить кнопку, что-то типа
<input type="month" id="inpDate" name="inpDate">
<button type="button">сегодня</button>
которая будет скрыта (display none) по умолчанию (при просмотре такущего месяца), и показывается только при просмотре предыдущих/будущих месяцев, и при клике на которую дата возвращается к сегодняшней, тоесть чтобы не прокручивать дату назад на 30-50 лет, а в один клик вернуться к сегодн месяцу. |
Блондинка,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>тест-календарь</title>
<style>
table {
border-collapse: separate;
width: 300px;
padding: 1px;
}
table, th, td {
border: 1px solid #c0c0c0;
margin: 1px;
}
td {
text-align: center;
}
.wrapper {
margin-top: 20px;
}
.anotherMonthWeek {
background-color: #ffffff;
color: #00bfff;
}
.anotherMonthWeekEnd {
background-color: #ffffff;
color: #f08080;
}
.currentMonthWeek {
background-color: #fff0f5;
color: #0000cd;
}
.currentMonthWeekEnd {
background-color: #ffb6c1;
color: #dc143c;
}
.currentMonthWeekToday {
background-color: #0000cd;
color: #fff0f5;
}
.currentMonthWeekEndToday {
background-color: #dc143c;
color: #ffb6c1;
}
.currentDay{
background-color: #228B22;
color: #FFFFFF;
}
#wrapper th{
background-color: #EEE8AA;
color: #000000;
}
#wrapper th:nth-child(n+6){
background-color: #EE82EE;
}
#wrapper th.currentDay{
border-bottom: 3px solid #228B22;
color: #000000;
}
#wrapper th:nth-child(n+6).currentDay{
border-bottom: 3px solid #FF1493;
color: #000000;
}
#wrapper td:nth-child(n+6).currentDay{
background-color: #FF1493;
color: #FFFFFF;
}
button.current.hide{
display: none;
}
</style>
</head>
<body>
<form name="formDate">
<label for="inpDate">Укажите дату:</label>
<input type="date" id="inpDate" name="inpDate">
<button type="button" class="current hide">сегодня</button>
</form>
<div class="wrapper" id="wrapper"></div>
<script>
var wrapper = document.getElementById("wrapper");
var form = document.forms.formDate;
var button = document.querySelector("button.current");
function createTable(event){
var date = form.inpDate.valueAsDate;
if(button) button.classList.remove("hide");
if(date){
var current = new Date();
current.setHours(0,0,0,0);
date.setDate(1);
date.setHours(0);
date.setSeconds(0);
date.setMilliseconds(0);
var date2 = new Date(date.getTime());
var month = date.getMonth();
while(date.getDay() != 1){ date.setDate(date.getDate()-1); }
date2.setMonth(date2.getMonth()+1);
date2.setDate(1);
date2.setHours(0);
date2.setSeconds(0);
date2.setMilliseconds(0);
var trs = Math.ceil((date2-date)/1000/3600/24/7)+1;
var table = document.createElement('table');
var i = 0;
var daysPerWeek = 7;
while(i<trs){
var tr = document.createElement('tr');
if(i == 0){
for(var j=0; j<daysPerWeek; j++){
var th = document.createElement('th');
th.innerText = getShortNameOfDay(j);
tr.appendChild(th);
}
table.appendChild(tr);
}
else{
for(var j=0; j<daysPerWeek; j++){
var td = document.createElement('td');
if(date.getMonth() == month){
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "currentMonthWeekEnd";
}
else{
td.className = "currentMonthWeek";
}
}
else {
if(date.getDay() == 0 || date.getDay() == 6){
td.className = "anotherMonthWeekEnd";
}
else{
td.className = "anotherMonthWeek";
}
}
if(date.getTime() == current.getTime()) {
td.className = "currentDay";
table.querySelectorAll("th")[j].className = "currentDay";
if(button) button.classList.add("hide");
}
td.innerText = date.getDate();
date.setDate(date.getDate() + 1);
tr.appendChild(td);
table.appendChild(tr);
}
}
i++;
}
wrapper.innerHTML = "";
wrapper.appendChild(table);
}
};
function setToday()
{
form.inpDate.valueAsDate = new Date();
var event = new Event('change');
form.dispatchEvent(event);
}
if(wrapper && form){
form.addEventListener('change', createTable);
button && button.addEventListener("click", setToday);
setToday()
}
function getShortNameOfDay(x){
var name = "xx";
switch(x){
case 0: name = "Пн"; break;
case 1: name = "Вт"; break;
case 2: name = "Ср"; break;
case 3: name = "Чт"; break;
case 4: name = "Пт"; break;
case 5: name = "Сб"; break;
case 6: name = "Вс";
}
return name;
}
</script>
</body>
</html>
|
рони, всё супер, надеюсь что если изменить тип поля с input type data на input type month это не повлияет на работу скрипта...
|
Rise, не совсем поняла ваш вопрос, там только одно поле и одна кнопка, и я спросила, изменение типа поля, type data на type month не повлияет на работу скрипта?
|
Rise,
В смысле, зачем сетка календаря на месяц, я правильно сформулировала ваш вопрос? |
| Часовой пояс GMT +3, время: 02:12. |
|