Home / Questions / 323916
Accepted
EMCode
Asked: 2020-01-24 05:32:55 +0800 CST 2020-01-24 05:32:55 +0800 CST

Escape HTML code in dynamic calendar event

  • 772

This question is based on this answer .

Good day,

I'm working with the JsCalendar GramThanos calendar , at the time I needed to add dynamic events inside the calendar, with the help of the user @fredyfx it was achieved as follows:

//Agregando elementos de manera dinamica:
var pepito = new Date(2020, 0, 23);
var juana = new Date(2020, 0, 24);
var luis = new Date(2020, 0, 25);
var diana = new Date(2020, 0, 26);

cargarMensaje(pepito, "Pepito Perez - Ingeniero");
cargarMensaje(juana, "Juana Diaz - Profesora");
cargarMensaje(luis, "Luis Lopez - Médico");
cargarMensaje(diana, "Diana Jiménez - Científica");

function cargarMensaje(fecha, mensaje) {
  var id = jsCalendar.tools.dateToString(fecha, date_format, "es");
  // If no events, create list
  if (!events.hasOwnProperty(id)) {
    // Select date
    calendar.select(current);
    // Create list
    events[id] = [];
  }
  events[id].push({
    name: mensaje
  });
  // Refresh events: Mostramos los eventos del día actual.
  showEvents(current);
}

Now the need arises for those lines of text or entries to recognize HTML code, for example:

cargarMensaje(pepito, "<b>Pepito Perez</b> - <i>Ingeniero</i>");

Bold should be applied to the name and an italic to the profession, but these values ​​are not being taken and the information displayed on the screen is textual the line:

<b>Pepito Perez</b> - <i>Ingeniero</i>

I tried at the time with jQuery making use of $.parseHTML(mensaje);and then replacing events[id].push({name : mensaje});withevents[id].push({name : nuevoMensaje});

But I got the events with the text[object text]

I share the complete code below, the events are on January 23 to 26.

Thank you very much

// Get elements
var elements = {
  // Calendar element
  calendar: document.getElementById("events-calendar"),
  // Input element
  events: document.getElementById("events")
}

// Create the calendar
elements.calendar.className = "clean-theme";
var calendar = jsCalendar.new(elements.calendar);

// Create events elements
elements.title = document.createElement("div");
elements.title.className = "title";
elements.events.appendChild(elements.title);
elements.subtitle = document.createElement("div");
elements.subtitle.className = "subtitle";
elements.events.appendChild(elements.subtitle);
elements.list = document.createElement("div");
elements.list.className = "list";
elements.events.appendChild(elements.list);
elements.actions = document.createElement("div");
elements.actions.className = "action";
elements.events.appendChild(elements.actions);
elements.addButton = document.createElement("input");
elements.addButton.type = "button";
elements.addButton.value = "Add";
elements.actions.appendChild(elements.addButton);

var events = {};
var date_format = "DD/MM/YYYY";
var current = null;

var showEvents = function(date) {
  // Date string
  var id = jsCalendar.tools.dateToString(date, date_format, "es");
  // Set date
  current = new Date(date.getTime());
  // Set title
  elements.title.textContent = id;
  // Clear old events
  elements.list.innerHTML = "";
  // Add events on list
  if (events.hasOwnProperty(id) && events[id].length) {
    // Number of events
    elements.subtitle.textContent = events[id].length + " " + ((events[id].length > 1) ? "events" : "event");

    var div;
    var close;
    // For each event
    for (var i = 0; i < events[id].length; i++) {
      div = document.createElement("div");
      div.className = "event-item";
      div.textContent = (i + 1) + ". " + events[id][i].name;
      elements.list.appendChild(div);
      close = document.createElement("div");
      close.className = "close";
      close.textContent = "×";
      div.appendChild(close);
      close.addEventListener("click", (function(date, index) {
        return function() {
          removeEvent(date, index);
        }
      })(date, i), false);
    }
  } else {
    elements.subtitle.textContent = "No events";
  }
};

// Show current date events
showEvents(new Date());

// Add events
calendar.onDateClick(function(event, date) {
  // Update calendar date
  calendar.set(date);
  // Show events
  showEvents(date);
});



//Agregando elementos de manera dinamica:
var pepito = new Date(2020, 0, 23);
var juana = new Date(2020, 0, 24);
var luis = new Date(2020, 0, 25);
var diana = new Date(2020, 0, 26);

