Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.08.2014, 19:04
Новичок на форуме
Отправить личное сообщение для Blacksmouker Посмотреть профиль Найти все сообщения от Blacksmouker
 
Регистрация: 08.04.2014
Сообщений: 5

Календарь с подсветкой дат
Добрый вечер, уважаемые форумчане!

Хочу спросить у Вас совета. Не получается решить одну проблему, на первый взгляд не очень сложную.

Входные данные:
На сервере лежат файлы с названием типа dd.mm.yyyy.zip.

На странице пользователя есть календарь с раскладкой на год.
Хочу сделать так, чтобы при наличии на конкретную дату архива на сервере - в календаре такая дата подсвечивалась ссылкой на данный файл.

На текущий момент застопорился на попытке сравнения даты в календаре с датой в имени архива.

Если в коде,
так получаю содержимое сервера и передаю в json.

$conn_id = ftp_connect($ftp_server);

		// проверка имени пользователя и пароля
		$login_result = ftp_login($conn_id, $ftp_user_name, $ftp_user_pass);

		// получить содержимое текущей директории
		$contents = ftp_nlist($conn_id, ".");
$json = json_encode($contents);


Вот так я получаю наименования файлов в javascript и привожу их к стандартному значению.
var files = <?php echo $json;?>;
		//document.write(files);
		
			for(var fileDate in files){
			
				s = new Date(files[fileDate].slice(6,10), files[fileDate].slice(3,5), files[fileDate].slice(0,2));
				document.write(s + '<br>');
				
			
			}


А вот скрипт собственно календаря.
var month_name = [ //массив названий месяцев
			'Январь',
			'Февраль',
			'Март',
			'Апрель',
			'Май',
			'Июнь',
			'Июль',
			'Август',
			'Сентябрь',
			'Октябрь',
			'Ноябрь',
			'Декабрь'
		];

		function calendar(year) {
			
			
				
						document.write('<table class="calend"><caption>'); //Начинаем формировать таблицу
						
						document.write(+ year + ' год');
						
						document.write('</caption>');
						document.write('<tr>');
							for (var z = 0; z<6; z++) {
								
								var days = (Date.UTC(year, z + 1) - Date.UTC(year, z)) / (24 * 60 * 60 * 1000);
								var start_day = new Date(year, z);
								var index = (start_day.getDay() + 6) % 7;
								var rows = Math.ceil((index + days) / 7);
								
								document.write('<td>');
								document.write('<div><table><caption>'+ month_name[z] + ' ' + year + '</caption>');
									for (var i = 0, k = 1 - index; i < rows; i++) {
										document.write ('<tr>');
										for (var j = 0; j < 7; j++, k++) {
											
											if (k > 0 && k <= days) {
												var date = new Date(year , z  , k );
												//document.write (date + '<BR>' );												
													if (j > 4) { //это - выходные!
													document.write ('<td class="holiday">' + k + '</td>');
														} else { //это - обычные дни:(
													document.write ('<td>' + k + '</td>');
													} 
												
											} else { //дни - пустышки
											document.write ('<td class="empty"></td>');
													}		 	
										}
										document.write ('</tr>');
									}
							document.write('</table></div></td>');
						}
						document.write('</tr>');
						
						document.write('<tr>');
							for (var z = 6; z<12; z++) {
								
								var days = (Date.UTC(year, z + 1) - Date.UTC(year, z)) / (24 * 60 * 60 * 1000);
								var start_day = new Date(year, z);
								var index = (start_day.getDay() + 6) % 7;
								var rows = Math.ceil((index + days) / 7);
						
								document.write('<td>');
								document.write('<div><table><caption>'+ month_name[z] + ' ' + year + '</caption>');
									for (var i = 0, k = 1 - index; i < rows; i++) {
									document.write ('<tr>');
										for (var j = 0; j < 7; j++, k++) {
											if (k > 0 && k <= days) {
													if (j > 4) { //это - выходные!
													document.write ('<td class="holiday">' + k + '</td>');
														} else { //это - обычные дни:(
													document.write ('<td>' + k + '</td>');
													} 
											} else { //дни - пустышки
											document.write ('<td class="empty"></td>');
													}		 	
										}
										document.write ('</tr>');
								
								
							
							}
							document.write('</table></div></td>');
						}
						document.write('</tr>');
						
						document.write('</table>');
				
		}
		calendar(2014);


В итоге календарь отрисовывается нормально, как надо.

Даты из названий файлов раскладываются правильно - выводит все верно.
Дата календаря склеивается также правильно - тестовый вывод проходит верно.

А вот добавить условие сравнения что-то не получается. Почему-то у меня он видит только первый элемент массива с датами файлов.
Ответить с цитированием
  #2 (permalink)  
Старый 05.08.2014, 00:28
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,664

Blacksmouker,
function calendar(year) {
	var html = '<table class="calend"><caption>' + year + ' год</caption>'; //Начинаем формировать таблицу
	for (var q = 0; q < 2; q++) {
		html += '<tr>';
		for (var z = ((q)?6:0); z < ((q)?12:6); z++) {
			var days = (Date.UTC(year, z + 1) - Date.UTC(year, z)) / (24 * 60 * 60 * 1000);
			var start_day = new Date(year, z);
			var index = (start_day.getDay() + 6) % 7;
			var rows = Math.ceil((index + days) / 7);
			html += '<td><div><table><caption>' + month_name[z] + ' ' + year + '</caption>';
			for (var i = 0, k = 1 - index; i < rows; i++) {
				html += '<tr>';
				for (var j = 0; j < 7; j++, k++) {
					if (k > 0 && k <= days) {
						/////////////////
						var n = k;
						for (var d in files) {
							if (files[d].slice(6,10) == year) {
								if (files[d].slice(3,5)-1 == z) {
									if (files[d].slice(0,2) == k) {
										n = '<a href="path/' + files[d] + '">' + k + '</a>';
										break;
									}
								}
							}
						}
						/////////////////
						if (j > 4) { //это - выходные!
							html += '<td class="holiday">' + n + '</td>';
						} else { //это - обычные дни:(
							html += '<td>' + n + '</td>';
						} 
					} else { //дни - пустышки
						html += '<td class="empty"></td>';
					}
				}
				html += '</tr>';
			}
			html += '</table></div></td>';
		}
		html += '</tr>';
	}
	html += '</table>';
	document.body.innerHTML = html;
}
calendar(2014);
Ответить с цитированием
  #3 (permalink)  
Старый 05.08.2014, 09:32
Новичок на форуме
Отправить личное сообщение для Blacksmouker Посмотреть профиль Найти все сообщения от Blacksmouker
 
Регистрация: 08.04.2014
Сообщений: 5

Rise, спасибо Вам большое!
Очень красивое решение. А я огород городил.
Век живи, век учись.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Интервалы дат в jQuery UI Datepicker treef jQuery 1 17.06.2016 02:24
Freelance. Нужен календарь на Javascript для подстановки в <input /> даты и времени. DiYanka Работа 1 14.06.2014 02:03
календарь с возможностью выбора нескольких дат vladislav.blinov Javascript под браузер 0 15.07.2013 14:37
jQuery UI календарь в далоговом окне ololosh jQuery 1 14.08.2012 17:23
как в datepicker задать диапазон дат во время выполнения скрипта. Yurik jQuery 0 23.02.2011 12:19