Title: Not Working with JS code
Last modified: September 18, 2020

---

# Not Working with JS code

 *  Resolved [Danstano](https://wordpress.org/support/users/danstano/)
 * (@danstano)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/not-working-with-js-code/)
 * I have a code for generating calendar. I am not sure why it won’t work with this
   beautiful theme which I MUST use. I tried changing theme the code works well 
   with others. The problem is that the links stop working when I use the navigation
   buttons on this calendar. Please help. Here is a link [https://s-qdxc55gtqcbbl.eu1.wpsandbox.org/](https://s-qdxc55gtqcbbl.eu1.wpsandbox.org/)[
   expires in 24hrs] of how the calendar behaves with my theme. If you need to login
   to test use user_login,password demo, demo
 * The code:
 *     ```
         <div class="wrapper">
           <div class="container-calendar">
             <h3 id="monthAndYear"></h3>
             <div class="button-container-calendar">
               <button id="previous" onclick="previous()">‹</button>
               <button id="next" onclick="next()">›</button>
             </div>
   
             <table class="table-calendar" id="calendar" data-lang="en">
               <thead id="thead-month"></thead>
               <tbody id="calendar-body"></tbody>
             </table>
   
             <div class="footer-container-calendar">
               <label for="month">Jump To: </label>
               <select id="month" onchange="jump()">
                 <option value=0>Jan</option>
                 <option value=1>Feb</option>
                 <option value=2>Mar</option>
                 <option value=3>Apr</option>
                 <option value=4>May</option>
                 <option value=5>Jun</option>
                 <option value=6>Jul</option>
                 <option value=7>Aug</option>
                 <option value=8>Sep</option>
                 <option value=9>Oct</option>
                 <option value=10>Nov</option>
                 <option value=11>Dec</option>
               </select>
               <select id="year" onchange="jump()"></select>
             </div>
           </div>
         </div>
   
        <script>
       function generate_year_range(start, end) {
         var years = "";
         for (var year = start; year <= end; year++) {
           years += "<option value='" + year + "'>" + year + "</option>";
         }
         return years;
       }
   
       var today = new Date();
       var currentMonth = today.getMonth();
       var currentYear = today.getFullYear();
       var selectYear = document.getElementById("year");
       var selectMonth = document.getElementById("month");
   
       var createYear = generate_year_range(2016, 2021);
       /** or
        * createYear = generate_year_range( 1970, currentYear );
        */
   
       document.getElementById("year").innerHTML = createYear;
   
       var calendar = document.getElementById("calendar");
       var lang = calendar.getAttribute('data-lang');
   
       var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
       var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
   
       var dayHeader = "<tr>";
       for (day in days) {
         dayHeader += "<th data-days='" + days[day] + "'>" + days[day] + "</th>";
       }
       dayHeader += "</tr>";
   
       document.getElementById("thead-month").innerHTML = dayHeader;
   
       monthAndYear = document.getElementById("monthAndYear");
       showCalendar(currentMonth, currentYear);
   
       function next() {
         currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
         currentMonth = (currentMonth + 1) % 12;
         showCalendar(currentMonth, currentYear);
         links () 
       }
   
       function previous() {
         currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
         currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
         showCalendar(currentMonth, currentYear);
         links () 
       }
   
       function jump() {
         currentYear = parseInt(selectYear.value);
         currentMonth = parseInt(selectMonth.value);
         showCalendar(currentMonth, currentYear);
         links () 
       }
   
       function showCalendar(month, year) {
   
         var firstDay = (new Date(year, month)).getDay();
   
         tbl = document.getElementById("calendar-body");
   
         tbl.innerHTML = "";
   
         monthAndYear.innerHTML = months[month] + " " + year;
         selectYear.value = year;
         selectMonth.value = month;
   
         // creating all cells
         var date = 1;
         for (var i = 0; i < 6; i++) {
           var row = document.createElement("tr");
   
           for (var j = 0; j < 7; j++) {
             if (i === 0 && j < firstDay) {
               cell = document.createElement("td");
               cellText = document.createTextNode("");
               cell.appendChild(cellText);
               row.appendChild(cell);
             } else if (date > daysInMonth(month, year)) {
               break;
             } else {
               cell = document.createElement("td");
               cell.setAttribute("data-date", date);
               cell.setAttribute("data-month", month + 1);
               cell.setAttribute("data-year", year);
               cell.setAttribute("data-month_name", months[month]);
               cell.className = "date-picker";
               cell.innerHTML = "<span>" + date + "</span>";
   
               if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
                 cell.className = "date-picker selected";
               }
               row.appendChild(cell);
               date++;
             }
   
           }
   
           tbl.appendChild(row);
         }
   
       }
   
       function daysInMonth(iMonth, iYear) {
         return 32 - new Date(iYear, iMonth, 32).getDate();
       }
   
       function links () {
       document.querySelectorAll('td.date-picker > span').forEach(element => {
         var year = element.parentElement.getAttribute('data-year');
         var month = element.parentElement.getAttribute('data-month');
         var day =  element.textContent;
         if (month.length === 1) {
           month = "0" + month;
         }
           if (day.length === 1) {
           day = "0" + day;
         }
         element.innerHTML = '<a href="https://example.com/dates/' + year + '-' + month + '-' + day + '">' + element.textContent + '</a> '
       })
       }
   
       links ()
       </script>
       ```
   
    -  This topic was modified 5 years, 8 months ago by [Danstano](https://wordpress.org/support/users/danstano/).
    -  This topic was modified 5 years, 8 months ago by [Danstano](https://wordpress.org/support/users/danstano/).

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Team Brainstorm Force](https://wordpress.org/support/users/brainstormteam/)
 * (@brainstormteam)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/not-working-with-js-code/#post-13431217)
 * Hi [@danstano](https://wordpress.org/support/users/danstano/),
 * First of all, you should **never** share any login info in the forum, even 
   if it’s just for a test, as mentioned in the [Forum Guidelines](https://wordpress.org/support/guidelines/#the-bad-stuff).
 * And regarding the code, how did you add it to your site? The link you provided,
   it’s already expired and we can’t check.
     Anyway, I would suggest reaching
   out to us through our [Support Portal](https://wpastra.com/support/free-support/)
   so we can take a look further on this and you can share your site login with 
   us safely. Please mention about this topic when you create a ticket, so we can
   monitor them both.  Kind regards, Herman 🙂
 *  Thread Starter [Danstano](https://wordpress.org/support/users/danstano/)
 * (@danstano)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/not-working-with-js-code/#post-13437464)
 * Hi,
 * I sent a support ticket yesterday.
 * Thank you.
 *  [Team Brainstorm Force](https://wordpress.org/support/users/brainstormteam/)
 * (@brainstormteam)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/not-working-with-js-code/#post-13442030)
 * That’s great [@danstano](https://wordpress.org/support/users/danstano/),
 * I notice that one of our support agents has responded to your ticket. Would you
   please continue the conversation related to this issue using the ticket and mark
   the topic as resolved.
 * Have a nice day and stay safe!
 * Kind regards,
    Herman 🙂
 *  Thread Starter [Danstano](https://wordpress.org/support/users/danstano/)
 * (@danstano)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/not-working-with-js-code/#post-13445504)
 * Hi Herman, the issue is still unresolved. I sent the logins as you requested 
   me days ago but still facing the problem. As above you said you were going to
   have a look at my site and requested that I sent you my logins. The calendar 
   js code is working perfectly on other themes. I have tested that with multiple
   themes. I am just facing the issue with Astra. The only way this can be fixed
   is if you spared some time to have a look. It’s days but I’m still patient that
   you might have a chance to look at what’s going on. I don’t want to give up this
   theme.
    -  This reply was modified 5 years, 8 months ago by [Danstano](https://wordpress.org/support/users/danstano/).
 *  [Team Brainstorm Force](https://wordpress.org/support/users/brainstormteam/)
 * (@brainstormteam)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/not-working-with-js-code/#post-13447753)
 * Hi [@danstano](https://wordpress.org/support/users/danstano/),
 * The reason why I asked you to close and mark as resolved this topic is that 
   you have already submitted a ticket through our Support Portal. I expected the
   conversations related to this issue are carried out through the ticket.
 * Anyway, please just allow us more time to investigate the issue and until our
   support agent back to you.
 * Kind regards,
    Herman 🙂
 *  Thread Starter [Danstano](https://wordpress.org/support/users/danstano/)
 * (@danstano)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/not-working-with-js-code/#post-13447894)
 * I always thought this is marked resolved after the issue is complete. And thanks
   for the attention on my issue.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Not Working with JS code’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/astra/4.13.4/screenshot.jpg)
 * Astra
 * [Support Threads](https://wordpress.org/support/theme/astra/)
 * [Active Topics](https://wordpress.org/support/theme/astra/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/astra/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/astra/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [Danstano](https://wordpress.org/support/users/danstano/)
 * Last activity: [5 years, 8 months ago](https://wordpress.org/support/topic/not-working-with-js-code/#post-13447894)
 * Status: resolved