cargarMensaje(pepito, "Pepito Perez - Ingeniero");
cargarMensaje(juana, "Juana Diaz - Profesora");
cargarMensaje(luis, "Luis Lopez - Médico");
cargarMensaje(diana, "Diana Jiménez - Científica");

function cargarMensaje(fecha, mensaje) {
  var id = jsCalendar.tools.dateToString(fecha, date_format, "es");
  // If no events, create list
  if (!events.hasOwnProperty(id)) {
    // Select date
    calendar.select(current);
    // Create list
    events[id] = [];
  }
  events[id].push({
    name: mensaje
  });
  // Refresh events: Mostramos los eventos del día actual.
  showEvents(current);
}
html,
body {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

.description {
  text-align: center;
  padding-bottom: 40px;
}

.jsCalendar.clean-theme tbody td.jsCalendar-previous,
.jsCalendar.clean-theme tbody td.jsCalendar-next {
  color: #000;
  opacity: 0.2;
}

#wrapper {
  margin: 0 auto;
  width: 800px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}

#wrapper .jsCalendar table {
  box-shadow: none;
}

.clear {
  clear: both;
}

#events-calendar {
  float: left;
}

#events {
  float: left;
  width: 435px;
  margin: 10px 20px 10px 5px;
}

#events .title {
  padding: 5px 0px;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

#events .subtitle {
  padding: 5px 0px;
  font-size: 14px;
  text-align: center;
  color: #888;
}

#events .list {
  height: 250px;
  overflow-y: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

#events .list .event-item {
  line-height: 24px;
  min-height: 24px;
  padding: 2px 5px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

#events .list .event-item .close {
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: bold;
  font-size: 12px;
  color: #000;
  border-radius: 8px;
  height: 14px;
  width: 14px;
  line-height: 12px;
  text-align: center;
  float: right;
  border: 1px solid rgba(0, 0, 0, 0.5);
  padding: 0px;
  margin: 5px;
  display: block;
  overflow: hidden;
  background: #F44336;
  cursor: pointer;
}

#events .action {
  text-align: right;
}

#events .action input {
  padding: 0px 5px;
  font-size: 12px;
  margin: 10px 5px;
  border: 1px solid #999999;
  height: 28px;
  line-height: 28px;
  width: 120px;
  background: #f8f8f8;
  color: black;
  cursor: pointer;
  transition: all 0.2s;
}

#events .action input:hover {
  background: #eee;
  border: 1px solid #000;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
<script src="https://gramthanos.github.io/jsCalendar/js/jsCalendar.min.js"></script>
<link href="https://gramthanos.github.io/jsCalendar/css/jsCalendar.min.css" rel="stylesheet" />
<link href="https://gramthanos.github.io/jsCalendar/css/themes/jsCalendar.clean.min.css" rel="stylesheet" />
<div id="wrapper">
  <!-- Calendar element -->
  <div id="events-calendar"></div>
  <!-- Events -->
  <div id="events"></div>
  <!-- Clear -->
  <div class="clear"></div>
</div>
<div class="clear"></div>

javascript

1 Answers

  1. Best Answer

    You have the solution by modifying a line.

    In the loop that iterates through the events and inserts them into the DOM when inserting the body of the message you are doing it through node.textContent, which causes the content to be treated as a literal, causing any tag to be free of the interpreter considers it code to interpret as HTML .

    The textContent property of the Node interface represents the text content of a node and its descendants.

    Changing the use of that property for innerHTMLwhat you get is inserting code that can be interpreted, getting what you set out to do.

    // Get elements
var elements = {
  // Calendar element
  calendar: document.getElementById("events-calendar"),
  // Input element
  events: document.getElementById("events")
}

// Create the calendar
elements.calendar.className = "clean-theme";
var calendar = jsCalendar.new(elements.calendar);

// Create events elements
elements.title = document.createElement("div");
elements.title.className = "title";
elements.events.appendChild(elements.title);
elements.subtitle = document.createElement("div");
elements.subtitle.className = "subtitle";
elements.events.appendChild(elements.subtitle);
elements.list = document.createElement("div");
elements.list.className = "list";
elements.events.appendChild(elements.list);
elements.actions = document.createElement("div");
elements.actions.className = "action";
elements.events.appendChild(elements.actions);
elements.addButton = document.createElement("input");
elements.addButton.type = "button";
elements.addButton.value = "Add";
elements.actions.appendChild(elements.addButton);

var events = {};
var date_format = "DD/MM/YYYY";
var current = null;

