Home
Description
Kalendar.js is a Javascript pop-up calendar which display Holidays, seasons, phares of the moon, daylight savings dates and sunrise sunset time.
The bases of the code was taken from a order processing system I wrote. It was used to show when orders were to ship. I rewrote it as popup to go with a note taking web app.
In order for Kalendar to determine sunrise and sunset, your browser must allow Kalendar to obtain your location.
This
Video
explains how to set this up.
You will need to install SunCalc
Document for kalendar.js
Document for moonphase.js
For More Information on moon.js
Download kalendar-1.0.tgz
Constructor()
The constructor calls init() and establishes the division that will contain the calendar. The Kalendar class is a static class, however if more than one calendar is to be used an instance of each must be declared. In this case the constructor() is called.Example:
const calendar1 = new Kalendar('calendar1-div');
const calendar2 = new Kalendar('calendar2-div');
constructor(div);
init()
init() establishes the division that will contain the calendar, and initializes required variables. While it initializes the HTML tags in the calendars division, it does not display the calendar. A call to to .dialog('open') is required to display the calendar.| Type | Variable | Description |
|---|---|---|
| string | div | The division that will contain the calendar dialog. |
static init(div);
setLocation()
Set the location's latitude and longitude for sunrise and sunset. (If not set the sunrise & sunset will not be in the tool tip.)| Type | Variable | Description |
|---|---|---|
| number | longitude | The longitude for the sun rise/set times |
| number | latitude | The latitude for the sun rise/set times |
static setLocation(latitude, longitude);
navLocation()
The navigator.geolocation read-only property returns a Geolocation object that gives Web content access to the location of the device. This allows a website or app to offer customized results based on the user's location.| Type | Variable | Description |
|---|---|---|
| position | pos | The location returned by the browser |
static navLocation(pos);
setDate()
Set the date, year and mouth to be displayed.| Type | Variable | Description |
|---|---|---|
| number | year | The year |
| number | month | The month |
static setDate(year,month);
getOffset()
Get the offset of the first row to the 1st date. In order to determine the first cell to be populated.| return | number | The offset |
static getOffset();
getDaysInMonth()
Get total number of days in the current month.Note: The when executed without arguments it using the current year & month being displayed.
| Type | Variable | Description |
|---|---|---|
| number | year=this.year | The year |
| number | month=this.month | The month |
| return | number | The total number of days the month |
static getDaysInMonth(year = this.year, month = this.month);
getPrevNextMonth()
Get the month before and after the current month and the number of days in the previous month in oder to fill in the cells at the beginning of the calendar.When executed:
| this.prev_date | is set to the previous month | |
| this.next_date | is set to the next month | |
| this.prev_days_in_month | is set to the previous months number of days | |
static getPrevNextMonth();
prevYear()
Display the previous year.
static prevYear();
nextYear()
Display the next year.
static nextYear();
prevMonth()
Display the previous month.
static prevMonth();
nextMonth()
Display the next month.
static nextMonth();
addDayHeader()
Add the the days of the week to heading of calendar table.
static addDayHeader();
addRows()
Add the rows of calendar table.
static addRows();
display()
Display the calendar. This method fills the calendar dialog box's HTML content.
static display();
displayYear()
Display the entire year in a pop-up box.| Type | Variable | Description |
|---|---|---|
| number | year | The year to be displayed |
static displayYear(year);
displayMonths()
Display the months in the year's pop-up box.| Type | Variable | Description |
|---|---|---|
| number | year | The year of the months that are to be displayed |
static displayMonths(year);
allowNotes()
Allow Notes| Type | Variable | Description |
|---|---|---|
| boolean | allow | Turn on or off adding notes |
static allowNotes(allow);
setNotesList()
Input the note list. A note is a line of text that will be displayed in a given date cell.Note: The note list is in the JSON format.
| Type | Variable | Description |
|---|---|---|
| Array | list | A array of note objects |
A note object:
const note = {
year: {number}, // The year
month: {number}, // The month
day: {number}, // The day
text: {string} // The text to be displayed on the date
};
Example of a note list:
var mylist = [{ year: 2024, month: 2, day: 14, text: "The 14th of February"},
{ year: 2024, month: 4, day: 1, text: "The 1st of April" },
{ year: 2024, month: 5, day: 20, text: "The 20th of May" },
{ year: 2024, month: 8, day: 4, text: "The 4th of August" },
{ year: 2024, month: 5, day: 20, text: "The 20th of May" },
{ year: 2024, month: 3, day: 17, text: "The 17th of March" },
{ year: 2024, month: 12, day: 25, text: "The 25th of December"}];
static setNotesList(list);
addNote()
This method is called by the ADD button in the Add Note dialog box. It' adds the date and text to the list that appears in the dialog box. It should noted that the notes inthe list are not saved until the SAVE button is prest.A note is a line of text that will be displayed in a given date cell.
static addNote();
readNotes()
The list of notes are stored in a JSON formatted file. And this method can be called to to read that file. The method executes a jQuery post to a php script, which reads the file stored on the host.
static readNotes();
zeroPad =>
The function expression zeroPad is used in the addNotesTable() function to add leading zeros to dates in the yyyy-mm-dd format.
static zeroPad = (num, places) => String(num).padStart(places, '0');
addNotesTable()
This method populates the Add Note dialog box's HTML content including the table which contains the current notes.
static addNotesTable();
delNote()
Delete a note from the current list of notes. Note this does not delete the note from the file. The button SAVE in the note dialog box will rewrite the file. So if the dialog box is canceled the list will remain intacted.| Type | Variable | Description |
|---|---|---|
| number | note | The index of the note to be deleted |
static delNote(note);
addEvent()
Add an event.| Type | Variable | Description |
|---|---|---|
| string | ev | The event string (See the event array for details) |
static addEvent(ev);
isMatch()
This method is used by the isEvent() method to determine if the current cell match the position prosion of the event string. Note the isEvent() method has already determined the position is not a number.| Type | Variable | Description |
|---|---|---|
| string | ev | The position string (See the event array for details) |
| number | day_of_week | The day of the week (0-6) |
| number | day | The day of the month (1-31) |
static isMatch(str,day_of_week,day);
isEvent()
While inserting the HTML in the calendar a loop in the display() method traves the days of the month, createing a cell for each day. This method returns true if the cells date matchs. Then that event will be inserted the cell.| Type | Variable | Description |
|---|---|---|
| number | month | The month |
| number | day | The day of the month (1-31) |
| number | day_of_week | The day of the week (0-6) |
| string | type | The type of event (See the event array for details) |
static isEvent(year,month,day,day_of_week,type);
easter()
Return the date that Easter is on in the given year.| number | year | The year |
| return | Date | The date Easter falls on |
static easter(year);
Arrays & Variables
events []
Holidays and Events
Event structure "mm/dd/T:text"| mm | month 01-12 |
| dd or position | day of month ( 01-31 or day position ) |
| T | Event type "H" = Holiday, "I" = Information, "P" = Personal |
| text | Displayed texmt |
The day position:
First 3 characters are the day of the week.
Followed by the position first, second, third, fourth or last.
The day position ignores case.
static events = ["01/1/H:New Year's Day",
"02/02/H:Groundhog Day",
"02/14/H:Valentine's Day",
"02/MonThird/H:President's Day",
"03/05/H:Mother-in-Law Day",
"03/SunSecond/I:Daylight Savings Starts",
"03/17/H:St. Patrick's Day",
"04/01/H:April Fool's Day",
"04/15/H:Income Tax Day",
"04/28/H:Arbor Day",
"05/1/H:International Workers’ Day",
"05/SunSecond/H:Mother's Day",
"05/SatThird/H:Armed Forces Day",
"05/MonLast/H:Memorial Day",
"06/SunThird/H:Father's Day",
"07/04/H:Independence Day",
"09/MonFirst/H:Labor Day",
"10/MonSecond/H:Indigenous People's Day",
"10/31/H:Halloween",
"11/SunFirst/I:Daylight Savings Ends",
"11/11/H:Veterans' Day",
"11/ThuFourth/H:Thanksgiving Day",
"12/24/H:Christmas Eve",
"12/25/H:Christmas",
"12/31/H:New Year's Eve"];
notesList []
static notesList = [];
dayNames []
static dayNames = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
dayShortNames []
static dayShortNames = ['SUN','MON','TUE','WED','THU','FRI','SAT'];
monthNames []
static monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'];
Principal Lunar Phases
static NEW_MOON = 0;
static FIRST_QUARTER = 1;
static FULL_MOON = 2;
static LAST_QUARTER = 3;
Kalendar
Download kalendar.js
////////////////////////////////////////////////////////////////////////////////////////////////
//
// Kalendar a Javascript calendar widget.
//
// Written by: Don Dugger
// Date: 2024-04-29
//
// Copyright (C) 2024 Acme Software Works, Inc.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
// 1. Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
//
// 2. Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
// GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
// HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
// LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT
// OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
//
////////////////////////////////////////////////////////////////////////////////////////////////
/**
* This JavaScript file contains the Kalendar class
*
* @projectname Kalendar
* @version 1.o
* @author Don Dugger
* @copyright 2024
*
*/
/** @class */
class Kalendar {
/** Holidays and Events
*```none
*Event structure "mm/dd/T:text"
* mm month 1-12
* dd or position day of month ( 1-31 or day position )
* T Event type "H" = Holiday, "I" = Information, "P" = Personal
* text Displayed texmt
*```
*<p>
* The day position:<br />
* First 3 characters are the day of the week.
* Followed by the position first, second, third, fourth or last.
* The day position ignores case.
*</p>
*/
static events = ["01/1/H:New Year's Day",
"02/02/H:Groundhog Day",
"02/14/H:Valentine's Day",
"02/MonThird/H:President's Day",
"03/05/H:Mother-in-Law Day",
"03/SunSecond/I:Daylight Savings Starts",
"03/17/H:St. Patrick's Day",
"04/01/H:April Fool's Day",
"04/15/H:Income Tax Day",
"04/28/H:Arbor Day",
"05/1/H:International Workers’ Day",
"05/SunSecond/H:Mother's Day",
"05/SatThird/H:Armed Forces Day",
"05/MonLast/H:Memorial Day",
"06/SunThird/H:Father's Day",
"07/04/H:Independence Day",
"09/MonFirst/H:Labor Day",
"10/MonSecond/H:Indigenous People's Day",
"10/31/H:Halloween",
"11/SunFirst/I:Daylight Savings Ends",
"11/11/H:Veterans' Day",
"11/ThuFourth/H:Thanksgiving Day",
"12/24/H:Christmas Eve",
"12/25/H:Christmas",
"12/31/H:New Year's Eve"];
//
//
static notesList = [];
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Initialize
* @param {string} div - This is the <div> where the calendar will be displayed.
*/
static init(div) {
this.date = new Date(); // Temporary for testing
this.season = Date.getSeasons();
this.date.setHours( 0, 0, 0, 0 );
this.year = Kalendar.date.getFullYear();
this.month = this.date.getMonth();
Kalendar.getOffset();
this.days_in_month = Kalendar.getDaysInMonth();
Kalendar.getPrevNextMonth();
this.div = div;
this.tab = "kal-table";
this.head = "kal-header";
this.displayed = false;
/** If the browser is given permission to obtain the location it will be set automatically.
Other wise it can be set with the setLocation() function.
Note the call to display() is in navLocation()
*/
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(Kalendar.navLocation,null,{enableHighAccuracy: true});
} else {
this.latitude = NaN;
this.longitude = NaN;
}
Kalendar.display();
this.notesAllowed = false;
} // End of init()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* The constructor
* @constructor
* @param {string} div -This is the <div> where the calendar will be displayed.
*/
constructor(div) {
Kalendar.init(div);
} // End of constructor()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* set the location's latitude and longitude for sunrise and sunset.
* (If not set the sunrise & sunset will not be in the tool tip.)
* @param {number} latitude The latitude for the sun rise/set times
* @param {number} longitude The longitude for the sun rise/set times
*/
static setLocation(latitude, longitude) {
this.latitude = latitude;
this.longitude = longitude;
Kalendar.display();
} // End of setLocation()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* The navigator.geolocation read-only property returns a Geolocation object that gives
* Web content access to the location of the device. This allows a website or app to offer
* customized results based on the user's location.
*
* @param {position} pos - The location returned by the browser
*/
static navLocation(pos) {
Kalendar.latitude = pos.coords.latitude;
Kalendar.longitude = pos.coords.longitude;
Kalendar.display();
} // End of navLocation()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Set the date, year and mouth to be displayed.
*
* @param {number} year - The year to be set
* @param {number} month - The month to be set
*/
static setDate(year,month) {
this.date = new Date(year,month-1,1);
this.season = Date.getSeasons();
this.date.setHours( 0, 0, 0, 0 );
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
this.getOffset();
this.days_in_month = this.getDaysInMonth();
this.getPrevNextMonth();
Kalendar.display();
} // End of setDate()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Get the offset of the first row to the 1st date. In order to determine the first cell
* to be populated.
*
* @return {number} - The offset
*/
static getOffset() {
const tmp_date = new Date(this.year,this.month,1);
this.offset = tmp_date.getDay();
return this.offset;
} // End of getOffset()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Get total number of days in the current month.
*
* @param {number} [year=this.year] - The year to be used
* @param {number} [month=this.month] - The month to get the number
*/
static getDaysInMonth(year = this.year, month = this.month) {
return new Date(year, month+1, 0).getDate();
} // End of getDaysInMonth()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Get the month before and after the current month and the number of days in the previous
* month in oder to fill in the cells at the beginning of the calendar.
*/
static getPrevNextMonth() {
this.prev_date = new Date(this.year, this.month-1);
this.next_date = new Date(this.year, this.month+1);
this.prev_days_in_month = this.getDaysInMonth(this.prev_date.getFullYear(),this.prev_date.getMonth());
} // End of getPrevNextMonth()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Go to the previous Year.
*/
static prevYear() {
this.setDate(this.year-1,this.month+1,1);
this.display();
} // End of prevYear()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Go to the next Year.
*/
static nextYear() {
this.setDate(this.year+1,this.month+1,1);
this.display();
} // End of nextYear()
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Go to the previous month.
*/
static prevMonth() {
this.setDate(this.year,this.month,1);
this.display();
} // End of prevMonth()
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Go to the next month.
*/
static nextMonth() {
this.setDate(this.year,this.month+2,1);
this.display();
} // End of nextMonth()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Add the the days of the week to heading of calendar table.
*/
static dayNames = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
static addDayHeader() {
var str = "<tr>\n\t";
for (var day=0; day<7;++day) {
str += "<td class=\"kalendar-head\" align='center'>" + this.dayNames[day] + "</td>";
}
str += "\n</tr>\n";
$('#' + this.tab).append(str);
} // End of addDayHeader()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Add the rows of calendar table.
*/
/** @type {number} */
static NEW_MOON = 0;
static FIRST_QUARTER = 1;
static FULL_MOON = 2;
static LAST_QUARTER = 3;
static monthNames = ['January','February','March','April','May','June','July','August','September','October','November','December'];
static addRows() {
var ct = 0 // Cell count
var day_of_month = 0; // Days in the current (will be set later)
var day_of_next_month = 0; // The count of days in the next month, this fills out the last cells.
// Make sure there are enough rows to cover all the day in the current month.
var num_rows = Math.ceil((this.offset + this.days_in_month)/7);
// Init prev_day to the first cells day of the previous month.
var prev_day = this.prev_days_in_month - this.offset + 1;
/////////////////////////////////////////////////////////////////////////////////////////////
// Get the phases of the Moon
var phase_days = [];
// Clear the moon phase array
for ( var i=0; i<=this.days_in_month; ++i ) {
phase_days[i] = -1;
}
/////////////////////////////////////////////////////////////////////////////////////////////
// Initialize the moon phase object
var moon = new MoonPhase()
// Get the New Moon phases
var phdate = moon.nextphase(this.year,this.month+1,1,0,0,this.NEW_MOON);
phase_days[phdate.getDate()] = this.NEW_MOON;
// Check for the second New Moon this month
// It should be noted that any given phase could appear twice in the same month.
phdate = moon.nextphase(this.year,this.month+1,phdate.getDate()+2,0,0,this.NEW_MOON);
if ( phdate.getMonth() == this.month ) {
phase_days[phdate.getDate()] = this.NEW_MOON;
}
// Get the First Quarter phases
phdate = moon.nextphase(this.year,this.month+1,1,0,0,this.FIRST_QUARTER);
phase_days[phdate.getDate()] = this.FIRST_QUARTER;
// Check for the second First Quarter this month
phdate = moon.nextphase(this.year,this.month+1,phdate.getDate()+2,0,0,this.FIRST_QUARTER);
if ( phdate.getMonth() == this.month ) {
phase_days[phdate.getDate()] = this.FIRST_QUARTER;
}
// Get the Full Moon phases
phdate = moon.nextphase(this.year,this.month+1,1,0,0,this.FULL_MOON);
phase_days[phdate.getDate()] = this.FULL_MOON;
// Check for the second Full Moon this month
phdate = moon.nextphase(this.year,this.month+1,phdate.getDate()+2,0,0,this.FULL_MOON);
if ( phdate.getMonth() == this.month ) {
phase_days[phdate.getDate()] = this.FULL_MOON;
}
// Get the Last Quarter phases
phdate = moon.nextphase(this.year,this.month+1,1,0,0,this.LAST_QUARTER);
phase_days[phdate.getDate()] = this.LAST_QUARTER;
// Check for the second Last Quarter this month
phdate = moon.nextphase(this.year,this.month+1,phdate.getDate()+2,0,0,this.LAST_QUARTER);
if ( phdate.getMonth() == this.month ) {
phase_days[phdate.getDate()] = this.LAST_QUARTER;
}
////////////////////////////////////////////////////////////////////////////////////////
/**
* Put in the rows of the calendar.
*/
for (var row=0; row<num_rows;++row) {
// First the row tag
var str = "<tr>\n\t";
////////////////////////////////////////////////////////////////////////////////////
/**
* The Seven days
*/
for (var day=0; day<7;++day) {
// First cells of the previous month and the first days of next month
if( ct < this.offset || ct > (this.days_in_month + this.offset - 1) ) {
str += "<td class=\"kal-inactive-cell kal-cell\"> ";
if ( ct > (this.days_in_month + this.offset - 1) ) {
str += ++day_of_next_month;
} else {
str += prev_day++;
}
str += "</td>";
} else {
++day_of_month; // Count the days of the month
// Get holidays and other events
var holiday = this.isEvent(this.year,this.month,day_of_month,day,"H");
var info = this.isEvent(this.year,this.month,day_of_month,day,"I");
var personal = this.isEvent(this.year,this.month,day_of_month,day,"P");
var text = "";
if ( holiday != "") {
text = "<br /> " + holiday;
}
if ( info != "") {
text += "<br /> " + info;
}
if ( personal != "") {
text += "<br /> " + personal;
}
////////////////////////////////////////////////////////////////////////////
/**
* Set the cell type
*/
var now = new Date();
if ( this.year == now.getFullYear()
&& this.month == now.getMonth()
&& day_of_month == now.getDate() ) {
str += "<td class=\"kal-today-cell kal-cell kal-comment-cell\">";
} else if ( holiday != "") {
str += "<td class=\"kal-holiday-cell kal-cell kal-comment-cell\">";
} else if ( info != "") {
str += "<td class=\"kal-info-cell kal-cell kal-comment-cell\">";
} else if ( personal != "") {
str += "<td class=\"kal-personal-cell kal-cell kal-comment-cell\">";
} else if ( day == 0 || day == 6 ) {
str += "<td class=\"kal-weekend-cell kal-cell kal-comment-cell\">";
} else {
str += "<td class=\"kal-base-cell kal-cell kal-comment-cell\">";
}
////////////////////////////////////////////////////////////////////////////
/**
* Display the day of the month.
*/
str += "<span style=\"font-size:1.3em\"> " + day_of_month + "</span>";
////////////////////////////////////////////////////////////////////////////
/**
* Display phase of the Moon
*/
switch(phase_days[day_of_month]) {
case this.NEW_MOON :
str += " " + "<img src=\"images/moon0.png\" width=\"20px\" height=\"20px\">";
break;
case this.FIRST_QUARTER :
str += " " + "<img src=\"images/moon2.png\" width=\"20px\" height=\"20px\">";
break;
case this.FULL_MOON :
str += " " + "<img src=\"images/moon4.png\" width=\"20px\" height=\"20px\">";
break;
case this.LAST_QUARTER :
str += " " + "<img src=\"images/moon6.png\" width=\"20px\" height=\"20px\">";
break;
}
////////////////////////////////////////////////////////////////////////////
/**
* Display Content.
*/
str += "<span class=\"kal-holiday-text\">" + text + "</span><br />";
for (var i=0;i<this.notesList.length; ++i) {
if ( this.year == this.notesList[i].year && this.month == (this.notesList[i].month-1) && day_of_month == this.notesList[i].day ) {
str += "<span class=\"kal-content\">" + " " + this.notesList[i].text + "</span><br />\n";
}
}
////////////////////////////////////////////////////////////////////////////
/**
* Tool Tips - includes full data.
*/
str += "<span class=\"kal-comment\">" + this.monthNames[this.month] + " " + day_of_month + "," + this.year + "<br />";
if (!isNaN(this.latitude)) {
var sundate = new Date(this.year,this.month,day_of_month,16,0,0);
var times = SunCalc.getTimes(sundate, this.latitude, this.longitude);
////////////////////////////////////////////////////////////////////////
//
// Tool Tips - includes Sunrise & Sonset.
//
if ( times.sunrise.getMinutes() < 10 ) {
str += "Sunrise " + times.sunrise.getHours() + ":0" + times.sunrise.getMinutes();
} else {
str += "Sunrise " + times.sunrise.getHours() + ":" + times.sunrise.getMinutes();
}
str += "<br />";
if ( times.sunset.getMinutes() < 10 ) {
str += "Sunset " + times.sunset.getHours() + ":0" + times.sunset.getMinutes();
} else {
str += "Sunset " + times.sunset.getHours() + ":" + times.sunset.getMinutes();
}
}
// End of Tool tips.
str += "</span>";
// End of cell.
str += "</td>";
}
++ct;
}
str += "\n</tr>\n";
$('#' + this.tab).append(str);
}
} //End of addRows()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Display the calendar.
*/
static display() {
// If the buttons have already been displayed simply update the months & year
if ( this.displayed ) {
$('#kal-month').text(this.monthNames[this.month]);
$('#kal-prev-button').text(this.monthNames[this.prev_date.getMonth()]);
$('#kal-year-button').text(this.year);
$('#kal-next-button').text(this.monthNames[this.next_date.getMonth()]);
} else {
// If this is the first time, add the buttons
this.displayed = true;
$('#' + this.div).html("");
$('#' + this.div).append("<p id=\"kal-month\" align=\"center\">" + this.monthNames[this.month] + "</p>");
$('#' + this.div).append("<div id=\"kal-header\" align=\"center\">\n</div>");
// previous month button
$('#' + this.head).append("<button class=\"kal-button\" id=\"kal-prev-button\" onclick=\"Kalendar.prevMonth()\" align=\"center\">" + this.monthNames[this.prev_date.getMonth()] + "</button>");
// previous year button
$('#' + this.head).append("<button class=\"kal-year-button\" id=\"kal-prev-year-button\" onclick=\"Kalendar.prevYear()\" align=\"center\"><strong><</strong></button>");
// display year button (may be used to display a full year in the future
$('#' + this.head).append("<button class=\"kal-button\" id=\"kal-year-button\" align=\"center\" onclick='Kalendar.displayYear(Kalendar.year)'>" + this.year + "</button>");
// next year button
$('#' + this.head).append("<button class=\"kal-year-button\" id=\"kal-next-year-button\" onclick=\"Kalendar.nextYear()\" align=\"center\"><strong>></strong></button>");
// next month button
$('#' + this.head).append("<button class=\"kal-button\" id=\"kal-next-button\" onclick=\"Kalendar.nextMonth()\" align=\"center\">" + this.monthNames[this.next_date.getMonth()] + "</button>");
$('#' + this.div).append("<br />");
$('body').append($('<div/>', {
id: 'kal-notes-dlog',
title: 'Add Note'
}));
$('body').append($('<div/>', {
id: 'kal-year-dlog'
}));
}
$('#kal-table').html("");
$('#' + this.div).append("<table id=\"kal-table\" align=\"center\">\n</table>");
Kalendar.addDayHeader();
Kalendar.addRows();
// Initialize the calendar dialog box.
if ( this.notesAllowed ) {
$( "#" + this.div ).dialog({
autoOpen: false,
modal: true,
open: function() {
$(this).css("height", "105ch");
$(this).parent().css("height", "auto");
$(this).parent().css("width", "auto");
$(this).parent().position({
my: "center",
at: "center",
of: window,
collision: "fit"
});
},
buttons: {
"TODAY": function() {
const today = new Date();
Kalendar.setDate(today.getFullYear(),today.getMonth()+1,today.getDate());
},
"ADD NOTE": function() {
Kalendar.addNotesTable();
$('#kal-notes-dlog').dialog('open');
},
"OK": function() {
$( this ).dialog( "close" );
}
}
});
} else {
$( "#" + this.div ).dialog({
autoOpen: false,
modal: true,
open: function() {
$(this).css("height", "105ch");
$(this).parent().css("height", "auto");
$(this).parent().css("width", "auto");
$(this).parent().position({
my: "center",
at: "center",
of: window,
collision: "fit"
});
},
buttons: {
"TODAY": function() {
const today = new Date();
Kalendar.setDate(today.getFullYear(),today.getMonth()+1,today.getDate());
},
"OK": function() {
$( this ).dialog( "close" );
}
}
});
}
// Initialize the year dialog box.
$( "#kal-year-dlog" ).dialog({
autoOpen: false,
modal: true,
open: function() {
$(this).parent().css("height", "auto");
$(this).parent().css("width", "auto");
$(this).parent().position({
my: "center",
at: "center",
of: window,
collision: "fit"
});
},
buttons: {
"OK": function() {
$( this ).dialog( "close" );
},
}
});
// Initialize the notes dialog box.
$( "#kal-notes-dlog" ).dialog({
autoOpen: false,
height: "30em",
modal: true,
open: function() {
// Set the inner content to fill the parent's height
$(this).css("height", "30em");
// Ensure the overall dialog container keeps the desired height
$(this).parent().css("height", "auto");
$(this).parent().css("width", "auto");
$(this).parent().position({
my: "center",
at: "center",
of: window,
collision: "fit"
});
},
buttons: {
"CANCEL": function() {
$( this ).dialog( "close" );
},
"SAVE": function() {
$.post('saveNotes.php', { 'notes' : JSON.stringify(Kalendar.notesList) });
$( this ).dialog( "close" );
// Update the current calendar
$('#kal-table').html("");
$('#' + this.div).append("<table id=\"kal-table\" align=\"center\">\n</table>");
Kalendar.addDayHeader();
Kalendar.addRows();
},
}
});
$("#" + Kalendar.div ).css("height", "105ch");
$("#" + Kalendar.div ).parent().css("height", "auto");
$("#" + Kalendar.div ).parent().css("width", "auto");
$("#" + Kalendar.div ).parent().position({
my: "center",
at: "center",
of: window,
collision: "fit"
});
} // End of display();
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Allow Notes
*
* @param {boolean} allow - Turn on or off adding notes
*/
static allowNotes(allow) {
Kalendar.notesAllowed = allow;
Kalendar.display();
} // End of allowNotes()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Input the note list.
*
* @param {string[]} list - The list of notes
*/
static setNotesList(list) {
Kalendar.notesList = list;
Kalendar.display();
} // End of setNotesList()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* A note is a line of text that will be displayed in a given date cell.
*/
static addNote() {
var dateStr = $('#datepicker').val();
var textStr = $('#noteText').val();
var parts = dateStr.split("-");
var yearStr = parts[0];
var mon = parts[1];
var dy = parts[2];
var new_note = { year: parts[0], month: parseInt(parts[1]), day: parseInt(parts[2]), text: textStr };
this.notesList.push(new_note);
this.addNotesTable();
} // End of addNote()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* The list of notes are stored in a JSON formatted file.
*/
static readNotes() {
$.post('readNotes.php',
function(data) {
Kalendar.setNotesList(JSON.parse(data));
}, "json" );
} // End of readNotes()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Add the content of the note dialog box.
*/
static zeroPad = (num, places) => String(num).padStart(places, '0');
static addNotesTable() {
$('#kal-notes-dlog').html("");
$('#kal-notes-dlog').append("<div id='kal-notes-header'/>");
$('#kal-notes-header').append("<strong>Date: </strong><input type='text' id='datepicker' style='height: 18px'>");
$('#kal-notes-header').append(" ");
$('#kal-notes-header').append("<strong>Text: </strong><input type'text' id='noteText' size='30' style='height: 18px'>");
$('#kal-notes-header').append(" <button class='kal-add-button' id='addButton' style=\"border-radius: 5px\" onclick='Kalendar.addNote()'>ADD</button>");
$('#kal-notes-dlog').append("<div id='kal-notes-div'/>");
$('#kal-notes-div').append("<table>\n");
$('#kal-notes-div').append("<tr><th style='width: 15em'>DATE</th><th style='width: 30em'>TEXT</th</tr>\n");
var str = "";
for ( var i=0; i<this.notesList.length; ++i) {
str += "<tr>\n<td class=\"kal-note-table-cell\" style='width: 15em'>";
str += this.notesList[i].year + "-" + this.zeroPad(this.notesList[i].month,2) + "-" + this.zeroPad(this.notesList[i].day,2);
str += "</td><td align=\"left\" class=\"kal-note-table-cell\" style='width: 30em'>" + this.notesList[i].text + "</td>\n";
str += "</td><td align=\"left\" class=\"kal-note-table-cell\" >";
str += "<button class=\"kal-trash-button\" style=\"border-radius: 5px\" onclick='Kalendar.delNote(" + i + ")'><img id='kal-trash-icon' /></button>\n";
str += "</td>\n</tr>\n";
}
$('#kal-notes-div').append(str);
$('#kal-notes-div').append("</table>\n");
$("#datepicker").datepicker({
showButtonPanel: true,
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
showOn: "button",
buttonImage: "images/calendar2.png",
buttonImageOnly: true,
buttonText: "Select date"
});
$(".ui-datepicker-trigger").css({"height":"26px","width":"26px","top":"8px","left":"3px","position":"relative"});
} // End of addNotesTable()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Delete a note from the current list of notes.
* Note this does not delete the note from the file. The "SAVE" button in the note dialog
* box will rewrite the file.
*
* @param {number} note - The index of the note to be deleted
*/
static delNote(note) {
this.notesList.splice(note,1);
this.addNotesTable();
} // End of delNote()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Display the entire year in a pop-up box.
*
* @param {number} year - The year to be displayed
*/
static displayYear(year) {
$('#kal-year-dlog').dialog({title:year});
$('#kal-year-dlog').html("");
$('#kal-year-dlog').append("<div id='kal-year-div' align='center' />");
var str = "";
str += "<table align='center'>";
var month = 0;
for ( var row=0;row<4;++row) {
str += "<tr>";
for ( var col=0;col<3;++col) {
++month;
str += "<td id='kal-year-month" + month + "' class='kal-year-cell'>";
str += "</td>";
}
str += "</tr>";
}
$('#kal-year-div').append(str);
this.displayMonths(year);
$('#kal-year-dlog').dialog("open");
} // End of displayYear()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Display the months in the year pop-up box.
*
* @param {number} year - The year to be displayed
*/
static displayMonths(year) {
var day = 0;
var ct = 0;
var str = "";
for ( var month=1;month<=12;++month) {
var date = new Date(year,month-1,1);
var offset = date.getDay();
var days_in_month = this.getDaysInMonth(year,month-1);
str += "<table>";
str += "<caption><strong>" + this.monthNames[month-1] + "</strong></caption>";
for ( var dow=0;dow<7;++dow) {
str += "<th class='kal-year-day-cell kal-header-color'>" + this.dayShortNames[dow] + "</th>";
}
//var num_rows = 5;
//if ( offset + days_in_month > (5 * 7) ) {
// num_rows = 6;
//}
for ( var row=0;row<6;++row) {
str += "<tr>";
for ( var col=0;col<7;++col) {
++ct;
if ( ct > offset && (ct - offset) <= days_in_month ) {
++day;
var now = new Date();
var holiday = this.isEvent(year,month-1,day,col,"H");
var info = this.isEvent(year,month-1,day,col,"I");
var personal = this.isEvent(year,month-1,day,col,"P");
var text = "";
if ( holiday != "") {
text += "<span class='kal-comment'>" + holiday + " </span>";
}
if ( info != "") {
text += "<span class='kal-comment'>" + info + " </span>";
}
if ( personal != "") {
text += "<span class='kal-comment'>" + personal + " </span>";
}
if ( year == now.getFullYear()
&& month-1 == now.getMonth()
&& day == now.getDate() ) {
str += "<td class='kal-year-day-cell kal-today-color kal-comment-cell'>" + day + text + "</td>";
} else if ( holiday != "") {
str += "<td class='kal-year-day-cell kal-holiday-color kal-comment-cell'>" + day + text + "</td>";
} else if ( info != "") {
str += "<td class='kal-year-day-cell kal-info-color kal-comment-cell'>" + day + text + "</td>";
} else if ( personal != "") {
str += "<td class='kal-year-day-cell kal-parsonal-color kal-comment-cell'>" + day + text + "</td>";
} else if ( col == 0 || col == 6 ) {
str += "<td class='kal-year-day-cell kal-weekend-color kal-comment-cell'>" + day + text + "</td>";
} else {
str += "<td class='kal-year-day-cell kal-day-color kal-comment-cell'>" + day + text + "</td>";
}
} else {
str += "<td class='kal-year-day-cell kal-inactive-color'> </td>";
}
}
str += "</tr>";
}
$('#kal-year-month' + month).append(str);
ct = 0;
day = 0;
str = "";
}
} // End of displayMonth()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* addEvents()
*
* Add an event.
*
* Event structure "mm/dd/T:text"
* - mm month 1-12
* - dd or position day of month ( 1-31 or day position )
* - T Event type "H" = Holiday, "I" = Information, "P" = Personal
* - text Displayed text
*
* The day position:
* First 3 characters are the day of the week.
* Followed by the position first, second, third, fourth or last.
* The day position ignores case.
*
* @param {string} ev - The event
*/
static addEvent(ev) {
this.events.push(ev);
this.display();
} // End of addEvents()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* isMatch ( Holidays, Information and Personal events )
*
* @param {string} str - The day of month of position
* @param {number} day_of_week - The day of the week (0-6)
* @oaram {number} day - The day of the month (1-31)
*/
static dayShortNames = ['SUN','MON','TUE','WED','THU','FRI','SAT'];
static isMatch(str,day_of_week,day) {
var dowStr = str.substr(0,3);
var week_day = -1;
dowStr = dowStr.toUpperCase();
for (var idx=0;idx<this.dayShortNames.length; ++idx) {
if ( this.dayShortNames[idx] == dowStr ) {
week_day = idx;
break;
}
}
if ( week_day == day_of_week ) {
var posStr = str.substr(3,str.length-3);
posStr = posStr.toUpperCase();
switch(posStr) {
case 'FIRST' :
if ( day <= 7 ) return true;
break;
case 'SECOND' :
if ( day > 7 && day <= 14 ) return true;
break;
case 'THIRD' :
if ( day > 14 && day <= 21 ) return true;
break;
case 'FOURTH' :
if ( day > 21 && day <= 28 ) return true;
break;
case 'LAST' :
if ( day > (this.days_in_month - 7) ) return true;
break;
}
}
return false;
} // End of isMatch()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* isEvent()
*
* Check if a data is a holiday.
*
* @param {number} year - The year
* @param {number} month - The month
* @param {number} day - The day of the month
* @param {number} day_of_week - The day of week
* @param {string} type - Type of event
*/
static isEvent(year,month,day,day_of_week,type) {
var rtn = "";
var season = Date.getSeasons(year);
const easter_date = this.easter(year);
if ( easter_date.getMonth() == month && easter_date.getDate() == day && type == "H") {
rtn += ("Easter");
}
////////////////////////////////////////////////////////////////////////////////////////
//
// Display the Seasons
//
if ( month == 2 && season[1].getDate() == day && type == "I") {
rtn += "Spring Equinox";
}
if ( month == 5 && season[2].getDate() == day && type == "I") {
rtn += "Summer Solstice";
}
if ( month == 8 && season[3].getDate() == day && type == "I") {
rtn += "Fall Equinox";
}
if ( month == 11 && season[4].getDate() == day && type == "I") {
rtn += "Winter Solstice";
}
for (var i=0;i<this.events.length;++i) {
var item = this.events[i].split(":");
var when = item[0].split("/");
var day_of_month = parseInt(when[1]);
var event_month = parseInt(when[0]);
if ( isNaN(day_of_month) && (event_month-1) == month && when[2] == type) {
if ( this.isMatch(when[1],day_of_week,day) == true ) {
rtn += (item[1]);
}
}
if ( (event_month-1) == month && day_of_month == day && when[2] == type ) {
rtn += (item[1]);
}
}
return rtn;
} // End of isEvent()
//
////////////////////////////////////////////////////////////////////////////////////////////
/**
* Calculate Easter
*
* @param {number} year - The year
*/
static easter(year) {
var date, a, b, c, m, d;
// Instantiate the date object.
date = new Date;
// Set the timestamp to midnight.
date.setHours(0,0,0,0);
// Set the year.
date.setFullYear(year);
// Find the golden number.
a = year % 19;
// Choose which version of the algorithm to use based on the given year.
b = ( 2200 <= year && year <= 2299 ) ?
( ( 11 * a ) + 4 ) % 30 :
( ( 11 * a ) + 5 ) % 30;
// Determine whether or not to compensate for the previous step.
c = ( ( b === 0 ) || ( b === 1 && a > 10 ) ) ?
( b + 1 ) :
b;
// Use c first to find the month: April or March.
m = ( 1 <= c && c <= 19 ) ? 3 : 2;
// Then use c to find the full moon after the northward equinox.
d = ( 50 - c ) % 31;
// Mark the date of that full moon—the "Paschal" full moon.
date.setMonth(m,d);
// Count forward the number of days until the following Sunday (Easter).
date.setMonth(m,d+(7-date.getDay()));
// Gregorian Western Easter Sunday
return date;
} // End of easter()
} // End of class Kalendar
////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////// End of File //////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////
Moon Phases
Download moonphase.js
///////////////////////////////////////////////////////////////////////////////////////////////
//
// moonphase.js
//
// Written by: Don Dugger
// Date: 2024-04-29
//
// Copyright (C) 2024 Acme Software Works, Inc.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
// 1. Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
//
// 2. Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
// GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
// HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
// LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT
// OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
//
///////////////////////////////////////////////////////////////////////////////////////////////
/** @class */
class MoonPhase {
///////////////////////////////////////////////////////////////////////////////////////////////
RAD = (3.1415926535897/180.0);
IGREG = (15+31*(10+12*1582));
MEAN_LUNAR_CYCLE = 29.53058868;
///////////////////////////////////////////////////////////////////////////////////////////////
/**
* flmoon() calculates the julian date of nth lunar cycle and nph phase
* of the moon since Jan 1900
* n is the number of lunar cycle since Jan 1900 - ???
* This is the original function from the book.
* It's been modified to work in JavaScript.
* I also rewrote it to be litte clearer. And added
* comments where I unterstood what was going on and
* increased the accuracy of a few constants.
* @param {number} n The number of lunar cycles.
* @param {number} nph The lunar phase.
* @return {number} The full Julian date of the nth lunar cycle plus nph phase
* Note that the integer and fractional parts are
* returned by references.
*/
flmoon(n,nph)
{
var jd = 0;
var int_part = 0;
var lunar_cycles = n + ( nph / 4.0 ); // the total number lunar cycle
// nph = 4 is one lunar cycle
var t = lunar_cycles / 1236.85; // 1236.85 is the number of lunar cycle per Julian Century
var t2 = t * t; // Square for frequent use
/** Sun's mean anomaly */
var sun_anomaly = 359.2242 + ( 29.10535608 * lunar_cycles );
/** Moon's mean anomaly */
var moon_anomaly = 306.0253 + ( 385.81691806 * lunar_cycles ) + ( 0.010730 * t2 );
/** Not sure of what's up here, but two of the numbers very interesting
* Notice that 2415020.75933 is used a referce epochs for mean time of lunar cycle which is 1900 Jan 1 at 6:13 AM
* And 29.53058868 is the "Synodic month" or the mean time in days between new moons.
*/
var xtra = 0.75933 + ( 1.53058868 * lunar_cycles ) + ( ( ( 1.78e-4 ) - ( 1.55e-7 ) * t ) * t2 );
/** Ok 2415020 is Julian date 1899 at noon + .75933 is the Julian date of a new moon
* 28 + 1.53058868 is mean time of a lunar cycle ,
* and 7 close to 7.38264717 a lunar phase but unlike
* the first two the tractional part dose not seem to be accounted for.
*/
jd = 2415020 + ( 28 * n ) + ( 7 * nph );
/** Looks like this is all being done to adjust the variations in the maen lunar cycle of 29.53058868
* Which from what I understand is due the moons orbit in relationship to the earths orbit around the sun.
*/
if(nph == 0 || nph == 2) // New or Full - sun earth moon inline
xtra += ( ( 0.1734-3.93e-4 * t ) * Math.sin(this.RAD*sun_anomaly) ) - ( 0.4068 * Math.sin(this.RAD*moon_anomaly) );
else // 1st quarder last quarter - moon 90 deegree left or right of the earth and suns line
xtra += ( ( 0.1721-4.0e-4 * t ) * Math.sin(this.RAD*sun_anomaly) ) - ( 0.6280 * Math.sin(this.RAD*moon_anomaly) );
/** This parts easy just put the integer and fractional parts right */
int_part = parseInt( xtra >= 0.0 ? Math.floor(xtra) : Math.ceil(xtra-1.0) );
jd += int_part;
var frac = xtra - int_part;
return (jd + frac);
} // End of flmoon
///////////////////////////////////////////////////////////////
/**
* Julian2Calendar() computes the julian date
* @param {number} jd The Julian date number.
* @param {number} mon The month.
* @param {number} day The day of the month.
* @param {number} year The year.
* @return {number} Note that all the return values are references.
*/
nextphase(year,mon,day,hr,min,nph)
{
var jd = 0;
var djd = 0.0;
var ph_jd = 0;
var frac = 0.0;
/** 12.37 is the number of lunar cycles per year
* n then is the number of lunar cycles since 1900 and the year month entered
*/
var n = parseInt(12.37*((year-1900)+((mon-0.5)/12.0)));
var intpart = 0.0;
// Get the starting Julian date */
jd = this.Calendar2Julian(year,mon,day);
djd = this.flmoon(n,nph) + 0.5;
while(jd < djd) {
djd = this.flmoon(--n,nph) + 0.5;
}
while(jd > djd) {
djd = this.flmoon(++n,nph) + 0.5;
}
var now = new Date();
djd -= (now.getTimezoneOffset() * (1.0/1440.0));
if(this.isDST(now)) djd -= (1.0/24.0);
ph_jd = parseInt(Math.floor(djd));
if(this.isDST(this.Julian2Calendar(jd))) {
djd += (1.0/24.0);
ph_jd = parseInt(Math.floor(djd));
}
frac = djd - Math.floor(djd);
var date = this.Julian2Calendar(ph_jd);
frac *= 24.0;
hr = parseInt(frac >= 0.0 ? Math.floor(frac) : Math.ceil(frac-1.0));
frac -= hr;
min = parseInt(Math.floor(60*frac));
date.setHours(hr);
date.setMinutes(min);
return date;
} // End of nextphase()
///////////////////////////////////////////////////////////////
/** isDST() returns true if the given date is day light savings time
* There are two versions, one which takes the Julian date and
* one that takes the monuth, day and year.
* @param {Date} date The date
* @return {boolean}
*/
isDST(date) {
let jan = new Date(date.getFullYear(), 0, 1).getTimezoneOffset();
let jul = new Date(date.getFullYear(), 6, 1).getTimezoneOffset();
return Math.max(jan, jul) !== date.getTimezoneOffset();
}
///////////////////////////////////////////////////////////////
/** Julian2Calendar() computes the julian date
* @param {number} jd The Julian date number.
* @param {number} mon The month.
* @param {number} day The day of the month.
* @param {number} year The year.
* @return Note that all the return values are references.
*/
Julian2Calendar(jd)
{
const GREG = 2299161;
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;
var year = 0;
var month = 0;
var day = 0;
if(jd >= GREG) {
a = parseInt((((jd-1867216)-0.25)/36524.25));
a = parseInt(jd+1+parseInt(a)-parseInt(0.25*parseInt(a)));
} else {
a = jd;
}
b = a+1524;
c = parseInt(6680+((b-2439870)-122.1)/365.25);
d = 365*c+parseInt(0.25*c);
e = parseInt((b-d)/30.6001);
day = parseInt((b-d-parseInt(30.6001*e)));
month = parseInt(e-1);
if(month > 12) month -= 12;
year = parseInt(c-4715);
if(month > 2) --year;
if(year <= 0) --year;
return new Date(year,month-1,day);
} // End of Julian2Calendar
//////////////////////////////////////////////////////////////
/** calendar2Julian() computes the date given a julian date
* @param {number} mon The month.
* @param {number} day The day of the month.
* @param {number} year The year.
*/
Calendar2Julian(year,month,day)
{
var jul;
var ja,jy=year,jm;
if(jy == 0) return(0);
if(jy < 0) ++jy;
if(month > 2) jm=month+1;
else {
--jy;
jm=month+13;
}
jul = parseInt(Math.floor(365.25*jy)+Math.floor(30.6001*jm)+day+1720995);
if(day+31*(month+12*year) >= this.IGREG) {
ja=parseInt(0.01*jy);
jul += 2-ja+parseInt(0.25*ja);
}
return(jul);
} // End of Calendar2Julian
} // End of class MoonPhase
///////////////////////////////////////////////////////////////
///////////////////// END OF FILE /////////////////////////////
///////////////////////////////////////////////////////////////
Seasons
Download seasons.js
/**
* This code is from:
* {@link https://stackoverflow.com/questions/5670678/javascript-coding-input-a-specific-date-output-the-season Orriginal soruse}
* Added by kennebec
*
*/
Date.fromJulian= function(j){
j= (+j)+(30.0/(24*60*60));
var A= Date.julianArray(j, true);
return new Date(Date.UTC.apply(Date, A));
}
Date.julianArray= function(j, n){
var F= Math.floor;
var j2, JA, a, b, c, d, e, f, g, h, z;
j+= .5;
j2= (j-F(j))*86400.0;
z= F(j);
f= j-z;
if(z< 2299161) a= z;
else{
g= F((z-1867216.25)/36524.25);
a= z+1+g-F(g/4);
}
b= a+1524;
c= F((b-122.1)/365.25);
d= F(365.25*c);
e= F((b-d)/30.6001);
h= F((e< 14)? (e-1): (e-13));
var JA= [F((h> 2)? (c-4716): (c-4715)),
h-1, F(b-d-F(30.6001*e)+f)];
var JB= [F(j2/3600), F((j2/60)%60), Math.round(j2%60)];
JA= JA.concat(JB);
if(typeof n== 'number') return JA.slice(0, n);
return JA;
}
Date.getSeasons= function(y, wch){
y= y || new Date().getFullYear();
if(y<1000 || y> 3000) throw y+' is out of range';
var Y1= (y-2000)/1000, Y2= Y1*Y1, Y3= Y2*Y1, Y4= Y3*Y1;
var jd, t, w, d, est= 0, i= 0, Cos= Math.degCos, A= [y],
e1= [485, 203, 199, 182, 156, 136, 77, 74, 70, 58, 52, 50, 45, 44, 29, 18, 17, 16, 14, 12, 12, 12, 9, 8],
e2= [324.96, 337.23, 342.08, 27.85, 73.14, 171.52, 222.54, 296.72, 243.58, 119.81, 297.17, 21.02,
247.54, 325.15, 60.93, 155.12, 288.79, 198.04, 199.76, 95.39, 287.11, 320.81, 227.73, 15.45],
e3= [1934.136, 32964.467, 20.186, 445267.112, 45036.886, 22518.443,
65928.934, 3034.906, 9037.513, 33718.147, 150.678, 2281.226,
29929.562, 31555.956, 4443.417, 67555.328, 4562.452, 62894.029,
31436.921, 14577.848, 31931.756, 34777.259, 1222.114, 16859.074];
while(i< 4){
switch(i){
case 0: jd= 2451623.80984 + 365242.37404*Y1 + 0.05169*Y2 - 0.00411*Y3 - 0.00057*Y4;
break;
case 1: jd= 2451716.56767 + 365241.62603*Y1 + 0.00325*Y2+ 0.00888*Y3 - 0.00030*Y4;
break;
case 2: jd= 2451810.21715 + 365242.01767*Y1 - 0.11575*Y2 + 0.00337*Y3 + 0.00078*Y4;
break;
case 3: jd= 2451900.05952 + 365242.74049*Y1 - 0.06223*Y2 - 0.00823*Y3 + 0.00032*Y4;
break;
}
var t= (jd- 2451545.0)/36525,
w= 35999.373*t - 2.47,
d= 1 + 0.0334*Cos(w)+ 0.0007*Cos(2*w);
est= 0;
for(var n= 0; n<24; n++){
est += e1[n]*Cos(e2[n]+(e3[n]*t));
}
jd+= (0.00001*est)/d;
A[++i]= Date.fromJulian(jd);
}
return wch && A[wch]? A[wch]: A;
}
Math.degRad= function(d){
return (d*Math.PI)/180.0
}
Math.degSin= function(d){
return Math.sin(Math.degRad(d))
}
Math.degCos= function(d){
return Math.cos(Math.degRad(d))
}
saveNotes.php
Download saveNotes.php
<?php ini_set('display_errors',1) ?>
<?php
if ( isset($_REQUEST['notes']) ) { $notes = $_REQUEST['notes']; }
$notefile = fopen("notes.txt", "w");
fwrite($notefile,$notes);
fclose($notefile);
?>
readNotes.php
Download readNotes.php
<?php ini_set('display_errors',1) ?>
<?php
$notefile = fopen("notes.txt", "r");
$notes = fread($notefile,filesize("notes.txt"));
fclose($notefile);
echo json_encode($notes);
?>
Kalendar Style Sheet
Download kalendar.css
/***********************************************************************
* Kalendar.css
*/
@media not all and (max-width: 2024px) {
.kalendar-div {
font: bold 12px verdana, arial, helvetica, sans-serif;
}
}
@media (max-width: 2024px) {
.kalendar-div {
font: bold 10px verdana, arial, helvetica, sans-serif;
}
}
@media not all and (max-width: 1500px) {
.kalendar-div {
font: bold 10px verdana, arial, helvetica, sans-serif;
}
}
@media (max-width: 1500px) {
.kalendar-div {
font: bold 9px verdana, arial, helvetica, sans-serif;
}
}
.kalendar-div {
text-align: left;
margin-right: 1%;
border : 5px;
border-color: gray;
border-style: outset;
background-color: #bbbbdd;
box-shadow: 10px 10px 5px #8888A8;
padding-left: 25px;
padding-right: 25px;
padding-top: 0px;
padding-bottom: 25px;
min-width: 144ch;
}
.kalendar-head {
font-size: 1.0em;
border : 1px;
border-style: outset;
padding-left: 10px;
padding-right: 10px;
padding-top: 0px;
padding-bottom: 0px;
background-color: #c0c0f0;
}
#kal-month { /* The month name at the top of the calendar */
font-size: 2.0em;
}
/***********************************************************************
* Cells
*/
.kal-cell {
font-size: 1.0em;
border-style: outset !important;
padding-left: 1px;
padding-right: 1px;
padding-top: 0px;
padding-bottom: 5px;
vertical-align: text-top;
height: 11ch;
min-width: 18ch;
}
.kal-base-cell {
border : 1px;
background-color: #e0e0f0;
}
.kal-weekend-cell {
border : 2px;
background-color: #a0c0f0;
}
.kal-holiday-cell {
border : 2px;
background-color: #40f0f0;
}
.kal-info-cell {
border : 2px;
background-color: #A0E0A0;
}
.kal-personal-cell {
border : 2px;
background-color: #A0A0F0;
}
.kal-inactive-cell {
font-size: 0.9em;
border : 2px;
background-color: #c0c0c0;
}
.kal-today-cell {
font-size: 1.2em;
border : 2px;
background-color: #f0f090;
}
/***********************************************************************/
.kal-holiday-text {
font-size: 0.8em;
}
/***********************************************************************
* Buttons
*/
.kal-button {
font-size: 1.0em;
background-image: linear-gradient(to bottom, #66aaff 0%, #4466cc 100%);
color: #ffffff;
padding-left: 2px;
padding-right: 1px;
padding-top: 3px;
padding-bottom: 3px;
margin: 3px;
min-width: 125px;
min-height: 23px;
}
.kal-button:hover {
color: #000000;
background-image: linear-gradient(to bottom, #aaeeff 0%, #66aaee 100%);
}
#kal-trash-icon {
width: 20px;
height: 20px;
padding-top: 2px;
content: url('images/trash-can-icon-white.png');
}
#kal-trash-icon:hover {
width: 20px;
height: 20px;
padding-top: 2px;
content: url('images/trash-can-icon-black.png');
}
.kal-trash-button {
font-size: 1.0em;
background-image: linear-gradient(to bottom, #66aaff 0%, #4466cc 100%);
color: #ffffff;
padding: 1px;
margin: 2px;
min-width: 40px;
min-height: 20px;
}
.kal-trash-button:hover {
color: #000000;
background-image: linear-gradient(to bottom, #aaeeff 0%, #66aaee 100%);
}
.kal-add-button {
font-size: 1.0em;
background-image: linear-gradient(to bottom, #66aaff 0%, #4466cc 100%);
color: #ffffff;
padding-left: 2px;
padding-right: 1px;
padding-top: 3px;
padding-bottom: 3px;
margin: 3px;
min-width: 45px;
min-height: 23px;
}
.kal-add-button:hover {
color: #000000;
background-image: linear-gradient(to bottom, #aaeeff 0%, #66aaee 100%);
}
.kal-year-button {
font-size: 1.0em;
background-image: linear-gradient(to bottom, #66aaff 0%, #4466cc 100%);
color: #ffffff;
padding-left: 2px;
padding-right: 1px;
padding-top: 3px;
padding-bottom: 3px;
margin: 3px;
min-width: 25px;
}
.kal-year-button:hover {
color: #000000;
background-image: linear-gradient(to bottom, #aaeeff 0%, #66aaee 100%);
}
@media not all and (max-width: 2024px) {
.ui-widget {
font-size: 1.1em !important;
}
}
@media (max-width: 2024px) {
.ui-widget {
font-size: 0.9em !important;
}
}
/*******************************************************************************
* Year display
*/
@media not all and (max-width: 2024px) {
.kal-year-div {
font: bold 12px verdana, arial, helvetica, sans-serif;
}
#kal-year-dlog {
font: bold 12px verdana, arial, helvetica, sans-serif;
}
}
@media (max-width: 2024px) {
.kal-year-div {
font: bold 9px verdana, arial, helvetica, sans-serif;
}
#kal-year-dlog {
font: bold 9px verdana, arial, helvetica, sans-serif;
}
}
.kal-year-cell {
font-size: 1.0em;
border : 2px;
border-style: outset;
padding: 5px;
background-color: #e0e0f0;
margin-right: auto;
margin-left: auto;
}
.kal-year-day-cell {
font-size: 1.0em;
border : 1px;
border-style: outset;
padding: 1px;
margin-right: auto;
margin-left: auto;
}
.kal-day-color {
background-color: #e0e0f0;
}
.kal-today-color {
background-color: #f0f090;
}
.kal-weekend-color {
background-color: #a0c0f0;
}
.kal-holiday-color {
background-color: #40f0f0;
}
.kal-info-color {
background-color: #A0E0A0;
}
.kal-personal-color {
background-color: #A0A0F0;
}
.kal-inactive-color {
background-color: #c0c0c0;
}
.kal-header-color {
background-color: white;
}
/***********************************************************************
* Comments
*/
.kal-comment-cell {
position:relative;
}
.kal-comment {
display:none;
position:absolute;
z-index:100;
border:1px;
background-color:white;
border-style:solid;
border-width:1px;
border-color:red;
padding:3px;
color:blue;
top:20px;
left:20px;
}
.kal-comment-cell:hover span.kal-comment {
display:block;
}
/***********************************************************************
* Notes
*/
@media not all and (max-width: 2024px) {
.kal-notes-div {
font: bold 12px verdana, arial, helvetica, sans-serif;
}
#kal-notes-dlog {
font: bold 12px verdana, arial, helvetica, sans-serif;
}
}
@media (max-width: 2024px) {
.kal-notes-div {
font: bold 9px verdana, arial, helvetica, sans-serif;
}
#kal-notes-dlog {
font: bold 9px verdana, arial, helvetica, sans-serif;
}
}
.kal-content { /* The notes font */
font-size: 0.9em;
}
.kal-note-table-cell {
font-size: 1.0em;
border : 1px;
border-style: outset;
padding-left: 10px;
padding-right: 10px;
padding-top: 1px;
padding-bottom: 1px;
background-color: #efefff;
margin-right: auto;
margin-left: auto;
}
#kal-notes-header {
font-size: 1.0em;
position:relative;
top: 0px;
height: 30px;
}
#kal-notes-div {
position:absolute;
top: 50px;
height: 26em;
width: 41em;
overflow:scroll;
border : 1px;
border-style: outset;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
}
#kal-notes-dlog .ui-dialog-content {
height: 100%; /* Make the content fill its container */
box-sizing: border-box; /* Ensure padding/borders are included */
overflow-y: hidden;
}
.ui-dialog-buttonpane .btn-left {
float: left;
}
/***********************************************************************/
/************************ End of File **********************************/
/***********************************************************************/
Basic Page
Download The basic page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Calendar</title>
<link rel="ICON" type="image/x-icon" href="favicon.png" />
<link rel="SHORTCUT ICON" href="favicon.png" />
<!-- Required JQuery code -->
<link href="jquery-ui-themes-1.13.2/themes/cupertino/jquery-ui.min.css" rel="stylesheet">
<script src="jquery-3.7.1.min.js"></script>
<script src="jquery-ui-1.13.2/jquery-ui.min.js"></script>
<!-- ********************************************************** -->
<!-- The Kalendar Style Sheet -->
<link rel="stylesheet" type="text/css" href="kalendar.css" />
<!-- Required for sunrise & sunset -->
<script src="suncalc-master/suncalc.js"></script>
<!-- Required for phases of the moon -->
<script src="moonphase.js"></script>
<!-- Required for Seasons -->
<script src="equinox.js"></script>
<!-- The Kalendar code -->
<script src="kalendar.js"></script>
<!-- ********************************************************** -->
<script type="text/javascript" language="Javascript1.2">
var mylist = [{ year: 2024, month: 2, day: 14, text: "The 14th of February"},
{ year: 2024, month: 4, day: 1, text: "The 1st of April" },
{ year: 2024, month: 5, day: 20, text: "The 20th of May" },
{ year: 2024, month: 8, day: 4, text: "The 4th of August" },
{ year: 2024, month: 5, day: 20, text: "The 20th of May" },
{ year: 2024, month: 3, day: 17, text: "The 17th of March" },
{ year: 2024, month: 12, day: 25, text: "The 25th of December"}];
$(document).ready(function() {
Kalendar.init('kalendarDlog');
// Here are some thing to try.
//Kalendar.allowNotes(true);
//Kalendar.setLocation(47.0585042, -123.27357);
//Kalendar.addEvent("3/17/P:Test text");
//Kalendar.setDate(2024,3);
//Kalendar.setNotesList(mylist);
Kalendar.readNotes();
});
</script>
</head>
<body bgcolor="#d0d0d0" style="font:10px verdana, arial, helvetica, sans-serif;">
<button class="ui-button" onclick="$('#kalendarDlog').dialog('open');">OPEN</button>
<div id="kalendarDlog" title="Kalendar" class="ui-dialog kalendar-div" align='center'>
</div>
</body>
</html>
For more information: info@acmesoftwareworks.com