/    Sign up×
Community /Pin to ProfileBookmark

week planner

Copy linkTweet thisAlerts:
Jun 10.2015

Hallo!

I want to make a calendar, with weekdays and their dates displayed instead of the whole month. So for example “10, Wed”. It’s a week planner, where users also can insert appointments etc.

With a click on a arrow-image I want to display the previous or the next week, as well as wenn I click on the arrow for the month.

My code for now looks like this (I am from Austria, that’s why the german names):

[CODE]var month = [‘Jänner’, ‘Februar’, ‘März’, ‘April’, ‘Mai’, ‘Juni’, ‘Juli’, ‘August’, ‘September’, ‘Oktober’, ‘November’, ‘Dezember’];

function calendar() {
var today = new Date();
setText(‘label’, month[today.getMonth()] + ‘ ‘ + (1900 + today.getYear()));

var day = today.getDay();
if (day !== 01) { // Only manipulate the date if it isn’t Mon.
today.setHours(-24 * (day – 1));

}

setText(‘Mo’, today.getDate());
setText(‘Di’, today.getDate()+1);
setText(‘Mi’, today.getDate()+2);
setText(‘Do’, today.getDate()+3);
setText(‘Fr’, today.getDate()+4);
setText(‘Sa’, today.getDate()+5);

};

function setText(id, val) {
if(val < 10){
val = ‘0’ + val;
}
document.getElementById(id).innerHTML = val;

};

window.onload = calendar;[/CODE]

What’s the best method to display the previous/next week with the correct dates with a click on a arrowimage? I have the same problem with the month. I would need a loop where it sets my current week or month +1 or -1 everytime I click on the arrow/execute the according function.

Setting something +1 or -1 isn’t all so difficult, hehe, but I just don’t know how to “save” the current displayed month/week. So when I click twice on the previous arrow, it should go back two months, and not twice from the same month. I am really not good with loops and arrays and … yeah, stuff. I am quite a programmer-newby ?

So, I would be very thankful for every suggest, example, link or idea how I could approuch my previous/next-functions!