var showEvents = function(date) {
  // Date string
  var id = jsCalendar.tools.dateToString(date, date_format, "es");
  // Set date
  current = new Date(date.getTime());
  // Set title
  elements.title.textContent = id;
  // Clear old events
  elements.list.innerHTML = "";
  // Add events on list
  if (events.hasOwnProperty(id) && events[id].length) {
    // Number of events
    elements.subtitle.textContent = events[id].length + " " + ((events[id].length > 1) ? "events" : "event");

    var div;
    var close;
    // For each event
    for (var i = 0; i < events[id].length; i++) {
      div = document.createElement("div");
      div.className = "event-item";
      div.innerHTML = (i + 1) + ". " + events[id][i].name; //Esta es la linea modificada
      elements.list.appendChild(div); 
      close = document.createElement("div");
      close.className = "close";
      close.textContent = "×";
      div.appendChild(close);
      close.addEventListener("click", (function(date, index) {
        return function() {
          removeEvent(date, index);
        }
      })(date, i), false);
    }
  } else {
    elements.subtitle.textContent = "No events";
  }
};

// Show current date events
showEvents(new Date());

// Add events
calendar.onDateClick(function(event, date) {
  // Update calendar date
  calendar.set(date);
  // Show events
  showEvents(date);
});



//Agregando elementos de manera dinamica:
var pepito = new Date(2020, 0, 23);
var juana = new Date(2020, 0, 24);
var luis = new Date(2020, 0, 25);
var diana = new Date(2020, 0, 26);

cargarMensaje(pepito, "<b>Pepito Perez</b> - <i>Ingeniero</i>");
cargarMensaje(juana, "Juana Diaz - Profesora");
cargarMensaje(luis, "Luis Lopez - Médico");
cargarMensaje(diana, "Diana Jiménez - Científica");

function cargarMensaje(fecha, mensaje) {
  var id = jsCalendar.tools.dateToString(fecha, date_format, "es");
  // If no events, create list
  if (!events.hasOwnProperty(id)) {
    // Select date
    calendar.select(current);
    // Create list
    events[id] = [];
  }
  events[id].push({
    name: mensaje
  });
  // Refresh events: Mostramos los eventos del día actual.
  showEvents(current);
}
    html,
body {
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

.description {
  text-align: center;
  padding-bottom: 40px;
}

.jsCalendar.clean-theme tbody td.jsCalendar-previous,
.jsCalendar.clean-theme tbody td.jsCalendar-next {
  color: #000;
  opacity: 0.2;
}

#wrapper {
  margin: 0 auto;
  width: 800px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}

#wrapper .jsCalendar table {
  box-shadow: none;
}

.clear {
  clear: both;
}

#events-calendar {
  float: left;
}

#events {
  float: left;
  width: 435px;
  margin: 10px 20px 10px 5px;
}

#events .title {
  padding: 5px 0px;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

#events .subtitle {
  padding: 5px 0px;
  font-size: 14px;
  text-align: center;
  color: #888;
}

#events .list {
  height: 250px;
  overflow-y: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

#events .list .event-item {
  line-height: 24px;
  min-height: 24px;
  padding: 2px 5px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

#events .list .event-item .close {
  font-family: Tahoma, Geneva, sans-serif;
  font-weight: bold;
  font-size: 12px;
  color: #000;
  border-radius: 8px;
  height: 14px;
  width: 14px;
  line-height: 12px;
  text-align: center;
  float: right;
  border: 1px solid rgba(0, 0, 0, 0.5);
  padding: 0px;
  margin: 5px;
  display: block;
  overflow: hidden;
  background: #F44336;
  cursor: pointer;
}

#events .action {
  text-align: right;
}

#events .action input {
  padding: 0px 5px;
  font-size: 12px;
  margin: 10px 5px;
  border: 1px solid #999999;
  height: 28px;
  line-height: 28px;
  width: 120px;
  background: #f8f8f8;
  color: black;
  cursor: pointer;
  transition: all 0.2s;
}

#events .action input:hover {
  background: #eee;
  border: 1px solid #000;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
    <script src="https://gramthanos.github.io/jsCalendar/js/jsCalendar.min.js"></script>
<link href="https://gramthanos.github.io/jsCalendar/css/jsCalendar.min.css" rel="stylesheet" />
<link href="https://gramthanos.github.io/jsCalendar/css/themes/jsCalendar.clean.min.css" rel="stylesheet" />
<div id="wrapper">
  <!-- Calendar element -->
  <div id="events-calendar"></div>
  <!-- Events -->
  <div id="events"></div>
  <!-- Clear -->
  <div class="clear"></div>
</div>
<div class="clear"></div>

    • 6