Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue with leap years #7

Open
mura791007 opened this issue Oct 25, 2022 · 3 comments
Open

Issue with leap years #7

mura791007 opened this issue Oct 25, 2022 · 3 comments
Assignees
@psarando
Labels
question

Comments

@mura791007
Copy link

Hello Paul,

I’m Alex Munoz a candidate member of Mexico Tolkiendili Association. Actually I’m working on a project where we want to integrate a calendar to our web page. So I started working with your examples from shire-reckoning site. I’m not a JS or HTML programmer even though I do more VBScript; I think I have something that is able to work for us. But I have some doubts regarding leap-years; right now all is working so good for the shire calendar except the leap-years.

If I put the June 25 2016 date it does not show the Overlithe day, I'm thinking that the issue can be something with the calendar rules I'm using these ones:

calendarRules: TolkienCalendars.GondorCalendar.RECKONING_RULES_GREGORIAN,

I will appreciate your support on this.

This is the code that I'm using now:

    <title>Calendarios de Tolkien</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/react@16/umd/react.production.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/react-dom@16/umd/react-dom.production.min.js"></script>

    <link rel="stylesheet" href="../lib/TolkienCalendars.css"/>
    <script type="text/javascript" src="../lib/TolkienCalendars.js"></script>

    <style>
        .myDiv {
          border: 5px outset black;
          background-color: rgb(209, 243, 248);
          text-align: left;
          width: 550px;
          height: 210px    
        }

        .myDiv2 {
          border: 5px outset black;
          background-color: white;
          text-align: left;
          width: 550px;
          height: 150px    
        }
    </style>

</head>
<body onload="myFunction(new Date(),0)">
    
    <div class="myDiv2">
        <h1 style="font-size:25px;"> Sociedad Tolkiendili de México, AC. <img align="middle" src="LogoSTOLKMEX.jpg" width="150" height="130"> </h1>
    </div>
    <p></p>

    <div class="myDiv">
        <p id="CurrentDate" style="text-align:left; font-weight: bold;" ></p>
        <form> 
            <label for="Today_2">  Fecha Calendario Gregoriano Moderno:</label>
            <input type="date" id="Today_2" name="Today_2" onchange="myFunction(this.value,1,0)"> 
        </form>
        <p></p>

        <from method="get">
            <label for="region">  Seleccione el tipo de Nombres:</label>
            <input list="Myregions" name="region" id="region" value="Nombres de la Comarca" onchange="myFunction(0,1,this.value)" onclick="ClearMyList()">
            <datalist id="Myregions">
                <option value="Nombres de la Comarca">
                <option value="Nombres de Bree">
                <option value="Nombres de Tolkien">
            </datalist>
        </from>
        <form action="/action_page.php">
            <p>Mostrar:</p>
            <input type="radio" id="year1" name="ShowSelect" value=1 onclick="myFunction(0,0,0)">
            <label for="year1">Año Completo</label><br>
            <input type="radio" id="month1" name="ShowSelect" value=0 onclick="myFunction(0,0,0)" checked>
            <label for="month1">Solo el Mes</label><br>  
          </form>
    </div>

    <script>
        const d = new Date();
        document.getElementById("CurrentDate").innerHTML = "Fecha Actual: " + d.toDateString();
    </script>

   <p></p>
   <script type="text/javascript">
        function ClearMyList(){
            document.getElementById("region").value="" //text-align: left;

        }
   </script>

    <div id="shire-calendar"></div>
    <script type="text/javascript">
        function myFunction(val, extra, regionType) {
        const gregorianStartDate = new Date(1, 0, 1, 0, 0, 0);
            gregorianStartDate.setFullYear(1, 11, 21);
            let Today_1;
            switch (val) {
                case 0:
                    //alert("Day: " + Today_1);
                    break;
                default:
                    Today_1 = new Date(val); //new Date(2016, 5, 24, 0, 0, 0); // 
                    Today_1.setDate(Today_1.getDate()+extra); 
                    break;
            }
            let MyregionType;
            switch (regionType) {
                case "Nombres de la Comarca":
                    MyregionType = "shire";
                    break;
                case "Nombres de Bree":
                    MyregionType = "bree";
                    break;
                case "Nombres de Tolkien":
                    MyregionType = "tolkien";
                    break;
                case 0:
                    //alert("Region: " + MyregionType);
                    break;
                default:
                    MyregionType = "shire";
                    break;
            }
            let YearShow;
            YearShow=document.getElementById("year1").checked
            //alert(YearShow);
            ReactDOM.render(
            React.createElement(TolkienCalendars.ShireCalendar, {
                startDate: gregorianStartDate,
                className: "shire-calendar",
                caption: "Calendario de la Comarca",
                monthViewLayout: "VERTICAL",
               // monthView: 0,
                yearView: YearShow,
                region:MyregionType,
                date: Today_1,
                calendarRules: TolkienCalendars.GondorCalendar.RECKONING_RULES_GREGORIAN,

            }),
            document.getElementById("shire-calendar")
        );}
    </script>

</body>

Your example:

image

My example:

image
@psarando psarando self-assigned this Oct 26, 2022
@psarando
Copy link
Owner

Hello Alex,

This would be caused by the startDate: gregorianStartDate setting you are using, because you are using gregorianStartDate.setFullYear(1, 11, 21). This means leap-years will be reckoned every 4 years, with year 1 as running from Dec. 21, 1AD through Dec. 20, 2AD. That would mean the first Overlithe would be due 4 years later, in summer of 5AD, and subsequently in 2017, rather than 2016.

In order to sync up the Shire leap-years with Gregorian leap-years, you want to use gregorianStartDate.setFullYear(0, 11, 21), so that year 1 of the Shire Calendar runs from Dec. 21, 1BC through Dec. 20, 1AD.

Although, this is already the default this project uses! So you can also just eliminate the startDate: gregorianStartDate setting altogether!

The same is true for calendarRules: TolkienCalendars.GondorCalendar.RECKONING_RULES_GREGORIAN, which is also the default and can be omitted from your settings.

I hope this answers your question, and I hope my calendar project will be useful for the Mexico Tolkiendili Association website!

@mura791007
Copy link
Author

mura791007 commented Oct 26, 2022 via email

@psarando psarando changed the title Issue with lap years Issue with leap years Oct 28, 2022
@psarando
Copy link
Owner

We know that there is a discrepancy with the Durin's day celebration because of the effect of the moon phases.

I recently came across a good post that summarizes how to find Durin's Day at https://thedwarrowscholar.com/2013/09/22/is-durins-day-upon-us/, and it agrees with some other sources I've read.

By that reckoning, I think today would be a good candidate for this year's Durin's Day :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@psarando psarando

Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@psarando @mura791007