[英]How to make the week days start at monday instead of sunday in javascript please?
i'm trying to create a calendar using only pure javascript.我正在尝试仅使用纯 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><a href="">Ajouter un Planning</a>';
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这是日历的 Html 代码
<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.
如果月份从星期日开始(并且星期日索引为 0),我只是将它的索引更改为 6,以便它可以成为一周的最后一天而不是第一周。 and the other days i simply decreased their index by 1.
其他几天我只是将他们的指数减少了 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.为了填充日历,我只是对 getWeekDaysTable 的结果进行了循环,而不是对整个月份的索引进行了循环。
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><a href="">Ajouter un Planning</a>';
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';
}
}
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.