let calendar = document.querySelector('.calendar');
let selected_date = "";
let cycle = $("#cycle").val();
let lasts = $("#lasts").val();
let calender_d = document.querySelectorAll(".res");
calender_d.forEach(c=>{
c.style.display = "none";
})
let arrows = document.querySelectorAll(".arrows");
arrows.forEach(c=>{
c.style.display = "none";
})
let calender_title = document.getElementById("calendar_header");
$('select').select2({
minimumResultsForSearch: Infinity
});
const month_names = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
isLeapYear = (year) => {
return (year % 4 === 0 && year % 100 !== 0 && year % 400 !== 0) || (year % 100 === 0 && year % 400 ===0)
}
getFebDays = (year) => {
return isLeapYear(year) ? 29 : 28
}
let selected_dates_d = [];
let period_days = [];
// Light Mode Calender
let month_list = calendar.querySelector('.month-list')
month_names.forEach((e, index) => {
let month = document.createElement('div')
month.innerHTML = `
${e}
`
month.querySelector('div').onclick = () => {
month_list.classList.remove('show')
curr_month.value = index
generateCalendar(index, curr_year.value)
}
month_list.appendChild(month)
})
let month_picker = calendar.querySelector('#month-picker')
month_picker.onclick = () => {
month_list.classList.add('show')
}
generateCalendar = (month, year) => {
let calendar_days = calendar.querySelector('.calendar-days')
let calendar_header_year = calendar.querySelector('#year')
let days_of_month = [31, getFebDays(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
calendar_days.innerHTML = ''
let currDate = new Date()
if (!month && month!==0) month = currDate.getMonth()
if (!year) year = currDate.getFullYear()
let curr_month = `${month_names[month]}`
month_picker.innerHTML = curr_month
calendar_header_year.innerHTML = year
// get first day of month
let first_day = new Date(year, month, 1)
for (let i = 0; i {
cycle = $("#cycle").val();
lasts = $("#lasts").val();
if(cycle==""){
alert("Please Select Cycle Length");
return;
}
calender_title.style.display = "none";
calender_d.forEach(c=>{
c.style.display = "block";
})
arrows.forEach(c=>{
c.style.display = "flex";
})
var elems = calendar.querySelectorAll(".sel-date-d");
[].forEach.call(elems, function(el) {
el.classList.remove("sel-date-d");
});
day.classList.add('sel-date-d');
selected_date = new Date(e.target.innerText+" "+curr_month+" "+curr_year.value);
calculate(selected_date,month,year);
});
if (i >= first_day.getDay()) {
day.classList.add('calendar-day-hover')
day.innerHTML = `
${i - first_day.getDay() + 1}`
day.innerHTML += `
`
if (i - first_day.getDay() + 1 === currDate.getDate() && year === currDate.getFullYear() && month === currDate.getMonth()) {
day.classList.add('curr-date')
day.innerHTML = `
${i - first_day.getDay() + 1}`
}
}
calendar_days.appendChild(day)
}
}
let currDate = new Date()
let curr_month = {value: currDate.getMonth()}
let curr_year = {value: currDate.getFullYear()}
generateCalendar(curr_month.value, curr_year.value)
document.querySelector('#prev-year').onclick = () => {
--curr_year.value
generateCalendar(curr_month.value, curr_year.value)
}
document.querySelector('#next-year').onclick = () => {
++curr_year.value
generateCalendar(curr_month.value, curr_year.value)
}
document.querySelector('#prev-month').onclick = () => {
if(curr_month.value == 0) {
--curr_year.value;
curr_month.value = 11;
}
else --curr_month.value;
generateCalendar(curr_month.value, curr_year.value)
}
document.querySelector('#next-month').onclick = () => {
if(curr_month.value == 11) {
++curr_year.value;
curr_month.value = 0;
}
else ++curr_month.value;
generateCalendar(curr_month.value, curr_year.value)
}
function calculate(date,month,year){
if(cycle==""){
alert("Please Select Cycle Length");
return;
}
if(lasts==""){
alert("Please Select Cycle Length");
return;
}
let days_of_month = [31, getFebDays(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
let curr_date = date.getDate();
selected_dates_d = [];
period_days = [];
console.log({lasts});
let flag = false;
for(j=0; j<16;j++){
for(let i = 0; i< parseInt(lasts); i++){
let newdate = curr_date+i;
// console.log(i);
// if(newdatedays_of_month[month]){
// newdate = newdate - days_of_month[month];
// period_days.push({date:newdate ,month:month+1,year});
// }
// else{
// curr_date = curr_date+parseInt(cycle);
if(newdate>days_of_month[month]){
newdate = newdate - days_of_month[month];
curr_date = curr_date - days_of_month[month];
month++;
}
if(month>11){
month = month-12;
if(!flag)
year++;
flag = true;
}
period_days.push({date:newdate ,month,year});
// }
}
curr_date = curr_date+parseInt(cycle);
if(curr_date>days_of_month[month]){
curr_date = curr_date - days_of_month[month];
month++;
}
console.log(period_days);
}
for(let i = 0; i< 5; i++){
let newdate = curr_date+i+parseInt(cycle)+5-22;
if(newdatedays_of_month[month]){
newdate = newdate - days_of_month[month];
selected_dates_d.push({date:newdate ,month:month+1,year});
}
else{
selected_dates_d.push({date:newdate ,month,year});
}
}
// let result = document.getElementById("result");
// result.innerHTML = month_names[selected_dates_d[0].month] + " " + selected_dates_d[0].date + " - " + month_names[selected_dates_d[4].month] + " " + selected_dates_d[4].date
gc("dark",period_days[0].month,period_days[0].year);
gc("dark_1",period_days[0].month+1,period_days[0].year);
gc("dark_2",period_days[0].month+2,period_days[0].year);
$(".next").on("click",()=>{
console.log("something")
gc("dark",period_days[0].month+3,period_days[0].year);
gc("dark_1",period_days[0].month+4,period_days[0].year);
gc("dark_2",period_days[0].month+5,period_days[0].year);
})
$(".prev").on("click",()=>{
gc("dark",period_days[0].month,period_days[0].year);
gc("dark_1",period_days[0].month+1,period_days[0].year);
gc("dark_2",period_days[0].month+2,period_days[0].year);
})
}
function gc(id,month,year){
if(month>11){
month= month-12;
year++;
}
cycle = $("#cycle").val();
lasts = $("#lasts").val();
const calendar = document.getElementById(id);
let calendar_days = calendar.querySelector('.calendar-days')
let calendar_header_year = calendar.querySelector('.year')
let days_of_month = [31, getFebDays(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
calendar_days.innerHTML = ''
let month_picker_d = calendar.querySelector('.month-picker');
let currDate = new Date()
if (!month && month!==0) month = currDate.getMonth()
if (!year) year = currDate.getFullYear()
let curr_month_d = `${month_names[month]}`
month_picker_d.innerHTML = curr_month_d
calendar_header_year.innerHTML = year
// get first day of month
let first_day = new Date(year, month, 1)
for (let i = 0; i <= days_of_month[month] + first_day.getDay() - 1; i++) {
let curr_day = i - first_day.getDay() + 1;
let day = document.createElement('div');
// if(curr_day25){
// if(i>=14)
// calendar_days.appendChild(day)
// continue;
// }
period_days.forEach((date,index) => {
if(date.date == curr_day && date.month == month && date.year == year){
day.classList.add('p-date');
}
});
// selected_dates_d.forEach((date,index) => {
// if(date.date == curr_day && date.month == month && date.year == year){
// day.classList.add('sel-date');
// if(index==0){
// day.classList.add('sel-date-first')
// }
// if(index==2){
// day.classList.add('highlighted-date')
// }
// if(index==selected_dates_d.length-1){
// day.classList.add('sel-date-last')
// }
// }
// });
if (i >= first_day.getDay()) {
day.classList.add('calendar-day-hover')
day.innerHTML = `
${i - first_day.getDay() + 1}`
day.innerHTML += `
`
if (i - first_day.getDay() + 1 === currDate.getDate() && year === currDate.getFullYear() && month === currDate.getMonth()) {
day.classList.add('curr-date')
day.innerHTML = `
${i - first_day.getDay() + 1}`
}
}
calendar_days.appendChild(day)
}
}
