125 lines
3 KiB
JavaScript
125 lines
3 KiB
JavaScript
window.cal = {};
|
|
|
|
cal.hilightNow = function()
|
|
{
|
|
$(".calendarSubWrapper").each(function()
|
|
{
|
|
if ($(this).children("h4").text() == moment().format("MMMM"))
|
|
{
|
|
console.log($(this).children("h4").text());
|
|
$(this).children(".calendar").each(function()
|
|
{
|
|
$(this).children("tbody").each(function()
|
|
{
|
|
$(this).children("tr").each(function()
|
|
{
|
|
$(this).children("td").each(function()
|
|
{
|
|
console.log($(this).html());
|
|
if ($(this).text() == moment().format("D"))
|
|
{
|
|
$(this).addClass("working");
|
|
console.log($(this).text());
|
|
}
|
|
})
|
|
})
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
cal.genYear = function(y)
|
|
{
|
|
var ret = "";
|
|
for (var i = 1; i <= 12; i++)
|
|
{
|
|
ret += cal.genPage(y, i);
|
|
}
|
|
return ret;
|
|
}
|
|
|
|
cal.switchMode = function()
|
|
{
|
|
switch(options.calendarSelector)
|
|
{
|
|
case "monthly":
|
|
$("#wholeYearSelect").css("display", "none");
|
|
$("#yearSelect, #monthSelect").css("display", "inline-block");
|
|
$("#calendarWrapper").html(cal.genPage($("#yearSelect").val(), $("#monthSelect").val()));
|
|
if ($("#yearSelect").val() == moment().format("Y"))
|
|
cal.hilightNow();
|
|
break;
|
|
case "yearly":
|
|
$("#wholeYearSelect").css("display", "inline-block");
|
|
$("#yearSelect, #monthSelect").css("display", "none");
|
|
$("#calendarWrapper").html(cal.genYear($("#wholeYearSelect").val()));
|
|
if ($("#wholeYearSelect").val() == moment().format("Y"))
|
|
cal.hilightNow();
|
|
break;
|
|
}
|
|
}
|
|
|
|
cal.genPage = function(y, m)
|
|
{
|
|
|
|
var ret = "";
|
|
var t = moment([y, m-1]);
|
|
var offset = t.format("d");
|
|
|
|
ret += `<div class="calendarSubWrapper">`
|
|
ret += `<h4>${t.format("MMMM")}</h4>`;
|
|
ret += `<table class="calendar">`;
|
|
ret += `<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>`
|
|
for (var i = 0;; i++)
|
|
{
|
|
ret += `<tr>`
|
|
if (i == 0)
|
|
{
|
|
for (var j = 0; j < offset; j++)
|
|
{
|
|
ret += `<td></td>`
|
|
}
|
|
for (var j = offset; j < 7; j++)
|
|
{
|
|
ret += `<td>${t.format("D")}</td>`
|
|
t.add(1, "day");
|
|
if (t.format("M") != m)
|
|
break;
|
|
}
|
|
}
|
|
else
|
|
{
|
|
for (var j = 0; j < 7; j++)
|
|
{
|
|
ret += `<td>${t.format("D")}</td>`
|
|
t.add(1, "day");
|
|
if (t.format("M") != m)
|
|
break;
|
|
}
|
|
}
|
|
ret += `</tr>`
|
|
if (t.format("M") != m)
|
|
break;
|
|
|
|
}
|
|
ret += `</table>`
|
|
ret += `</div>`
|
|
return ret;
|
|
}
|
|
|
|
window.options =
|
|
{
|
|
calendarSelector: "monthly"
|
|
}
|
|
|
|
window.updateFuncs = [ cal.switchMode ];
|
|
|
|
$(document).ready(function(){
|
|
initOption("#calendarSelector");
|
|
$(`#monthSelect option[value=${moment().format("M")}]`).attr("selected", "selected");
|
|
$("#yearSelect").val(moment().format("Y"));
|
|
$("#wholeYearSelect").val(moment().format("Y"));
|
|
$("#monthSelect, #yearSelect, #wholeYearSelect").on("change", cal.switchMode);
|
|
cal.switchMode();
|
|
});
|