Javascript-форум - Календарь в одну строку

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Календарь в одну строку (https://javascript.ru/forum/dom-window/51007-kalendar-v-odnu-stroku.html)

Календарь в одну строку

Здравствуйте уважаемы форумчане!

Мне необходимо сделать календарь в одну строку.
Статический сверстанный вариант тут:

http://gostar.bget.ru/events.html

Нужно:
а) чтобы выделялось текущее число и активный месяц
б) чтобы при переключении месяцев менялись дни в календарике
в) чтобы при нажатии на день применялся фильтр к событиям

С какими трудностями я столкнулся:

1) все варианты календарей "квадратные", а надо чтобы дни выводились в соответствии с дизайном
2) выбор месяца должен происходить в меню выше
3) даты уникальные, соответственно я не понимаю: как сделать обработчик "при-нажатии-убираем-стили-группе-объектов-присваиваем-новые-стили", если каждый день уникален...

Заранее прошу прощения за возможную не точную формулировку...

Есть у кого-нибудь идеи?

ViRuSreloaded, делай тестовые примеры... Может и найдется желающий в них поколупаться забесплатно...

//Month is 1 based
function daysInMonth(month,year) {
return new Date(year, month, 0).getDate();
}

//July
daysInMonth(7,2009); //31
//February
daysInMonth(2,2009); //28
daysInMonth(2,2008); //29

Как получить количество дней и отрисовать их?

Ребят! Есть кто за деньги готов сделать? Называйте цену...

ViRuSreloaded,
а сам? что-то попробовать?

Цитата:

Сообщение от ViRuSreloaded

Есть кто за деньги готов сделать? Называйте цену...

Я пока даже не понял, чт именно тебе нужно...

<script>
	function daysInMonth(month,year) {
	return new Date(year, month, 0).getDate();
}
var today = new Date(); // получаем дату сегодня
... // получаем кол-во дней в этом месяце
for i... // цикл на кол-во дней в этом месяце
'<div data-date="22.10.2014">бла-бла' ... // рисуем каждый день чтобы получился календарь на месяц в одну строку с атрубутом [data-date]

daysInMonth(7,2009); //31
//February
daysInMonth(2,2009); //28
daysInMonth(2,2008); //29

</script>

Как-то так...

ViRuSreloaded,
уже проблеск ... как насчёт полноценого макета

<script>
	function daysInMonth(month,year) {
	return new Date(year, month, 0).getDate();
}
</script>

<SCRIPT LANGUAGE="JavaScript">
temp_date = new Date();
day = temp_date.getDate();
month = temp_date.getMonth() + 1;
year = temp_date.getFullYear();
if (day < 10) {
day = "0" + day;
}
if (month <10) {
month = "0" + month;
}
var daysInThisMonth = daysInMonth(month,year);
for (var i = 0; i < daysInThisMonth; i++) {
var currentDay = i+1;
document.write('<a href="http://gostar.bget.ru/events/' + day + month + year +'">'+ currentDay +'</a>');
}

</script>

Uncaught SyntaxError: Unexpected token . events.html:73
Uncaught ReferenceError: daysInMonth is not defined events.html:95(anonymous function)

Цитата:

Сообщение от ViRuSreloaded (Сообщение 336907)

Uncaught SyntaxError: Unexpected token . events.html:73
Uncaught ReferenceError: daysInMonth is not defined events.html:95(anonymous function)

Я же не убрал [...] из кода... Теперь все понятно.

<script>
	function daysInMonth(month,year) {
	return new Date(year, month, 0).getDate();
}
temp_date = new Date();
day = temp_date.getDate();
month = temp_date.getMonth() + 1;
year = temp_date.getFullYear();
if (day < 10) {
day = "0" + day;
}
if (month <10) {
month = "0" + month;
}
var daysInThisMonth = daysInMonth(month,year);
for (var i = 0; i < daysInThisMonth; i++) {
var currentDay = i+1;
	if (currentDay <10) {
	currentDay = "0" + currentDay;
	}
document.write('<a href="http://gostar.bget.ru/events/' + currentDay + month + year +'">'+ currentDay +'</a>');
}
</script>

http://gostar.bget.ru/events.html - проверьте! Все работает! УРА!

Как теперь вывести все это в область календаря? а не сверху на странице?
Нужно вывести сюда:

<div id="calendar_events_content">
		<div id='day' class='full'>
			<a href='#'>
				<div id='day_content'>
					<div id='week_day'>TH</div>
					<div id='month_day'>22</div>
				</div>
			</a>
		</div>

Чтобы цикл заполнил календарь.

