Splitting up date in a time table

[mio510]

Hi guys,

I need to split up a date to 3 rows
from this

Vrijdag 1 April ( which stand for Friday 1 April) which you can see here at code pen link code pen url

in to 3 rows for example i want Friday (vrijdag) in a seperate row and the name of the month and number of the month again in a separate row.
as you can see Fadjr /Shoroeq /Dohr /Asr /Maghrib and Ishaa are all in separate rows the same thing i want is with the date.

i have uploaded all the css and js files in to google drive

i could not upload my html code because my text was to long. You can see my html code at the above link in code pen.

what files should i be editing to make this possible

thanks in advance

[PaulOB]

@mio510

are all in separate rows the same thing i want is with the date.

I’m assuming you mean columns rather than rows (columns are vertical rows are horizontal)?

It’s not clear to me that if you have built that table then adding extra columns should not be an issue because you have created columns for all the other items as required. Therefore I feel I may have missed the crux of the question along the way:)

To create 3 extra columns then you just need to follow the same example and use three ‘td’ elements for your date with the correct data in each. Of course you will need to match all rows to have three extra cells and in cases of header rows you can either have three empty cells or add a colspan=3 to the single cell header to match the three below.

I have not taken into account any dynamic behaviours of the table because I’m not 100% sure of the question

[mio510]

thanks for your reply

yes i mean columns. sorry if my question is not that clear.

i just tried editing the html file but it seems i need to change some of the java script files also.

mine java script look like this now
o.day = dayNamesTab[date.getDay()] + " " + date.getDate() + " " + monthNamesTab[date.getMonth()];
o.daymiddle = dayNamesTab[date.getDay()] + " " + date.getDate();
o.dayminus = dayMinusNamesTab[date.getDay()] + " " + date.getDate();

        var dayNamesTab = ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'];
        var dayMinusNamesTab = ['Zo.', 'Ma.', 'Di.', 'Wo.', 'Do.', 'Vr.', 'Za.'];
        var monthNamesTab = ['Januari','Februari','Maart','April','Mei','Juni','Julli','Augustus','September','October','November','December'];

now im only stuck at the number of the month like 1 april which var gets the number of the day.

[PaulOB]

Hi,

I’ve moved this to the JS forum as date manipulations are beyond me.

You may need to update your pen with what you have now and hopefully a JS expert will pass by and take a look,

[PaulOB]

I may be wide of the mark but if you want to split the date into separate cells then you probably need something (very roughly) like this.

<td class="first split-first">{{day1}}</td>
<td class="split-first">{{day2}}</td>
<td class="split-first">{{day3}}</td>

Then in the JS:

	while (date < endDate) {	
		o = getSalatTimeObjectForDate(date);
		
		o.day =  dayNamesTab[date.getDay()] + " " + date.getDate() + " " + monthNamesTab[date.getMonth()];
                        
  o.day1 = dayNamesTab[date.getDay()];
  o.day2 = date.getDate();
  o.day3 = monthNamesTab[date.getMonth()];

I forked the pen to here.

As I mentioned above you are probably better waiting until someone who knows what they are doing comes along

[mio510]

hi

i have this script

o.day =  dayNamesTab[date.getDay()] + " " + date.getDate() + " " + monthNamesTab[date.getMonth()];
o.daymiddle = dayNamesTab[date.getDay()] + " " + date.getDate();
o.dayminus = dayMinusNamesTab[date.getDay()] + " " + date.getDate();
		
		
var dayNamesTab = ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'];
var dayMinusNamesTab = ['Zo.', 'Ma.', 'Di.', 'Wo.', 'Do.', 'Vr.', 'Za.'];
var monthNamesTab = ['Januari','Februari','Maart','April','Mei','Juni','Julli','Augustus','September','October','November','December'];

how can i only show date.getDate();

i tried :

o.day2 = date.getDate();

but it seems its not working any other ways i can only fetch the days of the month only numbers (1-31)

my whole script if you need it

/* make monthly timetable*/
function makeTableMonth() {	
	
	var tmpl = $("#monthItem").html(), html;
	
	$(".city_current").text($("#city").val());
	
	var year = parseInt($("#year").val()); 
	var month = parseInt($("#month").val())-1; /* -1 because month index begin at : 0 */
	
	var todayClass = "today";
	
	var date = new Date(year, month, 1);
	var endDate = new Date(year, month+1, 1);

	var timesList = [];
	var dayArray = {dayItem: []};
	var i = 0;

	while (date < endDate) {	
		o = getSalatTimeObjectForDate(date);
		
		o.day =  dayNamesTab[date.getDay()] + " " + date.getDate() + " " + monthNamesTab[date.getMonth()];
		o.daymiddle = dayNamesTab[date.getDay()] + " " + date.getDate();
		o.dayminus = dayMinusNamesTab[date.getDay()] + " " + date.getDate();

		
		o.dayislam = writeIslamicDate(-1,date);
		o.dayislammiddle = writeIslamicDateMiddle(-1,date);
		o.dayislamminus = writeIslamicDateMinus(-1,date);
		
		
		var today = new Date(); 
		var isToday = (date.getYear() == today.getYear()) && (date.getMonth() == today.getMonth()) && (date.getDate() == today.getDate());			
		var classItem = isToday ? 'today '+todayClass : '';		
		
		classItem += (date.getDay() == 5)?" joumoua" : "";
		
		o.classItem = classItem;
		
		dayArray.dayItem.push(o);
				
		date.setDate(date.getDate()+ 1);  /* next day*/		
	}
	/* affichage */
	html = Mustache.render(tmpl, dayArray);
	$('#monthList').empty().append(html);
	
	
}

				
			

			


		
			
				
			
			
			
		
	
	
		
			
				
				
				
					 Reply 
				 
				
				
					  Reply With Quote

[felgall]

@mio510

o.day2 = date.getDate();

but it seems its not working any other ways i can only fetch the days of the month only numbers (1-31)

getDate only references the day of the month so that is working exactly as it is supposed to.

If you want the entire date you need getMonth and getFullYear as well

[PaulOB]

Threads merged.