Best wishes
Jackie

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsJun 11.2015 — [CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<div id="label"></div>
<span id="Mo" ></span>&nbsp; <span id="Di" > </span>&nbsp; <span id="Mi" > </span>&nbsp; <span id="Do" ></span>&nbsp; <span id="Fr" ></span>&nbsp; <span id="Mo" ></span> <span id="Sa" ></span>
<div onclick="days(7);" >+ week</div>
<div onclick="days(-7);" >- week</div>
<div onclick="months(1);" >+ month</div>
<div onclick="months(-1);" >- month</div>

<script type="text/javascript">
/*<![CDATA[*/
var month = ['Jänner', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];

function days(d){
calendar(new Date(calendar.date.getFullYear(),calendar.date.getMonth(),calendar.date.getDate()+d,1));
}

function months(m){
calendar(new Date(calendar.date.getFullYear(),calendar.date.getMonth()+m,calendar.date.getDate(),1));
}

function calendar(d) {
var today = d||new Date();
var day = today.getDay();
if (day !== 01) { // Only manipulate the date if it isn't Mon.
today.setHours(-24 * (day - 1));
}
document.getElementById('label').innerHTML=month[today.getMonth()] + ' ' + (today.getFullYear());
calendar.date=today;

setText('Mo', today.getDate());
setText('Di', today.getDate()+1);
setText('Mi', today.getDate()+2);
setText('Do', today.getDate()+3);
setText('Fr', today.getDate()+4);
setText('Sa', today.getDate()+5);

};


function setText(id, val) {
if(val < 10){
val = '0' + val;
}
document.getElementById(id).innerHTML = val;

};

window.onload = calendar;
/*]]>*/
</script>
</body>

</html>
[/CODE]
Copy linkTweet thisAlerts:
@jackie_dsauthorJun 12.2015 — Thanks for your help, vwphillips! I really appreciate that and I also tested your code example, which worked really fine and without errors. My only problem was when I had weeks with days outside the month. It would display me for example Fr, 33 and Sat, 34 and Son, 35 and I didn't really know how to fix that. So I did a little research and found something that helped me with my problem of displaying the correct dates in the correct days of the correct week (say that 10 times in a row *haha)

[CODE]
function calendar() {
var today = new Date();
var currYear = today.getFullYear();
var currMonth = today.getMonth();
var currWeek = today.getWeek();

var firstDateOfMonth = new Date(currYear, currMonth, 1);
var firstDayOfMonth = firstDateOfMonth.getDay(); // 0 (Sun) to 6 (Sat)

var firstDateOfWeek = new Date(firstDateOfMonth);

firstDateOfWeek.setDate( // move the Date object
firstDateOfWeek.getDate() + // forward by the number of
(firstDayOfMonth ? 7 - firstDayOfMonth : 0) // days needed to go to
); // Sunday, if necessary

firstDateOfWeek.setDate( // move the Date object
firstDateOfWeek.getDate() + // forward by the number of
7 * (currWeek-1) // weeks required (week - 1)
);


var dateNumbersOfMonthOnWeek = [];
var datesOfMonthOnWeek = [];

for (var i = 0; i < 7; i++) { // 7 days of week

dateNumbersOfMonthOnWeek.push( // push the date number on
firstDateOfWeek.getDate()); // the end of the array

datesOfMonthOnWeek.push( // push the date object on
new Date(+firstDateOfWeek)); // the end of the array

firstDateOfWeek.setDate(
firstDateOfWeek.getDate() + 1); // move to the next day

}

setText('month-year', monthArray[currMonth] + " " + currYear);

setText('Mo', dateNumbersOfMonthOnWeek[0]);
setText('Di', dateNumbersOfMonthOnWeek[1]);
setText('Mi', dateNumbersOfMonthOnWeek[2]);
setText('Do', dateNumbersOfMonthOnWeek[3]);
setText('Fr', dateNumbersOfMonthOnWeek[4]);
setText('Sa', dateNumbersOfMonthOnWeek[5]);
setText('So', dateNumbersOfMonthOnWeek[6]);

};


function setText(id, val) {
if(val < 10){
val = '0' + val;
}
document.getElementById(id).innerHTML = val;

};


window.onload = calendar;[/CODE]


Now everything works fine, and if a Wednesday ends on a 31st than the Thursday afters starts with 1st *yay ?




But I hope somebody can help me with my next problem. With the code I already have, how can I display a previous or next week???

In the index.html I have a "<" button. You click on it and it should automatically display the week before. Can somebody give me a hint, link, example or whatever to show me how this is done? Please, I would be really thankful.

Best wishes and have a nice weekend!

Jackie
Copy linkTweet thisAlerts:
@vwphillipsJun 12.2015 — [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<div id="label"></div>
<span id="Mo" ></span>&nbsp; <span id="Di" > </span>&nbsp; <span id="Mi" > </span>&nbsp; <span id="Do" ></span>&nbsp; <span id="Fr" ></span>&nbsp; <span id="Mo" ></span> <span id="Sa" ></span>
<div onclick="days(7);" >+ week</div>
<div onclick="days(-7);" >- week</div>
<div onclick="months(1);" >+ month</div>
<div onclick="months(-1);" >- month</div>

<script type="text/javascript">
/*<![CDATA[*/
var month = ['Jänner', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];

function days(d){
calendar(new Date(calendar.date.getFullYear(),calendar.date.getMonth(),calendar.date.getDate()+d,1));
}

function months(m){
calendar(new Date(calendar.date.getFullYear(),calendar.date.getMonth()+m,calendar.date.getDate(),1));
}

function calendar(d) {
var today = d||new Date(),da=['Mo','Di','Mi','Do','Fr','Sa'],z0=0;
var day = today.getDay();
if (day !== 01) { // Only manipulate the date if it isn't Mon.
today.setHours(-24 * (day - 1));
}
document.getElementById('label').innerHTML=month[today.getMonth()] + ' ' + (today.getFullYear());
calendar.date=today;
for (;z0<da.length;z0++){
d=new Date(today.getFullYear(),today.getMonth(),today.getDate()+z0,1)
setText(da[z0], d.getDate());
}


};


function setText(id, val) {
if(val < 10){
val = '0' + val;
}
document.getElementById(id).innerHTML = val;

};

window.onload = calendar;
/*]]>*/
</script>
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@JMRKERJun 13.2015 — Nice implementation 'vwphillips'. ?

Just playing around with your code and made some modifications for my own amusement.

Ignore post if I'm off base with the changes. ? (Some of changes for english readers) :o

[code=php]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Weekly Calendar</title>

<style type="text/css">
#lblWeek div { display:inline-block; width:2em; font-size:20px; }
.btn { width:6em; }
#Mo, #Di, #Mi, #Do, #Fr, #Sa, #Su { cursor:pointer; }
</style>

</head>
<body>
<h3 id="lblMonth"></h3>
<div id="lblWeek" style="display:inline-block">
<div>Mo</div> <div>Tu</div> <div>We</div>
<div>Th</div> <div>Fr</div> <div>Sa</div>
<!-- --> <div>Su</div> <!-- Seven day display -->
<br>
<div id="Mo"></div> <div id="Di"></div> <div id="Mi"></div>
<div id="Do"></div> <div id="Fr"></div> <div id="Sa"></div>
<div id="Su"></div> <!-- Seven day display -->
</div ><p>

<button class="btn" onclick="days(-7)">- week</button>
<button class="btn" onclick="days(7)">+ week</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button class="btn" onclick="months(-1)">- month</button>
<button class="btn" onclick="months(1)">+ month</button><br>
<button class="btn" onclick="years(-1)">- year</button>
<button class="btn" onclick="years(1)">+ year</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button class="btn" onclick="calendar(new Date())">Today</button>

<div id="dateChoiceInformation"></div>

<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?312081-week-planner
// Highly modified by JMRKER

var month = ['January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'];

function days(d){
calendar(new Date(calendar.date.getFullYear(),calendar.date.getMonth(),calendar.date.getDate()+d,1));
}

function months(m){
calendar(new Date(calendar.date.getFullYear(),calendar.date.getMonth()+m,calendar.date.getDate(),1));
}

function years(y){
calendar(new Date(calendar.date.getFullYear()+y,calendar.date.getMonth(),calendar.date.getDate(),1));
}

function calendar(d) {
var sel;
// var today = d||new Date(), da=['Mo','Di','Mi','Do','Fr','Sa'],z0=0; // Six day display
var today = d||new Date(), da=['Mo','Di','Mi','Do','Fr','Sa','Su'],z0=0; // Seven day display
var day = today.getDay();
if (day !== 01) { today.setHours(-24 * (day - 1)); } // Only manipulate the date if it isn't Mon.
document.getElementById('lblMonth').innerHTML=month[today.getMonth()] + ' ' + (today.getFullYear());
calendar.date=today;
for (;z0<da.length;z0++){
d=new Date(today.getFullYear(),today.getMonth(),today.getDate()+z0,1)
setText(da[z0], d.getDate());
sel = document.getElementById(da[z0]);
sel.info = d; // .toDateString();
// sel.onclick = function() { alert(this.info.toDateString()); } // do something else here
sel.onclick = function() { choiceActions(this.info); } // do something else here
}
};

function choiceActions(d) {
var sel = document.getElementById('dateChoiceInformation');
sel.innerHTML = 'Information for: '+d.toDateString();
sel.innerHTML +='<p>Display something about <br>'+d.toString();
// could load external file and display contents using ajax function
// or collect text information and save using a <form> to a server-side file
// or ???
}

function setText(id, val) {
if(val < 10) { val = '0' + val; }
document.getElementById(id).innerHTML = val;
};

// window.onload = function() { calendar(new Date()); }
calendar(new Date());

</script>
</body>

</html>
[/code]

I believe the 'choiceActions()' function would be of most benefit

for further modifications for 'jackie_ds' purposes.
×

Success!

Help @jackie_ds spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...