Верхняя часть скрипта:

<script>
	function daysInMonth(month,year) {
	return new Date(year, month, 0).getDate();
}
temp_date = new Date();
day = temp_date.getDate();
month = temp_date.getMonth() + 1;
year = temp_date.getFullYear();

var weekday=new Array(7);

weekday[0]="SU";
weekday[1]="MO";
weekday[2]="TU";
weekday[3]="WE";
weekday[4]="TH";
weekday[5]="FR";
weekday[6]="SA";

if (day < 10) {
day = "0" + day;
}
if (month <10) {
month = "0" + month;
}
var daysInThisMonth = daysInMonth(month,year);
</script>

Затем я вставил в то место, где должен выводиться календарь:

<div id="calendar_events_content">
<script>
for (var i = 0; i < daysInThisMonth; i++) {
var currentDay = i+1;
	if (currentDay <10) {
	currentDay = "0" + currentDay;
	}
var dateForCalendar = new Date(year, month - 1, currentDay);
var currentWeekDay = weekday[dateForCalendar.getDay()];
document.write('<div data-date="' + currentDay + month + year +'" class="day full"><a href="http://gostar.bget.ru/events/' + currentDay + month + year +'"><div class="week_day">'+ currentWeekDay+'</div><div class="month_day">' + currentDay +'</div></a></div>');
}
</script>
</div>

Вопросы:
1) Корректно ли использовать document.write ?
2) Как связать 2 скрипта (этот и скрипт выбора месяца)

скрипт вывода месяца:

<script>
     $(function(){
       var $li = $('#li_month li'), $sel = $('#selectMonth');
       $li.click(function(event) {
         event.preventDefault();
         var text = $(this).text();
         $('#select_month').text(text);
         var val = $('[data-html-text="'+text+'"]', $sel).val();
         $sel.val(val);
      });
});
</script>

HTML:

<div id='lil_navi_select' class='month'>
				<select id="selectMonth" class="hidden_select">

					<option value="0" selected="selected" data-skip="1">MONTH</option>
    				<option value="1" data-html-text="JANUARY">JANUARY</option>
    				<option value="2" data-html-text="FEBRUARY">FEBRUARY</option>
					<option value="3" data-html-text="MARCH">MARCH</option>
					<option value="4" data-html-text="APRIL">APRIL</option>
					<option value="5" data-html-text="MAY">MAY</option>
					<option value="6" data-html-text="JUNE">JUNE</option>
					<option value="7" data-html-text="JULY">JULY</option>
					<option value="8" data-html-text="AUGUST">AUGUST</option>
					<option value="9" data-html-text="SEPTEMBER">SEPTEMBER</option>
					<option value="10" data-html-text="OCTOBER">OCTOBER</option>
					<option value="11" data-html-text="NOVEMBER">NOVEMBER</option>
					<option value="12" data-html-text="DECEMBER">DECEMBER</option>

				</select>
				<div class='output_all'><span id='select_month'>MONTH</span><img src='images/arrow_down_black.png'></div>
				<div id='li_month' class='all'>
					<div class='list_all'>
						<ul>
							<li><a href='#'>JANUARY</a></li>
							<li><a href='#'>FEBRUARY</a></li>
							<li><a href='#'>MARCH</a></li>
							<li><a href='#'>APRIL</a></li>
							<li><a href='#'>MAY</a></li>
							<li><a href='#'>JUNE</a></li>
							<li><a href='#'>JULY</a></li><Br>
							<li><a href='#'>AUGUST</a></li>
							<li><a href='#'>SEPTEMBER</a></li>
							<li><a href='#'>OCTOBER</a></li>
							<li><a href='#'>NOVEMBER</a></li>
							<li><a href='#'>DECEMBER</a></li>
						</ul>
					</div>
				</div>
			</div>

вот :)

Цитата:

Сообщение от ViRuSreloaded

1) Корректно ли использовать document.write ?

научитесь мыслить без document.write - как добавлять удалять елементы ссылку смотрите выше.
сделайте функцию которая будет генерировать структуру календаря и отдавать -- на входе номер месяца на выходе дивы -- по клику на li -- стереть контейнер календаря и загрузить в него новый -- пишите алгоритм сами.

Спасибо! Я и хотел сам, только надо понимать алгоритм, спасибо огромное! Сейчас попробую.

