'javascript plugin to display calendar

I am trying to find a package that i could install that would just display a view of a calendar as follows

I dont need to add an event or anything i just solely want it for display purposes. I currently use the fullcalendar.io for adding events.

I have tried to search online for a package but have not found any. Does anyone know what i could use to achieve the above image calendar view?

Solution 1:^[1]

To just display a calendar, it should be quite a simple task, and no need for an external package.

What about something like this, inspired by code-box calendar

// Start
_("#calendar").innerHTML = calendar();
 
// short querySelector
function _(s) {
  return document.querySelector(s);
}
 
// show info
function showInfo(event) {
  // link
  var url = "https://codepen.io/nakome/pen/EWBMzm.css";
  // get json
  getjson(url, function (obj) {
    for (var key in obj) {
      // if has envent add class
      if (_('[data-id="' + key + '"]')) {
        _('[data-id="' + key + '"]').classList.add("event");
      }
      if (event === key) {
        _("#calendar_data").classList.toggle("show_data");
        // template info
        var data =
          '<a href="#" class="hideEvent" ' +
          'onclick="return hideEvent();">&times;</a>' +
          "<h3>" +
          obj[key].type +
          "</h3>" +
          "<dl>" +
          "<dt><dfn>Title:</dfn></dt><dd>" +
          obj[key].title +
          "</dd>" +
          "<dt><dfn>Hour:</dfn></dt><dd>" +
          obj[key].time +
          "</dd>" +
          "<dt><dfn>Venue:</dfn></dt><dd>" +
          obj[key].venue +
          "</dd>" +
          "<dt><dfn>Location:</dfn></dt><dd>" +
          obj[key].location +
          "</dd>" +
          "<dt><dfn>Description:</dfn></dt><dd>" +
          obj[key].desc +
          "</dd>" +
          '<dt><dfn>More Info:</dfn></dt><dd><a href="' +
          obj[key].more +
          '" title="More info">Here</a></dd>' +
          "</dl>";
 
        return (_("#calendar_data").innerHTML = data);
      }
    }
  });
  return false;
}
// toggle event show or hide
function hideEvent() {
  _("#calendar_data").classList.toggle("show_data");
}
 
// simple calendar
function calendar() {
  // show info on init
  showInfo();
 
  // vars
  var day_of_week = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"),
    month_of_year = new Array(
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ),
    Calendar = new Date(),
    year = Calendar.getYear(),
    month = Calendar.getMonth(),
    today = Calendar.getDate(),
    weekday = Calendar.getDay(),
    html = "";
 
  // start in 1 and this month
  Calendar.setDate(1);
  Calendar.setMonth(month);
 
  // template calendar
  html = "<table>";
  // head
  html += "<thead>";
  html +=
    '<tr class="head_cal"><th colspan="7">' +
    month_of_year[month] +
    "</th></tr>";
  html +=
    '<tr class="subhead_cal"><th colspan="7">' +
    Calendar.getFullYear() +
    "</th></tr>";
  html += '<tr class="week_cal">';
  for (index = 0; index < 7; index++) {
    if (weekday == index) {
      html += '<th class="week_event">' + day_of_week[index] + "</th>";
    } else {
      html += "<th>" + day_of_week[index] + "</th>";
    }
  }
  html += "</tr>";
  html += "</thead>";
 
  // body
  html += '<tbody class="days_cal">';
  html += "</tr>";
 
  // white zone
  for (index = 0; index < Calendar.getDay(); index++) {
    html += '<td class="white_cal"> </td>';
  }
 
  for (index = 0; index < 31; index++) {
    if (Calendar.getDate() > index) {
      week_day = Calendar.getDay();
 
      if (week_day === 0) {
        html += "</tr>";
      }
      if (week_day !== 7) {
        // this day
        var day = Calendar.getDate();
        var info =
          Calendar.getMonth() + 1 + "/" + day + "/" + Calendar.getFullYear();
 
        if (today === Calendar.getDate()) {
          html +=
            '<td><a class="today_cal" href="#" data-id="' +
            info +
            '" onclick="return showInfo(\'' +
            info +
            "')\">" +
            day +
            "</a></td>";
 
          showInfo(info);
        } else {
          html +=
            '<td><a href="#" data-id="' +
            info +
            '" onclick="return showInfo(\'' +
            info +
            "')\">" +
            day +
            "</a></td>";
        }
      }
 
      if (week_day == 7) {
        html += "</tr>";
      }
    }
 
    Calendar.setDate(Calendar.getDate() + 1);
  } // end for loop
  return html;
}
 
