Как найти совпадения из массива в цикле?
Привет всем, не очень я силен в JS но попытался сделать календарь.
С календарем получилось и все работает, а вот найти совпадения какие дни заняты не получается db['positions'] выводит номер дня например 9-е {d:9} вот так :
{"today":"09","year":"2018","month":"07","dayofmonth":"31","date":"2018-07","tomonth":"06","toyear":"2018","next":"2018-08","prev":"2018-06","day":"7","positions":[{"d":"10"},{"d":"11"}]}
var db = JSON.parse(result);
var view = db['positions'];
for (i = 1; i <= db['dayofmonth']; i++) {
/// вычисляем день по счету с какого начинается неделя
var d = parseInt(db['day']) + parseInt(i) - parseInt(1);
/// если сегодня меньше и то не показывать чекбокс
if (db['today'] >= i && db['month'] <= db['tomonth']) {
$("#col" + d).html(i + '<br>-');
} else {
if (view) {
// как мне заставить следующую конструкцию работать?
if (i == view[i]['d']) {
// $("#col" + d).html(i + '<br>-');
console.log(i);
}
else {
// $("#col" + d).html(i + '<br><input class="check" type="checkbox" name="day_view[]" value="" onclick="clk(this);">');
}
}
}
}
|
racheev,
<script>
var db = {"today":"09","year":"2018","month":"07","dayofmonth":"31","date":"2018-07","tomonth":"06","toyear":"2018","next":"2018-08","prev":"2018-06","day":"7","positions":[{"d":"10"},{"d":"11"}]};
var view = db['positions'];
var busy = view.map(function(e) {
return +e.d
});
var length = +db['dayofmonth'];
var today = +db['today'];
for (var i = 0; i < length; i++) {
var num = i + 1;
var html = num + '<br><input class="check" type="checkbox" name="day_view[]" value="" onclick="clk(this);">'
if (busy.indexOf(num) > -1 || num < today ) html = num + '<br>-'
document.write(html+"<br>")
}
</script>
|
рони,
Это конечно наверное круто, спасибо за быстрый ответ, но эта схема в мой календарь не лезет. Да и я не понимаю вообще как это работает. В своем коде я понимаю и контролирую процесс а тут ... эта схема даже календарь не выведет. У меня есть таблица с ячейками куда это все вставляется... <div id="calendar" align="center"> <table class="tablecall"> <tr> <td> <a class="arrow" id="prev" onclick="cal(prev);"> <<< </a> </td> <td> <table class="tablecall"> <tr class="trcall"> <td colspan="7">Выбираем <span id="date"></span></td> </tr> <tr class="trcall"> <td>Пн</td> <td>Вт</td> <td>Ср</td> <td>Чт</td> <td>Пт</td> <td><font color="red">Сб</font></td> <td><font color="red">Вс</font></td> </tr> <tr class="day"> <td id="col1"></td> <td id="col2"></td> <td id="col3"></td> <td id="col4"></td> <td id="col5"></td> <td id="col6"></td> <td id="col7"></td> </tr> <tr class="day"> <td id="col8"></td> <td id="col9"></td> <td id="col10"></td> <td id="col11"></td> <td id="col12"></td> <td id="col13"></td> <td id="col14"></td> </tr> <tr class="day"> <td id="col15"></td> <td id="col16"></td> <td id="col17"></td> <td id="col18"></td> <td id="col19"></td> <td id="col20"></td> <td id="col21"></td> </tr> <tr class="day" id="week4"> <td id="col22"></td> <td id="col23"></td> <td id="col24"></td> <td id="col25"></td> <td id="col26"></td> <td id="col27"></td> <td id="col28"></td> </tr> <tr class="day" id="week5"> <td id="col29"></td> <td id="col30"></td> <td id="col31"></td> <td id="col32"></td> <td id="col33"></td> <td id="col34"></td> <td id="col35"></td> </tr> <tr class="day" id="week6"> <td id="col36"></td> <td id="col37"></td> <td id="col38"></td> <td id="col39"></td> <td id="col40"></td> <td id="col41"></td> <td id="col42"></td> </tr> </table> </td> <td><a class="arrow" onclick="cal(next);"> >>> </a></td> </tr> </table> </div> |
и переходы на следующий месяц не учтены. там эти же даты с первого по 9-е не активны. у меня все работает, просто подскажите как сделать что бы при совпадении в базе дня у него не показывался чекбокс.
|
календарь, вывод месяца из json
racheev,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.red{
border: solid 1px #FF0000;
border-radius: 2px;
}
</style>
</head>
<body>
<div id="calendar" align="center">
<table class="tablecall">
<tr>
<td>
<a class="arrow" id="prev" onclick="cal(prev);"> <<< </a>
</td>
<td>
<table class="tablecall">
<tr class="trcall">
<td colspan="7">Выбираем <span id="date"></span></td>
</tr>
<tr class="trcall">
<td>Пн</td>
<td>Вт</td>
<td>Ср</td>
<td>Чт</td>
<td>Пт</td>
<td><font color="red">Сб</font></td>
<td><font color="red">Вс</font></td>
</tr>
<tr class="day">
<td id="col1"></td>
<td id="col2"></td>
<td id="col3"></td>
<td id="col4"></td>
<td id="col5"></td>
<td id="col6"></td>
<td id="col7"></td>
</tr>
<tr class="day">
<td id="col8"></td>
<td id="col9"></td>
<td id="col10"></td>
<td id="col11"></td>
<td id="col12"></td>
<td id="col13"></td>
<td id="col14"></td>
</tr>
<tr class="day">
<td id="col15"></td>
<td id="col16"></td>
<td id="col17"></td>
<td id="col18"></td>
<td id="col19"></td>
<td id="col20"></td>
<td id="col21"></td>
</tr>
<tr class="day" id="week4">
<td id="col22"></td>
<td id="col23"></td>
<td id="col24"></td>
<td id="col25"></td>
<td id="col26"></td>
<td id="col27"></td>
<td id="col28"></td>
</tr>
<tr class="day" id="week5">
<td id="col29"></td>
<td id="col30"></td>
<td id="col31"></td>
<td id="col32"></td>
<td id="col33"></td>
<td id="col34"></td>
<td id="col35"></td>
</tr>
<tr class="day" id="week6">
<td id="col36"></td>
<td id="col37"></td>
<td id="col38"></td>
<td id="col39"></td>
<td id="col40"></td>
<td id="col41"></td>
<td id="col42"></td>
</tr>
</table>
</td>
<td><a class="arrow" onclick="cal(next);"> >>> </a></td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var db = {"today":"09","year":"2018","month":"07","dayofmonth":"31","date":"2018-07","tomonth":"06","toyear":"2018","next":"2018-08","prev":"2018-06","day":"7","positions":[{"d":"10"},{"d":"11"}]};
var view = db['positions'];
var busy = view.map(function(e) {
return +e.d
});
var length = +db['dayofmonth'];
var today = +db['today'];
var day = +db['day'];
for (var i = 0; i < length; i++) {
var num = i + 1;
var html = num + '<br><input class="check" type="checkbox" name="day_view[]" value="" onclick="clk(this);">';
if (busy.indexOf(num) > -1 || num <= today ) html = num + '<br>-';
var id = "#col" + (i + day);
$(id).html(html).toggleClass("red", num == today)
}
</script>
</body>
</html>
|
рони,
если приходит пустая positions то календарь не формируется... я добавил проверку. но самое важное что при переходе на следующий месяц не отмечает даты которые заняты.
<script>
$(document).ready( function() {
// $('#fset_calendar').hide();
});
$('#country_slug').on('change', function() {
var country_slug = $(this).val();
if (country_slug) {
$('#fset_calendar').show();
cal();
} else {
$('#fset_calendar').hide();
}
});
function cal(dat) {
/// сбрасываем все переменные
for (i = 1; i <= 42; i++) {
$("#col" + i).html('');
$("#week" + i).show();
$("#prev").show();
}
/// зпросим данные по календарю
$.ajax({
type: 'GET',
url: '/positions/get_calendar',
data: {
date: dat
}
}).done(function( result ) {
/// распарсим что пришло
var db = JSON.parse(result);
/// если db['positions'] пустая календарь не формируется
if (db['positions']) {
var view = db['positions'];
} else {
var view = ["d","0"];
}
console.log(view);
var busy = view.map(function(e) {
return +e.d
});
var length = +db['dayofmonth'];
var today = +db['today'];
var day = +db['day'];
for (var i = 0; i < length; i++) {
var num = i + 1;
var html = num + '<br><input class="check" type="checkbox" name="day_view[]" value="" onclick="clk(this);">';
if ((busy.indexOf(num) > -1 || num <= today) && db['month'] <= db['tomonth'] ) html = num + '<br>-';
var id = "#col" + (i + day);
$(id).html(html).toggleClass("red", num == today)
}
//alert();
$("#date").html(db['date'] + '<input type="hidden" name="date_show[]" value="'+ db['date'] +'">');
/// соберем календарь
/*
for (i = 1; i <= db['dayofmonth']; i++) {
/// вычисляем день по счету с какого начинается неделя
var d = parseInt(db['day']) + parseInt(i) - parseInt(1);
/// если сегодня меньше и то не показывать чекбокс
if (db['today'] >= i && db['month'] <= db['tomonth']) {
$("#col" + d).html(i + '<br>-');
} else {
if (view) {
// if (i === view[0]['d']) {
// console.log(view[0]['d']);
// }
//for(k=0; k < view.length; k++) {
//if (view[i] == i) {
//console.log(i);
//}
//else {
//}
//}
}
//if (view[i] == i) {
// $("#col" + d).html(i + '<br>-');
//} else {
$("#col" + d).html(i + '<br><input class="check" type="checkbox" name="date_show[]" value="'+ i +'" onclick="clk(this);">');
//}
}
}
*/
/// вычислим сколько недель и спрячем ненужное
// var a = Math.ceil(parseInt(d) / 7);
// if (a == '5') {$("#week6").hide();}
// if (a == '4') {$("#week5").hide();$("#week6").hide();}
// if (db['month'] <= db['tomonth']) {$("#prev").hide();}
/// ссылки на переход туда сюда
next = db['next'];
prev = db['prev'];
today = db['today'];
});
}
cal();
</script>
<div id="calendar" align="center">
<table class="tablecall">
<tr>
<td>
<a class="arrow" id="prev" onclick="cal(prev);"> <<< </a>
</td>
<td>
<table class="tablecall">
<tr class="trcall">
<td colspan="7">Выбираем <span id="date"></span></td>
</tr>
<tr class="trcall">
<td>Пн</td>
<td>Вт</td>
<td>Ср</td>
<td>Чт</td>
<td>Пт</td>
<td><font color="red">Сб</font></td>
<td><font color="red">Вс</font></td>
</tr>
<tr class="day">
<td id="col1"></td>
<td id="col2"></td>
<td id="col3"></td>
<td id="col4"></td>
<td id="col5"></td>
<td id="col6"></td>
<td id="col7"></td>
</tr>
<tr class="day">
<td id="col8"></td>
<td id="col9"></td>
<td id="col10"></td>
<td id="col11"></td>
<td id="col12"></td>
<td id="col13"></td>
<td id="col14"></td>
</tr>
<tr class="day">
<td id="col15"></td>
<td id="col16"></td>
<td id="col17"></td>
<td id="col18"></td>
<td id="col19"></td>
<td id="col20"></td>
<td id="col21"></td>
</tr>
<tr class="day" id="week4">
<td id="col22"></td>
<td id="col23"></td>
<td id="col24"></td>
<td id="col25"></td>
<td id="col26"></td>
<td id="col27"></td>
<td id="col28"></td>
</tr>
<tr class="day" id="week5">
<td id="col29"></td>
<td id="col30"></td>
<td id="col31"></td>
<td id="col32"></td>
<td id="col33"></td>
<td id="col34"></td>
<td id="col35"></td>
</tr>
<tr class="day" id="week6">
<td id="col36"></td>
<td id="col37"></td>
<td id="col38"></td>
<td id="col39"></td>
<td id="col40"></td>
<td id="col41"></td>
<td id="col42"></td>
</tr>
</table>
</td>
<td><a class="arrow" onclick="cal(next);"> >>> </a></td>
</tr>
</table>
</div>
|
racheev,
Datepicker |
рони,
не прокатит. я знаю эти пикеры. там заморочек еще больше. У меня все работает только одно не могу сделать проверку на совпадение. вот и прощу помощи. |
Цитата:
|
| Часовой пояс GMT +3, время: 07:03. |