if text == "JANUARY" var monthSelected = '0';
			if text == "FEBRUARY" var monthSelected = 1;
			if text == "MARCH" var monthSelected = 2;
			if text == "APRIL" var monthSelected = 3;
			if text == "MAY" var monthSelected = 4;
			if text == "JUNE" var monthSelected = 5;
			if text == "JULY" var monthSelected = 6;
			if text == "AUGUST" var monthSelected = 7;
			if text == "SEPTEMBER" var monthSelected = 8;
			if text == "OCTOBER" var monthSelected = 9;
			if text == "NOVEMBER" var monthSelected = 10;
			if text == "DECEMBER" var monthSelected = 11;
			var month = monthSelected;

Итог: Uncaught SyntaxError: Unexpected identifier

Я так понял проблема в синтаксисе.

Полный код скрипта:

<script>
     $(function(){
       var $li = $('#li_month li'), $sel = $('#selectMonth');
       $li.click(function(event) {
         event.preventDefault();
         var text = $(this).text();
         $('#select_month').text(text);
         var val = $('[data-html-text="'+text+'"]', $sel).val();
         $sel.val(val);
         alert(text);
			if text == "JANUARY" var monthSelected = '0';
			if text == "FEBRUARY" var monthSelected = 1;
			if text == "MARCH" var monthSelected = 2;
			if text == "APRIL" var monthSelected = 3;
			if text == "MAY" var monthSelected = 4;
			if text == "JUNE" var monthSelected = 5;
			if text == "JULY" var monthSelected = 6;
			if text == "AUGUST" var monthSelected = 7;
			if text == "SEPTEMBER" var monthSelected = 8;
			if text == "OCTOBER" var monthSelected = 9;
			if text == "NOVEMBER" var monthSelected = 10;
			if text == "DECEMBER" var monthSelected = 11;
			var month = monthSelected;
         drawCalendar();
      });
});
</script>

ViRuSreloaded,
if () скобочки где
и у вас же есть значение селекта зачем вам if

со скобками получилось! спасибо!

почему не выполняется функция drawCalendar() со значением month ?

<script>
		function drawCalendar() {
$('.calendar_events_content').append(''); // $('.calendar_events_content').html('');

for (var i = 0; i < daysInThisMonth; i++) {
var currentDay = i+1;
	if (currentDay <10) {
	currentDay = "0" + currentDay;
	}
var dateForCalendar = new Date(year, month - 1, currentDay);
var currentWeekDay = weekday[dateForCalendar.getDay()];

		$('.calendar_events_content').append('<div data-date="' + currentDay +'.'+ month +'.'+ year +'" class="day full"><a href="http://gostar.bget.ru/events/' + currentDay + month + year +'"><div class="week_day">'+ currentWeekDay+'</div><div class="month_day">' + currentDay +'</div></a></div>');
	}

}
</script>

<script>
     $(function(){
       var $li = $('#li_month li'), $sel = $('#selectMonth');
       $li.click(function(event) {
         event.preventDefault();
         var text = $(this).text();
         $('#select_month').text(text);
         var val = $('[data-html-text="'+text+'"]', $sel).val();
         $sel.val(val);
         
			if (text == "JANUARY") var monthSelected = 0;
			if (text == "FEBRUARY") var monthSelected = 1;
			if (text == "MARCH") var monthSelected = 2;
			if (text == "APRIL") var monthSelected = 3;
			if (text == "MAY") var monthSelected = 4;
			if (text == "JUNE") var monthSelected = 5;
			if (text == "JULY") var monthSelected = 6;
			if (text == "AUGUST") var monthSelected = 7;
			if (text == "SEPTEMBER") var monthSelected = 8;
			if (text == "OCTOBER") var monthSelected = 9;
			if (text == "NOVEMBER") var monthSelected = 10;
			if (text == "DECEMBER") var monthSelected = 11;
			var month = monthSelected;
			alert(month); // проверяем что month присвоено значение
         drawCalendar();
      });
});
</script>

Может код внизу страницы перебивает?

<script>

	function daysInMonth(month,year) {
	return new Date(year, month, 0).getDate();
}
temp_date = new Date();
day = temp_date.getDate();
month = temp_date.getMonth() + 1;
year = temp_date.getFullYear();

var weekday=new Array(7);

weekday[0]="SU";
weekday[1]="MO";
weekday[2]="TU";
weekday[3]="WE";
weekday[4]="TH";
weekday[5]="FR";
weekday[6]="SA";

if (day < 10) {
day = "0" + day;
}
if (month <10) {
month = "0" + month;
}
var daysInThisMonth = daysInMonth(month,year);



</script>

Фуф! Я все сделал. Если кому интересно - опубликую код! мало ли... Спасибо всем за помощь <3.

function love() {
if peopleLove = me;
MyLove = them;
}