{"id":14005,"date":"2022-11-28T11:00:23","date_gmt":"2022-11-28T09:00:23","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=14005"},"modified":"2022-11-30T14:25:31","modified_gmt":"2022-11-30T12:25:31","slug":"como-crear-un-calendario-actual","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/","title":{"rendered":"C\u00f3mo crear un Calendario actual"},"content":{"rendered":"<h2>\u00bfC\u00f3mo hacer un calendario mediante el uso de HTML, CSS Y JS?<\/h2>\n<p>En este articulo vamos a explicar detalladamente los pasos que hay que hacer para poder desarrollar un calendario. En el cual nos va a marcar con un <em><strong>resaltado a color<\/strong><\/em> el d\u00eda en que estamos.<\/p>\n<p>He cre\u00eddo que ir\u00eda mejor tener un c\u00f3digo de esta manera vinculado a un calendario, en el que con pocas l\u00edneas ya puedes hacer el calendario completo de varios a\u00f1os, en el que explico m\u00e1s abajo las definiciones, las variables, y los c\u00e1lculos para que sea un calendario reutilizable. Para este calendario en concreto vamos a tener en cuenta los tres tipos c\u00f3digos que vamos a incluir, para que as\u00ed le podamos dar las caracter\u00edsticas adecuadas que queremos que tenga.<\/p>\n<p>Utilizo un c\u00f3digo f\u00e1cil de entender y escribir. De esta manera tambi\u00e9n nos puede servir para otro calendario y que puedas aprovechar parte del c\u00f3digo.<\/p>\n<h3>C\u00f3digo HTML y ESTRUCTURA<\/h3>\n<pre>     &lt;table id=\"calendar\"&gt;\r\n       &lt;thead&gt;\r\n       &lt;caption&gt; &lt;\/caption&gt;\r\n       &lt;tr&gt;\r\n          &lt;th&gt;\r\n                    Lun\r\n          &lt;\/th&gt;\r\n          &lt;th&gt;\r\n                    Mar\r\n          &lt;\/th&gt;\r\n          &lt;th&gt;\r\n                    Mie\r\n          &lt;\/th&gt;\r\n          &lt;th&gt;\r\n                    Jue\r\n          &lt;\/th&gt;\r\n          &lt;th&gt;\r\n                    Vie\r\n          &lt;\/th&gt;\r\n          &lt;th&gt;\r\n                    Sab\r\n          &lt;\/th&gt;\r\n          &lt;th&gt;\r\n                    Dom\r\n          &lt;\/th&gt;\r\n      &lt;\/tr&gt;\r\n     &lt;\/thead&gt;\r\n &lt;tbody&gt; &lt;\/tbody&gt;\r\n     &lt;\/table&gt;\r\n<\/pre>\n<h4>Definici\u00f3n del HTML<\/h4>\n<p>Usaremos una etiqueta <code><strong>&lt;table id='calendar'&gt;<\/strong><\/code>, en el cual dentro le pondremos alguna etiquetas en las que le a\u00f1adir\u00e9 la definici\u00f3n que tienen y que es lo que hacen.<\/p>\n<p>Uso la tabla para que as\u00ed ya desde un principio nos queden los d\u00edas puestos y con separaci\u00f3n, mir\u00e1ndolo desde otra perspectiva un calendario es como una tabla invisible, en la que cada n\u00famero est\u00e1 dentro de su espacio dado.<\/p>\n<p>Adem\u00e1s he escogido escribir este c\u00f3digo para ahorrarnos poner m\u00e1s de lo normal. Tambi\u00e9n se puede hacer de distintas maneras el calendario, pero de esta manera creo que es mejor para que a la hora de hacer el documento nos sea de m\u00e1s utilidad y con m\u00e1s facilidad de entenderlo.<\/p>\n<ul>\n<li>El <strong><code>&lt;caption&gt;<\/code>,<\/strong> est\u00e1 vac\u00edo en este caso, pero le podemos dar alg\u00fan nombre en caso de que sea necesario.<\/li>\n<li>Uso un solo <code><strong>&lt;tr&gt;<\/strong><\/code> para incluir todos los d\u00edas de la semana. En el que cada d\u00eda diferente estar\u00e1 dentro de un <code><strong>&lt;th&gt;<\/strong><\/code>, de esta manera quedan los d\u00edas separados en sus celdas correspondientes.<\/li>\n<\/ul>\n<h5>Definici\u00f3n de etiquetas<\/h5>\n<ol>\n<li><strong>Etiqueta <code>&lt;table&gt;<\/code><\/strong> = representa una tabla.<\/li>\n<li><strong>Etiqueta <code>&lt;thead&gt;<\/code><\/strong> = contiene un bloque de filas en la tabla.<\/li>\n<li><strong>Etiqueta <code>&lt;caption&gt;<\/code><\/strong> = le da un t\u00edtulo a la tabla.<\/li>\n<li><strong>Etiqueta <code>&lt;tr&gt;<\/code><\/strong> = define un fila de celdas de la tabla.<\/li>\n<li><strong>Etiqueta <code>&lt;th&gt;<\/code><\/strong> = representa una celda de encabezado (aqu\u00ed introducimos los d\u00edas que hay de la semana)<\/li>\n<li><strong>Etiqueta <code>&lt;tbody&gt;<\/code><\/strong> = representa el cuerpo de la tabla.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h3>C\u00f3digo CSS<\/h3>\n<div>\n<div>#calendar {\u00a0font-family:Arial;font-size:12px;}<\/div>\n<div>#calendar caption {text-align:left;padding:5px 10px;\u00a0background-color:#003366;<\/div>\n<div>color:#fff;font-weight:bold;font-size:medium;}<\/div>\n<div>#calendar caption div:nth-child(1) {float:left;}<\/div>\n<div>#calendar caption div:nth-child(2) {float:right;}<\/div>\n<div>#calendar caption div:nth-child(2) a {cursor:pointer;}<\/div>\n<div>#calendar th {background-color:#006699;color:#fff;width:40px;}<\/div>\n<div>#calendar td {text-align:right;padding:2px 5px;background-color:silver;}<\/div>\n<div>#calendar .hoy {background-color:red;}<\/div>\n<\/div>\n<h4>Definici\u00f3n del CSS<\/h4>\n<p>Los estilos, est\u00e1n todos destinados a dar las caracter\u00edsticas al Calendario, c\u00f3mo el c\u00f3digo lo he hecho en pocas l\u00edneas, nos centramos en usar las etiquetas introducidas para darle los valores y caracter\u00edsticas.<\/p>\n<p>Usaremos la<code><strong> &lt;id&gt;<\/strong> <\/code>que he creado para darle los valores, como se ve en la <code>&lt;<strong>id calendar&gt;<\/strong><\/code>, se repite varias veces pero en cada una le damos diferentes valores donde queremos que nos haga los cambios y nos aplique las caracter\u00edsticas que le vamos dando.<\/p>\n<h3>C\u00f3digo JS<\/h3>\n<div>\n<pre>var actual=new Date();\r\nfunction mostrarCalendario(year,month)\r\n{\r\n\u00a0 \u00a0 var now=new Date(year,month-1,1);\r\n\u00a0 \u00a0 var last=new Date(year,month,0);\r\n\u00a0 \u00a0 var primerDiaSemana=(now.getDay()==0)?7:now.getDay();\r\n\u00a0 \u00a0 var ultimoDiaMes=last.getDate();\r\n\u00a0 \u00a0 var dia=0;\r\n\u00a0 \u00a0 var resultado=\"&lt;tr bgcolor='silver'&gt;\";\r\n\u00a0 \u00a0 var diaActual=0;\r\n\u00a0 \u00a0 console.log(ultimoDiaMes);\r\n\u00a0 \u00a0 var last_cell=primerDiaSemana+ultimoDiaMes;\r\n\u00a0 \u00a0 \/\/ hacemos un bucle hasta 42 \r\n\u00a0 \u00a0 \/\/de  6 columnas y de 7 d\u00edas\r\n\u00a0 \u00a0 for(var i=1;i&lt;=42;i++)\r\n\u00a0 \u00a0 {\r\n\u00a0 \u00a0 \u00a0 \u00a0 if(i==primerDiaSemana)\r\n\u00a0 \u00a0 \u00a0 \u00a0 {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ determinamos en que d\u00eda empieza\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 dia=1;\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 if(i&lt;primerDiaSemana || i&gt;=last_cell)\r\n\u00a0 \u00a0 \u00a0 \u00a0 {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ celda vac\u00eda\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 resultado+=\"&lt;td&gt;&amp;nbsp;&lt;\/td&gt;\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 }else{\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ mostramos el d\u00eda\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if(dia==actual.getDate() &amp;&amp; month==actual.getMonth()+1 &amp;&amp;\r\n year==actual.getFullYear())\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 resultado+=\"&lt;td class='hoy'&gt;\"+dia+\"&lt;\/td&gt;\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 else\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 resultado+=\"&lt;td&gt;\"+dia+\"&lt;\/td&gt;\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 dia++;\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 \u00a0 \u00a0 if(i%7==0)\r\n\u00a0 \u00a0 \u00a0 \u00a0 {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if(dia&gt;ultimoDiaMes)\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 break;\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 resultado+=\"&lt;\/tr&gt;&lt;tr&gt;\\n\";\r\n\u00a0 \u00a0 \u00a0 \u00a0 }\r\n\u00a0 \u00a0 }\r\n\u00a0 \u00a0 resultado+=\"&lt;\/tr&gt;\";\r\n\r\nvar meses=Array(\"Enero\", \"Febrero\", \"Marzo\", \"Abril\", \"Mayo\",\r\n \"Junio\", \"Julio\", \"Agosto\", \"Septiembre\", \"Octubre\", \"Noviembre\",\r\n \"Diciembre\");\r\n\r\n\u00a0 \u00a0 \/\/ Calculamos el siguiente mes y a\u00f1o\r\n\u00a0 \u00a0 nextMonth=month+1;\r\n\u00a0 \u00a0 nextYear=year;\r\n\r\n\u00a0 \u00a0 if(month+1&gt;12)\r\n\u00a0 \u00a0 {\r\n\u00a0 \u00a0 \u00a0 \u00a0 nextMonth=1;\r\n\u00a0 \u00a0 \u00a0 \u00a0 nextYear=year+1;\r\n\u00a0 \u00a0 }\r\n\r\n\u00a0 \u00a0 \/\/ Calculamos el anterior mes y a\u00f1o\r\n\u00a0 \u00a0 prevMonth=month-1;\r\n\u00a0 \u00a0 prevYear=year;\r\n\r\n\u00a0 \u00a0 if(month-1&lt;1)\r\n\u00a0 \u00a0 {\r\n\u00a0 \u00a0 \u00a0 \u00a0 prevMonth=12;\r\n\u00a0 \u00a0 \u00a0 \u00a0 prevYear=year-1;\r\n\u00a0 \u00a0 }\r\n\r\ndocument.getElementById(\"calendar\").getElementsByTagName(\"caption\")\r\n[0].innerHTML=\"&lt;div&gt;\"+meses\r\n[month-1]+\" \/ \"+year+\"&lt;\/div&gt;\r\n&lt;div&gt;\r\n&lt;a onclick='mostrarCalendario(\"+prevYear+\",\"+prevMonth+\")'&gt;&amp;lt;&lt;\/a&gt;\r\n&lt;a onclick='mostrarCalendario(\"+nextYear+\",\"+nextMonth+\")'&gt;&amp;gt;&lt;\/a&gt;\r\n&lt;\/div&gt;\";\r\ndocument.getElementById(\"calendar\").getElementsByTagName(\"tbody\")\r\n[0].innerHTML=resultado;\r\n}\r\n\r\nmostrarCalendario(actual.getFullYear(),actual.getMonth()+1);<\/pre>\n<\/div>\n<h4>Definici\u00f3n JS<\/h4>\n<ul>\n<li>\u00a0El<strong> New date:<\/strong>\u00a0 representa un momento fijo en el tiempo en un formato independiente, el objeto date va a contener n\u00fameros.<\/li>\n<li>Creamos una <strong>F<\/strong><strong>unci\u00f3n<\/strong> en la que vamos a declarar dentro siete variable que consistir\u00e1n en crear los datos que se requieren para el calendario. Estas siete variables las vamos a ver en el c\u00f3digo en el que en cada parte le pongo <em><strong>\/*comentario*\/<\/strong><\/em> para que se vea bien cuando les hacemos el llamado para que ejecuten el c\u00f3digo y nos muestren el resultado obtenido.<\/li>\n<li><strong>Creamos nueva Array:<\/strong> en la que le a\u00f1ado todos los meses\u00a0 dentro de la Array que contiene el a\u00f1o, para que as\u00ed se muestren a la hora de inspeccionar el calendario.<\/li>\n<li><strong>IF&#8230;Else<\/strong>: ejecuta una sentencia si una condici\u00f3n especificada es evaluada como verdadera. Si la condici\u00f3n es evaluada como falsa, otra sentencia puede ser ejecutada.<\/li>\n<li><strong>On-click<\/strong>: son eventos que ocurren cuando el usuario hace clic sobre el bot\u00f3n.<\/li>\n<li class=\" prettyprinted\"><span class=\"pln\"><strong>getElementById<\/strong>: es una referencia a un objeto, o nulo si un elemento con el ID especificado no<br \/>\nse encuentra en el documento.<br \/>\n<\/span><\/li>\n<li class=\" prettyprinted\"><strong><span class=\"pln\">getElementsByTagName:\u00a0<\/span><\/strong><span class=\"pln\">devuelve una lista de elementos con un nombre determinado. Se busca en todo el documento.<\/span><\/li>\n<li><strong>.Innerhtml: <\/strong> es una propiedad que hace que nos muestre el resultado dentro del documento html.<\/li>\n<\/ul>\n<p>C\u00f3mo se puede ver, voy dejando pistas en cada parte del c\u00f3digo para que se entienda en\u00a0 c\u00f3mo se deben hacer las funciones con su contenido.<\/p>\n<p>Los bucles con sus f\u00f3rmulas hechas para el c\u00e1lculo, y las llamadas de las funciones para que ejecuten el contenido incluido.<\/p>\n<h3 style=\"text-align: center\">Resultado final del Calendario<\/h3>\n<p><a href=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/Captura_index3-1.png\" rel=\"attachment wp-att-14076\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14076 aligncenter\" src=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/Captura_index3-1.png\" alt=\"\" width=\"196\" height=\"148\" \/><\/a><br \/>\nEste ser\u00eda el resultado final del Calendario una vez hecho todo el c\u00f3digo.<\/p>\n<p>No olvid\u00e9is echar un ojo a art\u00edculos relacionados con<a href=\"https:\/\/www.espai.es\/blog\/2015\/12\/calendario-editorial-de-redes-sociales\/\"> los calendarios<\/a>., para poder tener otras ideas en las que quer\u00e1is mejorarlo o optar por otra tipolog\u00eda de letra, de colores, o de formatos.<\/p>\n<p>Accede al siguiente link para poder visualizar el c\u00f3digo completo: <a href=\"https:\/\/codepen.io\/Wilchard89\" target=\"_blank\" rel=\"noopener\">https:\/\/codepen.io\/Wilchard89<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfC\u00f3mo hacer un calendario mediante el uso de HTML, CSS Y JS? En este articulo vamos a explicar detalladamente los pasos que hay que hacer para poder desarrollar un calendario. En el cual nos va a marcar con un resaltado a color el d\u00eda en&#8230;<\/p>\n","protected":false},"author":40,"featured_media":14006,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-14005","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo crear un Calendario actual - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"Crear un calendario actual en el cual va a mostrar los d\u00edas y los a\u00f1os pr\u00f3ximos, adem\u00e1s de remarcar el d\u00eda en que estamos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo crear un Calendario actual - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"Crear un calendario actual en el cual va a mostrar los d\u00edas y los a\u00f1os pr\u00f3ximos, adem\u00e1s de remarcar el d\u00eda en que estamos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-28T09:00:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-30T12:25:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/calendario_articulo_blog.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Albert Saun\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Albert Saun\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/\"},\"author\":{\"name\":\"Albert Saun\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c63e2f9a0b24763275048a24a99da51c\"},\"headline\":\"C\u00f3mo crear un Calendario actual\",\"datePublished\":\"2022-11-28T09:00:23+00:00\",\"dateModified\":\"2022-11-30T12:25:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/\"},\"wordCount\":918,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/calendario_articulo_blog.jpg\",\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/\",\"name\":\"C\u00f3mo crear un Calendario actual - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/calendario_articulo_blog.jpg\",\"datePublished\":\"2022-11-28T09:00:23+00:00\",\"dateModified\":\"2022-11-30T12:25:31+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c63e2f9a0b24763275048a24a99da51c\"},\"description\":\"Crear un calendario actual en el cual va a mostrar los d\u00edas y los a\u00f1os pr\u00f3ximos, adem\u00e1s de remarcar el d\u00eda en que estamos.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/calendario_articulo_blog.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/calendario_articulo_blog.jpg\",\"width\":1000,\"height\":500,\"caption\":\"calendario\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo crear un Calendario actual\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c63e2f9a0b24763275048a24a99da51c\",\"name\":\"Albert Saun\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/25a233c7e7d471d1fb903aa7f73a068fbe9979ef223613ca32d138a8891453a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/25a233c7e7d471d1fb903aa7f73a068fbe9979ef223613ca32d138a8891453a2?s=96&d=mm&r=g\",\"caption\":\"Albert Saun\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/albertsaun\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo crear un Calendario actual - Blog Escola Espai","description":"Crear un calendario actual en el cual va a mostrar los d\u00edas y los a\u00f1os pr\u00f3ximos, adem\u00e1s de remarcar el d\u00eda en que estamos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo crear un Calendario actual - Blog Escola Espai","og_description":"Crear un calendario actual en el cual va a mostrar los d\u00edas y los a\u00f1os pr\u00f3ximos, adem\u00e1s de remarcar el d\u00eda en que estamos.","og_url":"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/","og_site_name":"Blog Escola Espai","article_published_time":"2022-11-28T09:00:23+00:00","article_modified_time":"2022-11-30T12:25:31+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/calendario_articulo_blog.jpg","type":"image\/jpeg"}],"author":"Albert Saun","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Albert Saun","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/"},"author":{"name":"Albert Saun","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c63e2f9a0b24763275048a24a99da51c"},"headline":"C\u00f3mo crear un Calendario actual","datePublished":"2022-11-28T09:00:23+00:00","dateModified":"2022-11-30T12:25:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/"},"wordCount":918,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/calendario_articulo_blog.jpg","articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/","url":"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/","name":"C\u00f3mo crear un Calendario actual - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/calendario_articulo_blog.jpg","datePublished":"2022-11-28T09:00:23+00:00","dateModified":"2022-11-30T12:25:31+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c63e2f9a0b24763275048a24a99da51c"},"description":"Crear un calendario actual en el cual va a mostrar los d\u00edas y los a\u00f1os pr\u00f3ximos, adem\u00e1s de remarcar el d\u00eda en que estamos.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/calendario_articulo_blog.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/calendario_articulo_blog.jpg","width":1000,"height":500,"caption":"calendario"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2022\/11\/como-crear-un-calendario-actual\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo crear un Calendario actual"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/c63e2f9a0b24763275048a24a99da51c","name":"Albert Saun","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/25a233c7e7d471d1fb903aa7f73a068fbe9979ef223613ca32d138a8891453a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/25a233c7e7d471d1fb903aa7f73a068fbe9979ef223613ca32d138a8891453a2?s=96&d=mm&r=g","caption":"Albert Saun"},"url":"https:\/\/www.espai.es\/blog\/author\/albertsaun\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2022\/11\/calendario_articulo_blog.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/14005","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=14005"}],"version-history":[{"count":74,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/14005\/revisions"}],"predecessor-version":[{"id":14222,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/14005\/revisions\/14222"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/14006"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=14005"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=14005"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=14005"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}