I'm trying to get this Code working for me:
https://codepen.io/bbarry/pen/Eopdk
I want the calender to start at monday. I already changed the days:[] from Sa-So to Mo-Su in the .js.
But this changes only the header. The dates are still wrong, the 1st of december is still on a Wednesday, but it should be a Tuesday this year.
I'm pretty sure the problem is somewhere in the near this part in the .html:
<thead>
<tr class="c-weeks">
{{ for (i = 0; i < 7; i++) { }}
<th class="c-name">
{{: days[i] }}
</th>
{{ } }}
</tr>
</thead>
<tbody>
{{ for (j = 0; j < 6 && (j < 1 || mode === 'month'); j++) { }}
<tr>
{{ for (i = 0; i < 7; i++) { }}
{{ if (thedate > last) { dayclass = nextmonthcss; } else if (thedate >= first) { dayclass = thismonthcss; } }}
<td class="calendar-day {{: dayclass }} {{: thedate.toDateCssClass() }} {{: date.toDateCssClass() === thedate.toDateCssClass() ? 'selected':'' }} {{: daycss[i] }} js-cal-option" data-date="{{: thedate.toISOString() }}">
<div class="date">{{: thedate.getDate() }}</div>
{{ thedate.setDate(thedate.getDate() + 1);}}
</td>
{{ } }}
</tr>
{{ } }}
</tbody>
I already tried to change the loop (i = 0; i < 7; i++) But I am not able to fix it.
The loop for (i = 0; i < 7; i++) in html file just print 7 header cells, iterating the array days and printing the array value in the cell. As you have seen, this not affects the date. You need to handle the date object.
You have 2 date objects in the html file: one used for month view, and the other used for week view and day view.
Month view
Date object is instantiated at line 12 of html file:
first = new Date(year, month, 1),
This means new date object, passing arguments year (above as current year) and month (defined above as current year). Third argument is the day of the month to be considered as first day of the month. Set this parameter 0.
first = new Date(year, month, 0),
Week view
Date object is instantiated at line 20 of html file:
thedate = new Date(date);
and date is set at line 21:
thedate.setDate(date.getDate() - date.getDay());
Just set date as follows:
thedate.setDate(date.getDate() - date.getDay()+1);
Day view: no changes needed, because you use the same object of week view.
See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date
Related
I have a homework to make a calendar component on React
It has to show days like Windows calendar, start from Sunday even if it's an other month and ends with Saturday
And HTML has to be made like table (tr (weeks)...td (days)...)
it has to be:
one week:
<tr>
<td>day1</td>
<td>day2</td>
<td>day3</td>
<td>day4</td>
<td>day5</td>
<td>day6</td>
<td>day7</td>
</tr>
then next week the same
I have prepared an array with dates, array starts from Sunday and ends with Saturday
I was trying map() it and put jsx tags with dates inside. That works
But when I'm trying to put inside week tags (tr) I can't do it because I'm trying to put inside
</tr><tr>
closing one week and opening next week (I can't add one closing jsx tag)
I'm stuck
Could you give me some advises?
I give you an example for your reference:
import React from 'react';
export default function Calendar() {
let dateNum = 1;
let firstDay = new Date('2023-02-10'),
firstWeekDay;
let i;
let lastDate;
let month = [];
let week = [];
firstDay.setDate(1);
lastDate = new Date(firstDay.getTime());
lastDate.setMonth(lastDate.getMonth() + 1); // the first day of the next month
lastDate = new Date(lastDate.getTime() - 86400000); //the first day of the next month minus 1 day
firstWeekDay = firstDay.getDay();
for (i = 0; i < firstWeekDay; i++) {
week.push('');
}
for (i = firstWeekDay; i < 7; i++) {
week.push(dateNum++);
}
month.push(week);
console.log(dateNum <= lastDate.getDate());
while (dateNum <= lastDate.getDate()){
week=[];
for (i=0; i <7 ;i++){
if (dateNum <= lastDate.getDate()) {
week.push(dateNum++);
} else {
week.push("");
}
}
month.push(week);
}
return (
<table>
<thead>
<tr>
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</tr>
</thead>
{month.map((week) => (
<tr>
{week.map((day) => (
<td>{day}</td>
))}
</tr>
))}
</table>
);
}
I am trying to get all day (input by me) in a specific end date (input by me).
example :
I have day 1 and I have end date 10/12/2021
beginning from new Date():
output must be: 1/10/2021 1/11/2021 1/12/2021
day 1 for this month is not included because we are in day 20 and day 20 > day 1
Same, I chose day 20 (example) and end date = 19/12/2021 day 20 in end date not included because day 20 > end date day
I have already tried that as simple using if condition, but not great work because in this case, I have 8 conditions!
I want a simple code that works for this situation.
Hope that is what you wanted. You can simplify it more if you want.
const getRemainingDates = function(beginningDay, endDate){
const today = new Date()
const [endDateDay,endDateMonth,endDateYear] = endDate.split("/");
const remainingMonth = endDateMonth - (today.getMonth()+1);
for(let i = 0; i <= remainingMonth; i++){
if(i === 0){
if(beginningDay>today.getDate() && beginningDay>endDateDay){
console.log(`${beginningDay}/${today.getMonth()+1+i}/${today.getFullYear()}`)
}
else {}
}
if(i !== 0)console.log(`${beginningDay}/${today.getMonth()+1+i}/${today.getFullYear()}`)
}
}
getRemainingDates(21,"12/12/2021");
console.log()
getRemainingDates(1,"12/12/2021");
i'm trying to create a calendar using only pure javascript.
the code i'm working on is below.
i'm new to programming so if there are some remarks or advice i will welcome them and thank you very much.
Filling the Calendar table
function fillCalendar(selectedYearValue, selectedMonthValue, weeks){
if(document.getElementById("calendarRows")){
var x = document.getElementById("calendarRows");
var firstDayInMonth = new Date(selectedYearValue, selectedMonthValue, 1);
var firstDayNameIndex = firstDayInMonth.getDay();
currentMonth = firstDayInMonth.getMonth();
for(j = 0; j <= weeks; j++){
var newRow = x.insertRow(x.rows.length);
newRow.id = 'row'+j;
for(i = 0; i <= 6; i++){
if(i == firstDayNameIndex && currentMonth == firstDayInMonth.getMonth()){
var y = newRow.insertCell(i);
y.innerHTML = firstDayInMonth.getDate() + '<br>Ajouter un Planning';
y.className = 'bg-month border';
y.id = firstDayInMonth.getDate();
if(firstDayNameIndex == 6){
firstDayNameIndex = 0;
firstDayInMonth.setDate(firstDayInMonth.getDate() + 1);
}
else{
firstDayNameIndex++;
firstDayInMonth.setDate(firstDayInMonth.getDate() + 1);
}
}
else{
var y = newRow.insertCell(i);
y.className = 'bg-not-month';
}
}
}
}
}
getting the number of weeks in the given month
function getWeeks(selectedYearValue, selectedMonthValue){
var weeks = 0; //weeks to return
var firstDayInMonth = new Date(selectedYearValue, selectedMonthValue, 1); //get the first day in the month
var lastdayinmonth = new Date(selectedYearValue, selectedMonthValue + 1, 0); //get the last day in the month
var compar = new Date(selectedYearValue, selectedMonthValue, 1); //comparison date
compar.setDate(compar.getDate() + 1); //comparison date always +1 day
for(i = firstDayInMonth.getDate(); i <= lastdayinmonth.getDate(); i++){
if(firstDayInMonth.getDay() / 6 == 1 && compar.getMonth() == firstDayInMonth.getMonth()){
weeks++;
}
compar.setDate(compar.getDate() + 1);
firstDayInMonth.setDate(firstDayInMonth.getDate() + 1);
}
/*
first we iterate for the entire month
for each time we iterate and get a saturday we add 1 week
there was a problem that was when a saturday is the last day of the month
it adds a weeks even though we don't want it
that's why i added the compar date
when the month in the compar date is different than the month we're iterating for
it don't add another week
*/
return weeks;
}
Filling the Calendar table with the current month
function thisMonth(){
clearCalendar();
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
/////begin : append headers
if(document.getElementById('yearSelect') || document.getElementById('monthSelect')){
if(document.getElementById('yearSelect').length == 0 && document.getElementById('monthSelect').length == 0){
fillSelectYear();
fillSelectMonth();
}
}
if(document.getElementById("yearSelect")){
document.getElementById("yearSelect").value = ""+firstDay.getFullYear()+""; //select the respective year
}
if(document.getElementById("monthSelect")){
document.getElementById("monthSelect").value = ""+firstDay.getMonth()+""; //select the respective month
}
/////end : append headers
/////Begin : Get Number of weeks in month
var weeks = getWeeks(date.getFullYear(), date.getMonth());
/////End : Get Number of weeks in month
/////begin : Creating the calendar
fillCalendar(date.getFullYear(), date.getMonth(), weeks);
/////End : Creating the calendar
}
This is the Html code for the calendar
<table class="table border rounded" id="calendar-table">
<thead class="thead-dark">
<!-- begin : calendar Headers : year and month -->
<tr class="bg-dark">
<td colspan="1" class="text-center">
<button class="btn btn-primary" id="previous"><span>«</span></button>
</td>
<td colspan="5" class="text-center">
<ul class="list-inline">
<li class="list-inline-item">
<select class="custom-select" id="yearSelect">
</select>
</li>
<li class="list-inline-item">
<select class="custom-select" id="monthSelect">
</select>
</li>
<li class="list-inline-item">
<button class="btn btn-primary" id="currentMonthButton">Aujourd'hui</button>
</li>
</ul>
</td>
<td colspan="1" class="text-center">
<button class="btn btn-primary" id="next"><span>»</span></button>
</td>
<tr>
<!-- end : calendar Headers : year and month -->
<!-- begin : calendar Headers : name of days -->
<tr class="text-center">
<th scope="col">Dimanche</th>
<th scope="col">Lundi</th>
<th scope="col">Mardi</th>
<th scope="col">Mercredi</th>
<th scope="col">Jeudi</th>
<th scope="col">Vendredi</th>
<th scope="col">Samedi</th>
<!-- <th scope="col">Lundi</th>
<th scope="col">Mardi</th>
<th scope="col">Mercredi</th>
<th scope="col">Jeudi</th>
<th scope="col">Vendredi</th>
<th scope="col">Samedi</th>
<th scope="col">Dimanche</th> -->
</tr>
<!-- end : calendar Headers : name of days -->
</thead>
<!-- begin : calendar rows : dates -->
<tbody id="calendarRows">
</tbody>
<!-- end : calendar rows : dates -->
</table>
until now my code works perfectly the only problem is that i want to have the calendar days start at monday instead of sunday.
Have a good day.
I found the answer for my question and here it is:
first i changed my function from calculating the number of weeks to get getting the indexes of days in the month.
if the month begins for example in sunday(and sunday index is 0), i just change it's index to 6 so that it can become the last day of the week instead of the first week.
and the other days i simply decreased their index by 1.
Days indexes in the entire month
function getWeekDaysTable(selectedYearValue, selectedMonthValue){
var weekDays = []; //day indexes to return
var firstDayInMonth = new Date(selectedYearValue, selectedMonthValue, 1); //get the first day in the month
var lastdayinmonth = new Date(selectedYearValue, selectedMonthValue + 1, 0); //get the last day in the month
for(i = firstDayInMonth.getDate(); i <= lastdayinmonth.getDate(); i++){
if(firstDayInMonth.getDay() == 0){
weekDays.push(6);
}else{
weekDays.push(firstDayInMonth.getDay()-1);
}
firstDayInMonth.setDate(firstDayInMonth.getDate() + 1);
}
return weekDays;
}
for filling the calendar i just did a loop on the result of the getWeekDaysTable instead of doing a loop on the entire month indexes.
Filling the Calendar
function fillFrCalendar(selectedYearValue, selectedMonthValue, weeks){
if(document.getElementById("calendarRows")){
var x = document.getElementById("calendarRows");
var firstDayInMonth = new Date(selectedYearValue, selectedMonthValue, 1);
var countWeekDays = 0;
var weekDays = getWeekDaysTable(firstDayInMonth.getFullYear(), firstDayInMonth.getMonth());
var firstDayNameIndex = firstDayInMonth.getDay();
var currentMonth = firstDayInMonth.getMonth();
for(j = 0; j <= weeks; j++){
if(currentMonth == firstDayInMonth.getMonth()){
var newRow = x.insertRow(x.rows.length);
newRow.id = 'row'+j;
for(i = 0; i <= 6; i++){
if(i == weekDays[countWeekDays]){
var y = newRow.insertCell(i);
y.innerHTML = firstDayInMonth.getDate() + '<br>Ajouter un Planning';
y.className = 'bg-month border';
y.id = firstDayInMonth.getDate();
if(firstDayNameIndex == 6){
firstDayNameIndex = 0;
firstDayInMonth.setDate(firstDayInMonth.getDate() + 1);
countWeekDays++;
}
else{
firstDayNameIndex++;
firstDayInMonth.setDate(firstDayInMonth.getDate() + 1);
countWeekDays++;
}
}
else{
var y = newRow.insertCell(i);
y.className = 'bg-not-month';
}
}
}
}
}
}
I'm not very familiar with JavaScript but I want to create a script that will pull the every single day of the week for me. Here is what I am working with right now.
I added the picture "Get date" and I would like to make it so that when I hit the "get date" button, it will go through the script and assign dates to the cells above Monday, Tuesday, Wednesday, etc. as 8/8, 8/9, 8/10.
I think you'll have to do it in two steps:
Find the last Monday (which is up to 6 days in the past)
Starting from there, build a list of 7 days
var date = new Date(),
daysOfWeek = [];
// find last Monday
while(date.getDay() != 1) {
date.setDate(date.getDate() - 1);
}
// build array of dates
for(var n = 0; n < 7; n++) {
daysOfWeek.push((date.getMonth() + 1) + '/' + date.getDate());
date.setDate(date.getDate() + 1);
}
console.log(daysOfWeek);
Here is I'm trying to calculate the recurring dates within a range of dates. I'm pasting the code below which is only relevant to the recurrence part in my code. It has no logic of calculating the same day of each month or any pattern. It has only an interval. Please suggest a solution to find out the same day of each month from between[] array which already contains just a range between start and end dates.
switch (true) {
case (interval == 7):
//weekly
//Push in the selected dates in the selected array.
for (var i = 0; i < between.length; i += 7) {
selected.push(between[i]);
}
break;
case (interval == 30):
//Monthly
//Push in the selected dates in the selected array.
for (var i = 0; i < between.length; i += 30) {
selected.push(between[i]);
}
break;
case (interval == 15):
//Bi-Monthly
//Push in the selected dates in the selected array.
for (var i = 1; i < between.length; i += 15) {
selected.push(between[i]);
}
break;
case (interval == 0):
//One time event
//Push in the selected dates in the selected array.
for (var i = 0; i < 1; i++) {
selected.push(between[i]);
}
break;
default:
return undefined;
}
Criteria to find out the next recurring date should be like this:
For example a user selects Wednesday from the first week of January then the next recurring date should be the Wednesday from the first week of February.
First define selected Date object.
var between = [new Date(2015, 0, 11), new Date(2015, 0, 20)]
Now determine component that we need. They are: when is those next date should start.
var start = new Date(between[0].getFullYear(),between[0].getMonth(),between[0].getDate()+27)
it will have result the starting day in the next month and the same "day" as you describe.
Wrap it up to function:
var getNextMonth = function (date, howmany){
return new Date(date.getFullYear(), date.getMonth(), date.getDate()+28*howmany);
};
var getNextMonthRange = function (between, howmany){
return [getNextMonth(between[0], howmany), getNextMonth(between[1], howmany)]
};
Example
var between = [new Date(2015, 0, 11), new Date(2015, 0, 20)]; // Sunday, 11 Jan 2015 to Tuesday, 20 Jan 2015
var nextBetween = getNextMonthRange(between, 1); // Sunday, 8 Feb 2015 to Tuesday, 17 Feb 2015
I hope that is what you want :D