//   Get Json data
function getjson(url, callback) {
  var self = this,
    ajax = new XMLHttpRequest();
  ajax.open("GET", url, true);
  ajax.onreadystatechange = function () {
    if (ajax.readyState == 4) {
      if (ajax.status == 200) {
        var data = JSON.parse(ajax.responseText);
        return callback(data);
      } else {
        /* Handle click with `ajax.status` */
      }
    }
  };
  ajax.send();
}

*,
*:after,
*:before {
  box-sizing: border-box;
}
 
body {
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  background: #efefef;
}
/* for demo */
.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  height: 480px;
  background: #fff;
  margin: 1em auto;
  border: 4px solid #e2e2e2;
  box-shadow: 0 10px 9px -6px #c5c5c5;
  border-top-width: 25px;
  border-bottom-width: 32px;
  border-radius: 8px;
  overflow: hidden;
}
div#calendar {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #f3f3f3;
}
table {
  width: 100%;
  font-family: sans-serif;
  border-collapse: separate;
  border-spacing: 0;
}
.head_cal {
  background: #fff;
  color: #85baff;
  font-size: 2rem;
  line-height: 5rem;
  text-transform: uppercase;
}
.subhead_cal {
  background: #85baff;
  color: #fff;
  font-size: 1.2rem;
  line-height: 2rem;
}
.week_cal {
  background: #fff;
  color: #d7d7d7;
  font-size: 1rem;
  line-height: 2rem;
}
.white_cal {
  background: #ececec !important;
}
tbody.days_cal tr td a {
  padding: 0;
  text-decoration: none;
  background: #fff;
  color: #888;
  height: 3.2rem;
  width: 100%;
  line-height: 3.2rem;
  display: block;
}
tbody.days_cal tr td {
  padding: 0;
  margin: 0;
  border: 1px solid #ececec;
  text-align: center;
  width: 14.28571428571429%;
  height: auto;
}
.event {
  color: #85baff !important;
  transition: all 0.3s ease;
}
.today_cal.event {
  background: #ff8d8d !important;
  color: #fff !important;
  transition: all 0.3s ease;
}
.today_cal.event:hover,
.event:hover {
  opacity: 0.5;
  transition: all 0.3s ease;
}
.week_event {
  color: #85baff;
}
#calendar_data {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #c5c5c5;
  opacity: 0;
  visibility: hidden;
  transform: scale(0, 0);
  transition: all 0.8s ease;
}
 
#calendar_data h3 {
  text-align: center;
  font-size: 20px;
  padding: 5px 10px;
  margin: 0;
  background: #f2f2f2;
  color: #43aeef;
  border-bottom: 1px solid #dfdfdf;
  text-transform: capitalize;
}
#calendar_data dl {
  padding: 0.5em;
  margin-left: 0;
  display: block;
  height: calc(100% - 4rem);
}
#calendar_data dt {
  float: left;
  clear: left;
  width: 5rem;
  text-align: left;
  font-size: 0.8rem;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
    Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  color: #43b0ef;
  background: #fff;
  padding: 0.2rem;
}
#calendar_data dd {
  margin: 0 0 1rem 5rem;
  padding: 0 0.5rem 0.5rem 0.5rem;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
    Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 0.8rem;
  line-height: 1.2rem;
  color: #adadad;
  border-bottom: 1px solid #eaeaea;
}
#calendar_data dd:last-child {
  border: none;
}
 
#calendar_data a:not(.hideEvent) {
  color: #43aeef;
  border: 0.1rem solid #43aeef;
  padding: 0.2rem 1rem;
  text-decoration: none;
}
.show_data {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1, 1) !important;
  transition: all 0.2s ease;
}
 
.hideEvent {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 2rem;
  font-family: sans-serif;
  font-weight: 300;
  text-align: center;
  text-decoration: none;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  background: #f2f2f2;
  border-left: 0.1rem solid #e5e5e5;
  color: #d3d3d3 !important;
}
.hideEvent:hover {
  text-decoration: none;
  color: #f55;
}

<div class="wrapper">
  <div id="calendar"></div>
  <div id="calendar_data"></div>
</div>

Solution 2:^[2]

Dont know if this would help anyone but i used the pikaday plugin to achieve this.

pikaday

and i set the following so it would always be open

html

<input type="text" id="datepicker" style="display:none;">

async datePicker() {
    
        var field = document.getElementById('datepicker');
        var initiateDateCalendar = field as HTMLElement;
        initiateDateCalendar.click();

        var picker = new Pikaday({
            field: field,
            format: "D MMM YYYY",
            bound: false,
            container: document.getElementById('container'),
            
        });     

    
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	marc_s
Solution 2

'javascript plugin to display calendar

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]